/**
 * @page Compare Page (`app/compare/page.tsx`)
 * @purpose Product specification comparison matrix comparing up to 4 selected products.
 */
'use client';

import { useEffect, useMemo, useState } from 'react';
import Link from 'next/link';
import Image from 'next/image';
import { useCartStore } from '@/store/cartStore';
import { catalogService, ProductResponse } from '@/services/api/catalogService';
import { mapProductCardToProductResponse } from '@/utils/productMapper';
import { formatCatalogPriceLabel, getImageUrl } from '@/lib/utils';
import { ArrowLeftRight, Trash2 } from 'lucide-react';
import { AnnouncementBar } from '@/layout/AnnouncementBar';
import { Header } from '@/layout/Header';
import { Navbar } from '@/layout/Navbar';
import { Footer } from '@/layout/Footer';
import { StickyHeaderSpacer } from '@/components/StickyHeaderSpacer';
import { FloatingButtons } from '@/components/FloatingButtons';
import { CompareProductPicker } from '@/components/compare/CompareProductPicker';
import { COMPARE_LIMIT } from '@/lib/compare';
import {
  buildTypeCompareRows,
  sameTypeCompareList,
  type ProductSpecItem,
} from '@/lib/compareSpecs';

export default function ComparePage() {
  const compareList = useCartStore((state) => state.compareList) || [];
  const toggleCompare = useCartStore((state) => state.toggleCompare);
  const addToCart = useCartStore((state) => state.addToCart);
  const hasHydrated = useCartStore((state) => state._hasHydrated);
  const [ready, setReady] = useState(false);
  const [enriched, setEnriched] = useState<Record<string, ProductResponse>>({});
  const [specMap, setSpecMap] = useState<Record<string, ProductSpecItem[]>>({});

  useEffect(() => {
    if (hasHydrated) {
      const list = useCartStore.getState().compareList;
      const pruned = sameTypeCompareList(list);
      if (pruned.length !== list.length) {
        useCartStore.setState({ compareList: pruned });
      }
      setReady(true);
      return;
    }
    const t = window.setTimeout(() => setReady(true), 250);
    return () => window.clearTimeout(t);
  }, [hasHydrated]);

  const productKey = compareList.map((p) => p.product_id).join('|');

  useEffect(() => {
    let cancelled = false;
    if (compareList.length === 0) {
      setEnriched({});
      setSpecMap({});
      return;
    }

    Promise.all(
      compareList.map(async (product) => {
        if (!product.slug) return null;
        try {
          const data = await catalogService.getProductDetail(product.slug);
          const raw = data?.product || data;
          const full = mapProductCardToProductResponse(raw);
          const specs = Array.isArray(data?.specifications)
            ? data.specifications
                .map((item: { label?: string; value?: string }) => ({
                  label: String(item?.label || '').trim(),
                  value: String(item?.value || '').trim(),
                }))
                .filter((item: ProductSpecItem) => item.label && item.value)
            : [];
          return {
            id: product.product_id,
            product: {
              ...product,
              ...full,
              product_id: product.product_id,
              slug: product.slug || full.slug,
              brand_name: full.brand_name || product.brand_name,
              images: full.images?.length ? full.images : product.images,
              variants: full.variants?.length ? full.variants : product.variants,
            } as ProductResponse,
            specs,
          };
        } catch {
          return null;
        }
      })
    ).then((rows) => {
      if (cancelled) return;
      const nextProducts: Record<string, ProductResponse> = {};
      const nextSpecs: Record<string, ProductSpecItem[]> = {};
      rows.forEach((row) => {
        if (!row) return;
        nextProducts[row.id] = row.product;
        nextSpecs[row.id] = row.specs;
      });
      setEnriched(nextProducts);
      setSpecMap(nextSpecs);
    });

    return () => {
      cancelled = true;
    };
  }, [productKey]);

  const products = useMemo(
    () => compareList.map((p) => enriched[p.product_id] || p),
    [compareList, enriched]
  );
  const specRows = useMemo(
    () => buildTypeCompareRows(products, specMap),
    [products, specMap]
  );

  return (
    <div className="min-h-screen bg-white text-[#1E293B] flex flex-col font-sans">
      <AnnouncementBar />
      <Header />
      <StickyHeaderSpacer />
      <Navbar />

      <main className="flex-grow w-full bg-[#f8f9fb] py-8">
        <div className="max-w-7xl mx-auto px-4">
          {ready && compareList.length < COMPARE_LIMIT ? (
            <div className="flex justify-end mb-4">
              <CompareProductPicker variant="button" />
            </div>
          ) : null}
          {!ready ? (
            <div className="bg-white border border-gray-200 rounded-xl p-8 animate-pulse h-48" />
          ) : compareList.length === 0 ? (
            <div className="bg-white border border-gray-200 rounded-xl p-12 text-center max-w-lg mx-auto">
              <ArrowLeftRight className="w-16 h-16 text-gray-300 mx-auto mb-4 stroke-1" />
              <h2 className="text-lg font-bold text-gray-900">No Products Selected for Comparison</h2>
              <p className="text-xs text-gray-400 mt-1 mb-6">
                Click the compare icon on product cards to compare specifications side-by-side.
              </p>
              <Link
                href="/shop"
                className="bg-primary text-white text-xs font-bold px-6 py-3 rounded-lg hover:brightness-95 transition-colors inline-block"
              >
                Browse Catalog
              </Link>
            </div>
          ) : (
            <div className="bg-white border border-gray-200 rounded-xl overflow-x-auto">
              <table className="w-full text-left text-xs">
                <thead>
                  <tr className="bg-gray-50 border-b border-gray-200 text-gray-900">
                    <th className="p-4 w-44 font-extrabold">Feature</th>
                    {products.map((product) => {
                      const img = getImageUrl(product.images?.[0]?.image_url);
                      return (
                        <th key={product.product_id} className="p-4 min-w-[200px]">
                          <div className="flex flex-col items-center text-center">
                            <div className="relative w-20 h-20 rounded-lg border border-gray-200 overflow-hidden bg-gray-50 mb-2">
                              {img ? (
                                <Image src={img} alt={product.name} fill className="object-contain p-1" unoptimized />
                              ) : null}
                            </div>
                            <Link
                              href={`/products/${product.slug}`}
                              className="font-extrabold text-gray-900 line-clamp-2 hover:text-primary"
                            >
                              {product.name}
                            </Link>
                            <span className="text-xs font-bold text-gray-900 mt-1">
                              {formatCatalogPriceLabel(product)}
                            </span>
                            <button
                              type="button"
                              onClick={() => toggleCompare(product)}
                              className="text-[10px] text-red-500 font-bold hover:underline mt-2 flex items-center gap-1 cursor-pointer"
                            >
                              <Trash2 className="w-3 h-3" /> Remove
                            </button>
                          </div>
                        </th>
                      );
                    })}
                  </tr>
                </thead>
                <tbody className="divide-y divide-gray-100 text-gray-800">
                  <tr>
                    <td className="p-4 font-bold bg-gray-50">Price</td>
                    {products.map((p) => (
                      <td key={p.product_id} className="p-4 text-center font-extrabold">
                        {formatCatalogPriceLabel(p)}
                      </td>
                    ))}
                  </tr>
                  {specRows.map((row) => (
                    <tr key={row.label}>
                      <td className="p-4 font-bold bg-gray-50">{row.label}</td>
                      {row.values.map((value, index) => (
                        <td key={`${products[index]?.product_id}-${row.label}`} className="p-4 text-center text-gray-700">
                          {value.text}
                        </td>
                      ))}
                    </tr>
                  ))}
                  <tr>
                    <td className="p-4 font-bold bg-gray-50">Rating</td>
                    {products.map((p) => (
                      <td key={p.product_id} className="p-4 text-center font-bold text-amber-500">
                        ★ {p.rating || 4.9} / 5.0
                      </td>
                    ))}
                  </tr>
                  <tr>
                    <td className="p-4 font-bold bg-gray-50">Action</td>
                    {products.map((p) => (
                      <td key={p.product_id} className="p-4 text-center">
                        <button
                          type="button"
                          onClick={() => {
                            const variant = p.variants?.[0];
                            if (variant) void addToCart(p, variant, 1);
                          }}
                          className="bg-primary hover:brightness-95 text-white text-[11px] font-bold px-3 py-1.5 rounded-md transition-colors cursor-pointer"
                        >
                          Add to Cart
                        </button>
                      </td>
                    ))}
                  </tr>
                </tbody>
              </table>
            </div>
          )}
        </div>
      </main>

      <Footer />
      <FloatingButtons />
    </div>
  );
}