'use client';

import React, { useEffect, useState } from 'react';
import { ShoppingCart, Minus, Plus, Trash2 } from 'lucide-react';
import {
  Sheet,
  SheetContent,
  SheetHeader,
  SheetTitle,
  SheetDescription,
  SheetFooter,
} from '@/components/ui/sheet';
import { Button } from '@/components/ui/button';
import { useFoodMartStore } from '@/store/foodmart';

interface CartSidebarProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  onCheckout: () => void;
}

function formatPrice(price: number): string {
  return new Intl.NumberFormat('id-ID').format(price);
}

export default function CartSidebar({ open, onOpenChange, onCheckout }: CartSidebarProps) {
  const cart = useFoodMartStore((s) => s.cart);
  const removeFromCart = useFoodMartStore((s) => s.removeFromCart);
  const updateQuantity = useFoodMartStore((s) => s.updateQuantity);
  const getCartTotal = useFoodMartStore((s) => s.getCartTotal);
  const getCartCount = useFoodMartStore((s) => s.getCartCount);

  useEffect(() => {
    function handleOpenCart() { onOpenChange(true); }
    window.addEventListener('open-cart', handleOpenCart);
    return () => window.removeEventListener('open-cart', handleOpenCart);
  }, [onOpenChange]);

  const total = getCartTotal();
  const count = getCartCount();

  return (
    <Sheet open={open} onOpenChange={onOpenChange}>
      <SheetContent side="right" className="flex w-full flex-col border-[var(--border-hover)] bg-[var(--bg-secondary)] p-0 sm:max-w-md">
        <SheetHeader className="border-b border-[var(--border-default)] px-5 py-4">
          <div className="flex items-center gap-3">
            <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-[var(--accent-100)]">
              <ShoppingCart className="h-5 w-5 text-[var(--accent-500)]" />
            </div>
            <div className="text-left">
              <SheetTitle className="text-[var(--text-primary)]">
                Keranjang <span className="text-[var(--accent-400)]">({count} item)</span>
              </SheetTitle>
              <SheetDescription className="text-[var(--text-tertiary)]">
                {count === 0 ? 'Keranjang kosong' : `${count} menu dalam keranjang`}
              </SheetDescription>
            </div>
          </div>
        </SheetHeader>

        <div className="flex-1 overflow-y-auto p-5">
          {cart.length === 0 ? (
            <div className="flex flex-col items-center justify-center gap-4 py-16 text-center">
              <div className="flex h-20 w-20 items-center justify-center rounded-full bg-[var(--bg-input)]">
                <ShoppingCart className="h-10 w-10 text-[var(--text-quaternary)]" />
              </div>
              <div>
                <p className="text-sm font-medium text-[var(--text-secondary)]">Keranjang Kosong</p>
                <p className="mt-1 text-xs text-[var(--text-tertiary)]">Yuk pesan menu favoritmu!</p>
              </div>
            </div>
          ) : (
            <div className="flex flex-col gap-3">
              {cart.map((item, index) => (
                <div key={`${item.id}-${item.variant}-${item.note}-${index}`}
                  className="flex gap-3 rounded-xl border border-[var(--border-default)] bg-[var(--bg-card)] p-3 transition-colors hover:border-[var(--border-hover)]">
                  <div className="h-16 w-16 shrink-0 overflow-hidden rounded-lg bg-[var(--bg-secondary)]">
                    {item.thumbnail ? (
                      <img src={item.thumbnail} alt={item.name} className="h-full w-full object-cover" />
                    ) : (
                      <div className="flex h-full w-full items-center justify-center text-2xl">🍽️</div>
                    )}
                  </div>
                  <div className="flex min-w-0 flex-1 flex-col justify-between">
                    <div className="flex items-start justify-between gap-2">
                      <div className="min-w-0">
                        <p className="text-sm font-medium text-[var(--text-primary)] truncate">{item.name}</p>
                        {item.variant !== 'Regular' && <p className="text-xs text-[var(--text-tertiary)]">{item.variant}</p>}
                        {item.note && <p className="text-xs text-[var(--accent-400)]/70 truncate">{item.note}</p>}
                      </div>
                      <button onClick={() => removeFromCart(index)}
                        className="shrink-0 rounded-lg p-1.5 text-[var(--text-quaternary)] transition-colors hover:bg-red-500/10 hover:text-red-400">
                        <Trash2 className="h-4 w-4" />
                      </button>
                    </div>
                    <div className="flex items-center justify-between">
                      <span className="text-sm font-bold text-[var(--accent-400)]">Rp {formatPrice(item.price * item.quantity)}</span>
                      <div className="flex items-center gap-2">
                        <button onClick={() => updateQuantity(index, item.quantity - 1)}
                          className="flex h-7 w-7 items-center justify-center rounded-lg border border-[var(--border-hover)] bg-[var(--bg-input)] text-[var(--text-secondary)] transition-colors hover:bg-[var(--bg-hover)] hover:text-[var(--text-primary)]">
                          <Minus className="h-3 w-3" />
                        </button>
                        <span className="min-w-[20px] text-center text-sm font-semibold text-[var(--text-primary)]">{item.quantity}</span>
                        <button onClick={() => updateQuantity(index, item.quantity + 1)}
                          className="flex h-7 w-7 items-center justify-center rounded-lg border border-[var(--accent-200)] bg-[var(--accent-100)] text-[var(--accent-400)] transition-colors hover:bg-[var(--accent-200)]">
                          <Plus className="h-3 w-3" />
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>

        {cart.length > 0 && (
          <SheetFooter className="border-t border-[var(--border-default)] p-5">
            <div className="w-full space-y-4">
              <div className="flex items-center justify-between">
                <span className="text-sm text-[var(--text-secondary)]">Subtotal</span>
                <span className="text-lg font-bold text-[var(--text-primary)]">Rp {formatPrice(total)}</span>
              </div>
              <Button onClick={onCheckout}
                className="w-full rounded-xl bg-gradient-to-r from-[var(--accent-500)] to-[var(--accent-400)] py-6 text-base font-semibold text-white shadow-lg transition-all hover:shadow-xl active:scale-[0.98]">
                <ShoppingCart className="mr-2 h-5 w-5" />
                Checkout
              </Button>
            </div>
          </SheetFooter>
        )}
      </SheetContent>
    </Sheet>
  );
}