"use client";

import Image from "next/image";
import { Flame, Leaf, Minus, Plus, ShoppingBag, X } from "lucide-react";
import { useEffect, useRef, useState } from "react";
import type { Dish } from "@/lib/types";
import { formatPrice } from "@/lib/cart";
import { useCart } from "./cart-provider";

export function DishPreviewModal({ dish, onClose }: { dish: Dish; onClose: () => void }) {
  const { addItem, ordersEnabled } = useCart();
  const [quantity, setQuantity] = useState(1);
  const closeRef = useRef<HTMLButtonElement>(null);
  const canOrder = ordersEnabled && dish.deliveryAvailable && !dish.temporarilyUnavailable && !dish.alcohol;

  useEffect(() => {
    const previousOverflow = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    closeRef.current?.focus();

    const onKeyDown = (event: KeyboardEvent) => {
      if (event.key === "Escape") onClose();
    };
    window.addEventListener("keydown", onKeyDown);
    return () => {
      document.body.style.overflow = previousOverflow;
      window.removeEventListener("keydown", onKeyDown);
    };
  }, [onClose]);

  const addToCart = () => {
    for (let index = 0; index < quantity; index += 1) addItem(dish.id);
    onClose();
  };

  return (
    <div className="dish-modal" role="presentation" onMouseDown={(event) => event.target === event.currentTarget && onClose()}>
      <section className="dish-modal-panel" role="dialog" aria-modal="true" aria-labelledby={`dish-title-${dish.id}`}>
        <button ref={closeRef} type="button" className="icon-button dish-modal-close" onClick={onClose} aria-label="Закрыть предпросмотр" data-tooltip="Закрыть">
          <X size={21} />
        </button>

        <div className="dish-modal-media">
          <Image src={dish.image} alt={dish.imageAlt || dish.name} fill sizes="(min-width: 768px) 52vw, 100vw" className="object-cover" priority />
          <div className="dish-modal-shade" />
          <div className="absolute left-4 top-4 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>

        <div className="dish-modal-content">
          <div className="dish-modal-heading flex items-start justify-between gap-5">
            <div>
              <p className="eyebrow">Из печи КИЛН</p>
              <h2 id={`dish-title-${dish.id}`} className="mt-2 text-2xl leading-tight sm:text-3xl">{dish.name}</h2>
            </div>
            <strong className="dish-modal-price">{formatPrice(dish.price)}</strong>
          </div>

          <p className="mt-4 leading-relaxed text-kiln-milk/72">{dish.fullDescription || dish.shortDescription}</p>

          <div className="mt-5 flex flex-wrap gap-2 text-sm text-kiln-milk/70">
            <span className="dish-meta">{dish.weight}</span>
            {(dish.tags || []).slice(0, 3).map((tag) => <span key={tag} className="dish-meta">{tag}</span>)}
            {dish.spicy || dish.isSpicy ? <span className="dish-meta"><Flame size={14} /> Острое</span> : null}
            {dish.vegetarian || dish.isVegetarian ? <span className="dish-meta"><Leaf size={14} /> Без мяса</span> : null}
          </div>

          {dish.allergens.length ? <p className="mt-4 text-xs text-kiln-milk/48">Аллергены: {dish.allergens.join(", ")}</p> : null}

          <div className="mt-7 flex items-center gap-3 border-t border-white/10 pt-5">
            {!ordersEnabled ? null : canOrder ? (
              <>
                <div className="quantity-control" aria-label="Количество порций">
                  <button type="button" onClick={() => setQuantity((value) => Math.max(1, value - 1))} aria-label="Уменьшить количество"><Minus size={17} /></button>
                  <span aria-live="polite">{quantity}</span>
                  <button type="button" disabled={dish.stockLeft !== null && dish.stockLeft !== undefined && quantity >= dish.stockLeft} onClick={() => setQuantity((value) => Math.min(dish.stockLeft ?? value + 1, value + 1))} aria-label="Увеличить количество"><Plus size={17} /></button>
                </div>
                <button type="button" className="button button-primary h-12 min-w-0 flex-1 py-0" onClick={addToCart}>
                  <ShoppingBag size={18} /> Добавить
                </button>
              </>
            ) : (
              <div className="flex min-h-12 flex-1 items-center gap-2 text-sm text-kiln-milk/58"><Flame size={18} /> {dish.unavailableText || "Доступно только в ресторане"}</div>
            )}
          </div>
        </div>
      </section>
    </div>
  );
}