"use client";

import { useWishlistStore } from "@/lib/wishlist-store";
import { useCartStore } from "@/lib/cart-store";
import { formatPrice, resolveMediaUrl } from "@/lib/utils";
import { useLanguage } from "@/lib/language-context";
import Image from "next/image";
import Link from "next/link";

export default function WishlistPage() {
  const { t } = useLanguage();
  const { items, remove, clear } = useWishlistStore();
  const { addItem } = useCartStore();

  const savedCountText = t.wishlist.savedCount.replace(
    /\{\{\s*count\s*\}\}/g,
    String(items.length),
  );

  if (items.length === 0) {
    return (
      <div className="max-w-2xl mx-auto px-4 py-24 text-center">
        <div className="w-20 h-20 rounded-full bg-gray-100 flex items-center justify-center mx-auto mb-6">
          <svg
            className="w-10 h-10 text-gray-400"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
            strokeWidth={1.25}
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
            />
          </svg>
        </div>
        <h1 className="text-2xl font-bold text-gray-900 mb-2">
          {t.wishlist.empty}
        </h1>
        <p className="text-gray-500 mb-8">{t.wishlist.emptyHint}</p>
        <Link
          href="/products"
          className="btn-primary inline-block px-8 py-3.5 rounded-2xl font-semibold text-sm"
        >
          {t.common.browseProducts}
        </Link>
      </div>
    );
  }

  return (
    <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
      <div className="flex items-center justify-between mb-8">
        <div>
          <h1 className="text-2xl font-bold text-gray-900">
            {t.wishlist.title}
          </h1>
          <p className="text-sm text-gray-400 mt-0.5">{savedCountText}</p>
        </div>
        <button
          onClick={clear}
          className="text-xs text-gray-400 hover:text-red-500 transition-colors font-medium flex items-center gap-1"
        >
          <svg
            className="w-3.5 h-3.5"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
            strokeWidth={2}
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
            />
          </svg>
          {t.wishlist.clearAll}
        </button>
      </div>

      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
        {items.map((item) => (
          <div
            key={item.barcode}
            className="bg-white rounded-2xl border border-gray-100 overflow-hidden shadow-sm hover:shadow-md transition-shadow flex flex-col"
          >
            <Link
              href={`/products/${item.barcode}`}
              className="block aspect-square bg-gray-50 relative overflow-hidden"
            >
              {item.image_url && resolveMediaUrl(item.image_url) ? (
                <Image
                  src={resolveMediaUrl(item.image_url)!}
                  alt={item.name}
                  fill
                  className="object-cover hover:scale-105 transition-transform duration-300"
                  sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
                />
              ) : (
                <div className="w-full h-full flex items-center justify-center bg-gradient-to-br from-gray-100 to-gray-50">
                  <svg
                    className="w-12 h-12 text-gray-300"
                    viewBox="0 0 64 64"
                    fill="none"
                  >
                    <path
                      d="M32 10 C32 10 28 14 28 17 C28 19.2 29.8 21 32 21 C34.2 21 36 19.2 36 17 C36 14 32 10 32 10Z"
                      stroke="currentColor"
                      strokeWidth="1.5"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                    />
                    <path
                      d="M32 21 L32 25 L10 40 C8 41.2 9 44 11.5 44 L52.5 44 C55 44 56 41.2 54 40 L32 25Z"
                      stroke="currentColor"
                      strokeWidth="1.5"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                    />
                  </svg>
                </div>
              )}
            </Link>

            <div className="p-4 flex flex-col gap-2 flex-1">
              <Link
                href={`/products/${item.barcode}`}
                className="text-sm font-semibold text-gray-800 line-clamp-2 hover:underline underline-offset-2 leading-snug"
              >
                {item.name}
              </Link>
              <p
                className="text-base font-bold"
                style={{ color: "var(--color-primary)" }}
              >
                {formatPrice(item.price)}
              </p>

              <div className="flex gap-2 mt-auto pt-2">
                <button
                  onClick={() => {
                    addItem({
                      item_id: 0,
                      barcode: item.barcode,
                      name: item.name,
                      image_url: item.image_url,
                      price: item.price,
                      quantity: 1,
                      available_qty: undefined,
                    });
                    remove(item.barcode);
                  }}
                  className="flex-1 py-2.5 rounded-xl text-xs font-bold text-white shadow-sm transition-opacity hover:opacity-90"
                  style={{ backgroundColor: "var(--color-primary)" }}
                >
                  {t.wishlist.addToCart}
                </button>
                <button
                  onClick={() => remove(item.barcode)}
                  className="w-10 h-10 flex items-center justify-center rounded-xl border border-gray-200 hover:bg-red-50 hover:border-red-200 transition-colors"
                  aria-label={t.wishlist.removeFromWishlist}
                >
                  <svg
                    className="h-4 w-4 text-gray-400 hover:text-red-500"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                    strokeWidth={2}
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
                    />
                  </svg>
                </button>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}