"use client";

import Link from "next/link";
import { useCart } from "@/context/CartContext";
import { formatPrice, productSizeLabel, seasonLabels, type Product } from "@/types/product";
import { useTelegram } from "@/components/TelegramProvider";

const seasonEmoji: Record<string, string> = {
  summer: "☀️",
  winter: "❄️",
  all_season: "🌦️",
};

export default function ProductCard({ product }: { product: Product }) {
  const { addItem } = useCart();
  const { haptic } = useTelegram();

  const isTire = product.category === "tire";

  return (
    <div className="flex flex-col overflow-hidden rounded-2xl border border-white/10 bg-[var(--tg-surface)]">
      <Link href={`/product/${product.id}`} className="block">
        <div className="flex aspect-[4/3] items-center justify-center bg-gradient-to-br from-[#1b2745] to-[#101a30] text-5xl">
          {isTire ? "🛞" : "⚙️"}
        </div>
      </Link>
      <div className="flex flex-1 flex-col gap-1 p-3">
        <Link href={`/product/${product.id}`} className="block">
          <p className="text-[11px] font-medium uppercase tracking-wide text-[var(--tg-accent)]">
            {product.brand}
          </p>
          <h3 className="line-clamp-2 min-h-[2.5rem] text-sm font-semibold leading-tight text-[var(--tg-text)]">
            {product.model}
          </h3>
          <p className="mt-1 text-xs text-[var(--tg-hint)]">{productSizeLabel(product)}</p>
        </Link>

        <div className="mt-1 flex flex-wrap gap-1">
          {isTire && product.season && (
            <span className="rounded-full bg-white/5 px-2 py-0.5 text-[10px] text-[var(--tg-hint)]">
              {seasonEmoji[product.season]} {seasonLabels[product.season]}
            </span>
          )}
          {isTire && product.spikes && (
            <span className="rounded-full bg-white/5 px-2 py-0.5 text-[10px] text-[var(--tg-hint)]">
              шипы
            </span>
          )}
          {!isTire && product.diskType && (
            <span className="rounded-full bg-white/5 px-2 py-0.5 text-[10px] text-[var(--tg-hint)]">
              {product.diskType}
            </span>
          )}
        </div>

        <div className="mt-auto flex items-end justify-between pt-2">
          <div>
            <p className="text-base font-bold text-[var(--tg-text)]">{formatPrice(product.price)}</p>
            <p className={`text-[11px] ${product.stock > 0 ? "text-[var(--tg-accent-2)]" : "text-rose-400"}`}>
              {product.stock > 0 ? `В наличии: ${product.stock}` : "Под заказ"}
            </p>
          </div>
          <button
            type="button"
            onClick={() => {
              haptic("light");
              addItem({
                productId: product.id,
                name: `${product.brand} ${product.model}`,
                brand: product.brand,
                category: product.category,
                size: productSizeLabel(product),
                price: product.price,
                imageUrl: product.imageUrl,
                stock: product.stock || 50,
              });
            }}
            className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-[var(--tg-accent)] text-lg text-white active:scale-95"
            aria-label="Добавить в корзину"
          >
            +
          </button>
        </div>
      </div>
    </div>
  );
}