"use client";

import Link from "next/link";
import { useWishlist } from "@/context/WishlistContext";
import { useCart } from "@/context/CartContext";
import { useSettings } from "@/context/SettingsContext";
import { getImageUrl } from "@/lib/api";
import { Trash2, ShoppingCart } from "lucide-react";
import { useTranslation } from "@/lib/i18n";
import Header from "@/components/layout/Header";
import Footer from "@/components/layout/Footer";

export default function WishlistPage() {
  const { items, remove } = useWishlist();
  const { addItem } = useCart();
  const { formatMoney } = useSettings();
  const { t } = useTranslation();

  return (
    <div className="min-h-screen bg-[#fcfcfc] selection:bg-[#2b9d10] selection:text-white">
      <Header />
      <main className="container mx-auto px-4 py-8 md:py-12">
        <div className="flex items-center justify-between mb-8">
          <h1 className="text-2xl md:text-3xl font-black text-zinc-900 tracking-tight">{t("myWishlist")}</h1>
          <Link href="/products" className="text-sm font-bold text-[#2b9d10] hover:underline">{t("continueShopping")}</Link>
        </div>

        {items.length === 0 ? (
          <div className="bg-white border border-zinc-100 rounded-2xl p-8 text-center">
            <p className="text-zinc-500 font-medium mb-4">{t("wishlistEmpty")}</p>
            <Link href="/products" className="inline-flex items-center gap-2 px-5 py-3 bg-[#1a1a1a] text-white rounded-xl font-bold hover:bg-black transition-colors">
              {t("browseProducts")}
            </Link>
          </div>
        ) : (
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {items.map((p) => {
              const image = (p as any).image || (p as any).image_url || (p as any).imageUrl;
              return (
                <div key={p.id} className="bg-white border border-zinc-100 rounded-2xl p-4 flex gap-4 items-center">
                  <div className="w-20 h-20 rounded-xl overflow-hidden bg-zinc-50 flex items-center justify-center">
                    <img src={getImageUrl(image)} alt={p.name} className="w-full h-full object-contain p-2" />
                  </div>
                  <div className="flex-1 min-w-0">
                    <h3 className="font-bold text-zinc-900 truncate">{p.name}</h3>
                    <p className="text-sm text-zinc-500 mt-1">{formatMoney(Number(p.price))}</p>
                    <div className="mt-3 flex items-center gap-2">
                      <button
                        onClick={() => addItem(p)}
                        className="inline-flex items-center gap-2 px-3 py-2 bg-[#1a1a1a] text-white rounded-lg text-sm font-bold hover:bg-black transition-colors"
                      >
                        <ShoppingCart size={16} /> {t("addToCart")}
                      </button>
                      <button
                        onClick={() => remove(p.id)}
                        className="inline-flex items-center gap-2 px-3 py-2 bg-red-50 text-red-600 rounded-lg text-sm font-bold hover:bg-red-100 transition-colors"
                      >
                        <Trash2 size={16} /> {t("remove")}
                      </button>
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        )}
      </main>
      <Footer />
    </div>
  );
}