"use client";

import Image from "next/image";
import { Eye, Flame, Plus } from "lucide-react";
import { useState } from "react";
import type { Dish } from "@/lib/types";
import { formatPrice } from "@/lib/cart";
import { useCart } from "./cart-provider";
import { DishPreviewModal } from "./dish-preview-modal";
import { AdminDishEditor } from "./admin-dish-editor";

export function DishCard({ dish, compact = false, featured = false, priority = false, adminMode = false, showOrderActions = true }: { dish: Dish; compact?: boolean; featured?: boolean; priority?: boolean; adminMode?: boolean; showOrderActions?: boolean }) {
  const { addItem, ordersEnabled } = useCart();
  const [previewOpen, setPreviewOpen] = useState(false);
  const canOrder = ordersEnabled && dish.deliveryAvailable && !dish.temporarilyUnavailable && !dish.alcohol;

  return (
    <>
    <article className={`dish-card group ${compact ? "dish-card-compact" : ""} ${featured ? "dish-card-featured md:grid md:grid-cols-[1.08fr_0.92fr]" : ""}`}>
      {!compact ? (
        <div className={`relative bg-kiln-iron ${featured ? "min-h-72" : "aspect-[4/3]"}`}>
          <Image src={dish.image} alt={dish.imageAlt || dish.name} fill priority={priority || !compact} sizes={featured ? "(min-width: 768px) 50vw, 100vw" : "(min-width: 1024px) 33vw, 100vw"} className="dish-card-image object-cover" />
          <div className="absolute inset-0 bg-gradient-to-t from-kiln-black/48 via-transparent to-transparent" />
          <div className="absolute left-3 top-3 flex gap-2">
            {dish.hit || dish.isHit ? <span className="dish-badge dish-badge-hot">Хит</span> : null}
            {dish.new || dish.isNew ? <span className="dish-badge dish-badge-new">Новинка</span> : null}
          </div>
        </div>
      ) : null}
      {compact ? (
        <>
          <button type="button" className="dish-compact-thumb" onClick={() => setPreviewOpen(true)} aria-label={`Предпросмотр блюда ${dish.name}`}>
            <Image src={dish.image} alt="" fill sizes="72px" className="dish-card-image object-cover" />
            {dish.hit || dish.isHit ? <span className="dish-compact-hit" aria-label="Хит">Хит</span> : null}
          </button>
          <div className="min-w-0 self-start">
            <h3 className="line-clamp-2 text-sm leading-snug">{dish.name}</h3>
            <span className="mt-1 block text-xs text-kiln-milk/52">{dish.weight}</span>
          </div>
          <strong className="whitespace-nowrap text-sm text-kiln-flame">{formatPrice(dish.price)}</strong>
          <div className="dish-compact-actions">
            {adminMode ? <AdminDishEditor dish={dish} /> : null}
            {dish.showDetails !== false ? <button type="button" className="icon-button" onClick={() => setPreviewOpen(true)} aria-label={`Предпросмотр блюда ${dish.name}`} data-tooltip={previewOpen ? undefined : "Подробнее"}>
              <Eye size={17} />
            </button> : null}
            {!showOrderActions || !ordersEnabled ? null : canOrder ? (
              <button type="button" className="icon-button icon-button-primary" onClick={() => addItem(dish.id)} aria-label={`Добавить ${dish.name} в корзину`} data-tooltip="В корзину">
                <Plus size={17} />
              </button>
            ) : (
              <span className="icon-button cursor-not-allowed text-kiln-milk/40" aria-label="Недоступно для доставки" data-tooltip="Только в ресторане"><Flame size={15} /></span>
            )}
          </div>
        </>
      ) : (
      <div className={`grid gap-3 ${featured ? "p-6 md:p-8" : "p-4"}`}>
        <div className="flex items-start justify-between gap-3">
          <h3 className={featured ? "text-3xl" : "text-lg"}>{dish.name}</h3>
          <strong className="whitespace-nowrap text-kiln-flame">{formatPrice(dish.price)}</strong>
        </div>
        <p className={`${featured ? "text-base" : "min-h-12 text-sm"} text-kiln-milk/72`}>{dish.shortDescription}</p>
        <div className="flex flex-wrap items-center gap-2 text-xs text-kiln-milk/62">
          <span className="dish-meta">{dish.weight}</span>
          {(dish.tags || []).slice(0, 2).map((tag) => <span key={tag} className="dish-meta">{tag}</span>)}
          {dish.spicy || dish.isSpicy ? <span>Острое</span> : null}
          {dish.vegetarian || dish.isVegetarian ? <span>Вегетарианское</span> : null}
          {dish.alcohol ? <span>Только в ресторане</span> : null}
        </div>
        {dish.temporarilyUnavailable ? <p className="text-sm text-kiln-flame">{dish.unavailableText}</p> : dish.stockLeft !== null && dish.stockLeft !== undefined ? <p className="text-sm text-kiln-flame">Осталось: {dish.stockLeft}</p> : null}
        <div className="mt-auto flex items-center justify-end gap-2 border-t border-white/8 pt-3">
          {adminMode ? <AdminDishEditor dish={dish} /> : null}
          {dish.showDetails !== false ? <button type="button" className="icon-button" onClick={() => setPreviewOpen(true)} aria-label={`Предпросмотр блюда ${dish.name}`} data-tooltip={previewOpen ? undefined : "Подробнее"}>
            <Eye size={19} />
          </button> : null}
          {!showOrderActions || !ordersEnabled ? null : canOrder ? (
            <button type="button" className="icon-button icon-button-primary" onClick={() => addItem(dish.id)} aria-label={`Добавить ${dish.name} в корзину`} data-tooltip="В корзину">
              <Plus size={18} />
            </button>
          ) : (
            <span className="icon-button cursor-not-allowed text-kiln-milk/40" aria-label="Недоступно для доставки" data-tooltip="Только в ресторане">
              <Flame size={16} />
            </span>
          )}
        </div>
      </div>
      )}
    </article>
    {previewOpen ? <DishPreviewModal dish={dish} onClose={() => setPreviewOpen(false)} /> : null}
    </>
  );
}