'use client';

import { useTranslations } from 'next-intl';
import Image from 'next/image';
import { X, Minus, Plus, Trash2 } from 'lucide-react';
import { useCartStore } from '@/lib/cart-store';
import { Button } from '@/components/ui/button';
import type { Locale } from '@/i18n/config';

export function CartDrawer({ locale }: { locale: Locale }) {
  const t = useTranslations('cart');
  const { items, isOpen, close, removeItem, setQuantity } = useCartStore();

  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 z-50 flex justify-end" role="dialog" aria-modal="true">
      <button
        className="absolute inset-0 bg-graphite-950/40"
        onClick={close}
        aria-label={t('title')}
      />
      <div className="relative flex h-full w-full max-w-sm flex-col bg-paper-50 shadow-xl">
        <div className="flex items-center justify-between border-b border-graphite-800/10 p-4">
          <h2 className="font-display text-lg font-semibold">{t('title')}</h2>
          <button onClick={close} aria-label="Close" className="rounded-full p-2 hover:bg-graphite-900/5">
            <X className="h-5 w-5" />
          </button>
        </div>

        <div className="flex-1 overflow-y-auto p-4">
          {items.length === 0 ? (
            <p className="text-sm text-graphite-900/60">{t('empty')}</p>
          ) : (
            <ul className="space-y-4">
              {items.map((item) => (
                <li key={item.productId} className="flex gap-3 border-b border-graphite-800/10 pb-4">
                  <div className="relative h-16 w-16 flex-shrink-0 overflow-hidden rounded-lg bg-graphite-900/5">
                    {item.image && (
                      <Image src={item.image} alt={item.name} fill className="object-cover" sizes="64px" />
                    )}
                  </div>
                  <div className="flex-1">
                    <p className="text-sm font-medium">{item.name}</p>
                    <p className="text-xs text-graphite-900/50">{item.sku}</p>
                    <div className="mt-2 flex items-center gap-2">
                      <button
                        onClick={() => setQuantity(item.productId, Math.max(1, item.quantity - 1))}
                        className="rounded-full border border-graphite-800/20 p-1"
                        aria-label={t('quantity')}
                      >
                        <Minus className="h-3 w-3" />
                      </button>
                      <span className="w-6 text-center text-sm">{item.quantity}</span>
                      <button
                        onClick={() => setQuantity(item.productId, item.quantity + 1)}
                        className="rounded-full border border-graphite-800/20 p-1"
                        aria-label={t('quantity')}
                      >
                        <Plus className="h-3 w-3" />
                      </button>
                      <button
                        onClick={() => removeItem(item.productId)}
                        className="ms-auto text-graphite-900/40 hover:text-copper-600"
                        aria-label={t('remove')}
                      >
                        <Trash2 className="h-4 w-4" />
                      </button>
                    </div>
                  </div>
                </li>
              ))}
            </ul>
          )}
        </div>

        {items.length > 0 && (
          <div className="border-t border-graphite-800/10 p-4">
            <Button href={`/${locale}/devis`} className="w-full" onClick={close}>
              {t('requestQuote')}
            </Button>
          </div>
        )}
      </div>
    </div>
  );
}