'use client';

import React from 'react';
import { Plus, Star } from 'lucide-react';
import { useFoodMartStore, type CartItem } from '@/store/foodmart';
import { toast } from '@/hooks/use-toast';

interface FoodItem {
  id: string;
  name: string;
  description: string;
  price: number;
  discountPrice: number | null;
  discountPercent: number | null;
  rating: number;
  reviews: number;
  badge: string;
  isBestseller: boolean;
  isHalal: boolean;
  category: { id: string; name: string; slug: string; icon: string };
  thumbnail: string;
  largeImage: string;
}

interface FoodCardProps {
  food: FoodItem;
  onClick: (food: FoodItem) => void;
}

function formatPrice(price: number): string {
  return new Intl.NumberFormat('id-ID').format(price);
}

function HalalBadge() {
  return (
    <div className="absolute top-2 left-2 z-10 flex items-center gap-1 rounded-full bg-emerald-600/90 px-2 py-0.5 text-[10px] font-semibold text-white backdrop-blur-sm">
      <svg width="10" height="10" viewBox="0 0 24 24" fill="currentColor">
        <path d="M12 2C9.243 2 7 4.243 7 7c0 2.757 2.243 5 5 5s5-2.243 5-5c0-2.757-2.243-5-5-5zm-1 7h2v2h-2V9zm0-4h2v2h-2V5zm-5 10c-2.757 0-5 2.243-5 5s2.243 5 5 5 5-2.243 5-5-2.243-5-5-5zm-1 7h2v2h-2v-2zm0-4h2v2h-2v-2zm12-3c-2.757 0-5 2.243-5 5s2.243 5 5 5 5-2.243 5-5-2.243-5-5-5zm-1 7h2v2h-2v-2zm0-4h2v2h-2v-2z"/>
      </svg>
      Halal
    </div>
  );
}

export default function FoodCard({ food, onClick }: FoodCardProps) {
  const addToCart = useFoodMartStore((s) => s.addToCart);

  const handleQuickAdd = (e: React.MouseEvent) => {
    e.stopPropagation();
    const item: CartItem = {
      id: food.id,
      name: food.name,
      price: food.discountPrice || food.price,
      thumbnail: food.thumbnail,
      quantity: 1,
      variant: 'Regular',
      note: '',
    };
    addToCart(item);
    toast({
      title: 'Ditambahkan!',
      description: `${food.name} masuk ke keranjang`,
    });
  };

  const currentPrice = food.discountPrice || food.price;

  return (
    <div
      onClick={() => onClick(food)}
      className="group cursor-pointer overflow-hidden rounded-xl border border-[var(--border-default)] bg-[var(--bg-card)] transition-all duration-300 hover:scale-[1.02] hover:border-[var(--border-hover)] hover:shadow-xl"
      style={{ '--tw-shadow-color': 'var(--shadow-color)' } as React.CSSProperties}
    >
      {/* Image */}
      <div className="relative aspect-square overflow-hidden bg-[var(--bg-secondary)]">
        {food.thumbnail ? (
          <img
            src={food.thumbnail}
            alt={food.name}
            loading="lazy"
            className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-110"
          />
        ) : (
          <div className="flex h-full w-full items-center justify-center text-4xl text-[var(--text-quaternary)]">
            🍽️
          </div>
        )}

        {/* Halal Badge */}
        {food.isHalal && <HalalBadge />}

        {/* Badge (top-right) */}
        {food.badge && (
          <div className="absolute top-2 right-2 z-10">
            <span
              className={`rounded-full px-2.5 py-0.5 text-[10px] font-bold text-white backdrop-blur-sm ${
                food.badge.toLowerCase().includes('promo')
                  ? 'bg-red-500/90'
                  : food.badge.toLowerCase().includes('best') || food.isBestseller
                  ? 'bg-[var(--accent-500)]/90'
                  : 'bg-emerald-500/90'
              }`}
            >
              {food.badge}
            </span>
          </div>
        )}

        {/* Discount badge */}
        {food.discountPercent && (
          <div className="absolute bottom-2 right-2 z-10 rounded-lg bg-red-500 px-2 py-0.5 text-xs font-bold text-white shadow-lg">
            -{food.discountPercent}%
          </div>
        )}

        {/* Image overlay on hover */}
        <div className="absolute inset-0 bg-gradient-to-t from-black/40 via-transparent to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100" />
      </div>

      {/* Content */}
      <div className="p-3 sm:p-4">
        <h3 className="mb-1 line-clamp-2 text-sm font-semibold text-[var(--text-primary)] leading-tight">
          {food.name}
        </h3>

        {/* Price */}
        <div className="mb-2 flex items-baseline gap-2">
          <span className="text-base font-bold text-[var(--accent-400)]">
            Rp {formatPrice(currentPrice)}
          </span>
          {food.discountPrice && food.discountPrice < food.price && (
            <span className="text-xs text-[var(--text-tertiary)] line-through">
              Rp {formatPrice(food.price)}
            </span>
          )}
        </div>

        {/* Rating + Add button */}
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-1">
            <Star className="h-3.5 w-3.5 fill-amber-500 text-amber-500" />
            <span className="text-xs font-medium text-[var(--text-secondary)]">{food.rating}</span>
            <span className="text-xs text-[var(--text-quaternary)]">({food.reviews})</span>
          </div>
          <button
            onClick={handleQuickAdd}
            className="flex items-center gap-1.5 rounded-lg bg-[var(--accent-500)] px-3 py-1.5 text-xs font-semibold text-white transition-all hover:bg-[var(--accent-600)] active:scale-95"
          >
            <Plus className="h-3.5 w-3.5" />
            Tambah
          </button>
        </div>
      </div>
    </div>
  );
}

export type { FoodItem };