"use client";

import Image from "next/image";
import Link from "next/link";
import { useEffect, useMemo, useState } from "react";
import { Minus, Plus, Trash2 } from "lucide-react";
import { Button } from "@/components/ui/button";
import { EmptyState } from "@/components/ui/section";
import { formatCurrency } from "@/lib/utils";
import { CART_KEY, type CartItem } from "@/app/(store)/product/[slug]/add-to-cart-button";

export function CartClient() {
  const [items, setItems] = useState<CartItem[]>([]);
  const [ready, setReady] = useState(false);

  function readCart() {
    try {
      const raw = localStorage.getItem(CART_KEY);
      setItems(raw ? (JSON.parse(raw) as CartItem[]) : []);
    } catch {
      setItems([]);
    } finally {
      setReady(true);
    }
  }

  useEffect(() => {
    readCart();
    const onUpdate = () => readCart();
    window.addEventListener("storage", onUpdate);
    window.addEventListener("305g-cart-updated", onUpdate);
    return () => {
      window.removeEventListener("storage", onUpdate);
      window.removeEventListener("305g-cart-updated", onUpdate);
    };
  }, []);

  function persist(next: CartItem[]) {
    setItems(next);
    localStorage.setItem(CART_KEY, JSON.stringify(next));
    window.dispatchEvent(new Event("305g-cart-updated"));
  }

  function updateQty(id: string, delta: number) {
    const next = items
      .map((item) => (item.id === id ? { ...item, quantity: Math.max(1, item.quantity + delta) } : item))
      .filter((item) => item.quantity > 0);
    persist(next);
  }

  function remove(id: string) {
    persist(items.filter((item) => item.id !== id));
  }

  const total = useMemo(
    () => items.reduce((sum, item) => sum + item.price * item.quantity, 0),
    [items],
  );

  const waText = useMemo(() => {
    if (!items.length) return "Halo 305 Gaming, saya ingin order.";
    const lines = items.map(
      (item) => `- ${item.name} x${item.quantity} (${formatCurrency(item.price * item.quantity)})`,
    );
    return `Halo 305 Gaming, saya ingin order:\n${lines.join("\n")}\n\nTotal: ${formatCurrency(total)}`;
  }, [items, total]);

  if (!ready) {
    return <div className="h-40 animate-pulse rounded-2xl bg-surface" />;
  }

  if (!items.length) {
    return (
      <div className="space-y-4">
        <EmptyState title="Keranjang kosong" description="Jelajahi katalog dan tambahkan produk favorit Anda." />
        <Button href="/products">Belanja sekarang</Button>
      </div>
    );
  }

  return (
    <div className="grid gap-8 lg:grid-cols-[1.4fr_0.8fr]">
      <ul className="space-y-3">
        {items.map((item) => (
          <li
            key={item.id}
            className="flex flex-col gap-4 rounded-2xl border border-border bg-surface p-4 sm:flex-row sm:items-center"
          >
            <div className="relative h-20 w-20 shrink-0 overflow-hidden rounded-xl bg-surface-2">
              {item.thumbnail ? (
                <Image src={item.thumbnail} alt={item.name} fill className="object-cover" sizes="80px" />
              ) : null}
            </div>
            <div className="min-w-0 flex-1">
              <Link href={`/product/${item.slug}`} className="font-semibold hover:text-accent">
                {item.name}
              </Link>
              <p className="mt-1 text-sm text-accent">{formatCurrency(item.price)}</p>
            </div>
            <div className="flex items-center gap-3">
              <div className="inline-flex items-center rounded-xl border border-border">
                <button type="button" className="p-2 text-muted hover:text-text" onClick={() => updateQty(item.id, -1)}>
                  <Minus className="h-4 w-4" />
                </button>
                <span className="min-w-8 text-center text-sm font-semibold">{item.quantity}</span>
                <button type="button" className="p-2 text-muted hover:text-text" onClick={() => updateQty(item.id, 1)}>
                  <Plus className="h-4 w-4" />
                </button>
              </div>
              <button
                type="button"
                aria-label="Hapus"
                className="rounded-xl p-2 text-muted hover:bg-white/5 hover:text-danger"
                onClick={() => remove(item.id)}
              >
                <Trash2 className="h-4 w-4" />
              </button>
            </div>
          </li>
        ))}
      </ul>

      <aside className="h-fit rounded-2xl border border-border bg-surface p-6">
        <p className="text-sm text-muted">Total estimasi</p>
        <p className="mt-2 font-[family-name:var(--font-space)] text-3xl font-bold text-accent">
          {formatCurrency(total)}
        </p>
        <p className="mt-3 text-xs text-muted">Checkout final via WhatsApp untuk konfirmasi stok & pembayaran.</p>
        <Button
          href={`https://wa.me/6281234567890?text=${encodeURIComponent(waText)}`}
          className="mt-6 w-full"
          size="lg"
        >
          Checkout via WhatsApp
        </Button>
        <Button href="/products" variant="ghost" className="mt-2 w-full">
          Lanjut belanja
        </Button>
      </aside>
    </div>
  );
}