'use client';

import AppImage from '@/components/ui/AppImage';
import Link from 'next/link';
import { Minus, Plus, Trash2, ShoppingBag, ArrowRight } from 'lucide-react';
import Button from '@/components/ui/Button';
import { useCart } from '@/presentation/hooks/useCart';
import { formatPrice, getFormatLocale } from '@/lib/utils';
import { useTranslation } from '@/hooks/useTranslation';
import { localizeProduct } from '@/lib/product-i18n';

export default function CartPage() {
  const { items, updateQuantity, removeItem, summary } = useCart();
  const { t, locale } = useTranslation();
  const { subtotal: total, deliveryFee, grandTotal } = summary;
  const fmt = (n: number) => formatPrice(n, getFormatLocale(locale));

  if (items.length === 0) {
    return (
      <div className="mx-auto max-w-7xl px-4 py-20 text-center sm:px-6 lg:px-8">
        <div className="mx-auto mb-6 flex h-20 w-20 items-center justify-center rounded-full bg-brand-50">
          <ShoppingBag className="h-10 w-10 text-brand-300" />
        </div>
        <h1 className="mb-2 font-display text-2xl font-bold text-brand-900">
          {t('cart.empty')}
        </h1>
        <p className="mb-8 text-gray-500">{t('cart.emptyHint')}</p>
        <Link href="/shop">
          <Button variant="primary" size="lg">
            {t('cart.startShopping')}
          </Button>
        </Link>
      </div>
    );
  }

  return (
    <div className="bg-gray-50">
      <div className="border-b border-gray-100 bg-white">
        <div className="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8">
          <h1 className="section-heading">{t('cart.title')}</h1>
          <p className="text-gray-500">
            {t('cart.itemsCount', { count: items.length })}
          </p>
        </div>
      </div>

      <div className="mx-auto max-w-7xl px-4 py-10 sm:px-6 lg:px-8">
        <div className="grid gap-8 lg:grid-cols-3">
          <div className="space-y-4 lg:col-span-2">
            {items.map((item) => {
              const localized = localizeProduct(item.product, t);
              return (
                <div key={item.id} className="card-premium flex gap-4 p-4 sm:p-6">
                  <div className="relative h-24 w-24 shrink-0 overflow-hidden rounded-xl sm:h-28 sm:w-28">
                    <AppImage
                      src={item.product.image}
                      alt={localized.name}
                      fill
                      className="object-cover"
                      sizes="(max-width: 640px) 96px, 112px"
                    />
                  </div>

                  <div className="flex flex-1 flex-col">
                    <div className="flex items-start justify-between">
                      <div>
                        <Link
                          href={`/product/${item.product.slug}`}
                          className="font-display text-lg font-semibold text-brand-900 hover:text-brand-700"
                        >
                          {localized.name}
                        </Link>
                        <p className="mt-1 text-xs uppercase tracking-wider text-brand-600">
                          {t(`categories.${item.product.category}.name`)}
                        </p>
                      </div>
                      <button
                        onClick={() => removeItem(item.id)}
                        className="rounded-lg p-2 text-gray-400 transition-colors hover:bg-red-50 hover:text-red-500"
                        aria-label={t('cart.removeItem')}
                      >
                        <Trash2 className="h-4 w-4" />
                      </button>
                    </div>

                    <div className="mt-2 inline-flex items-center gap-1.5 rounded-full bg-gold-50 px-3 py-1">
                      <span className="text-xs font-medium text-gold-700">
                        {t('cart.customization')}
                      </span>
                      <span className="text-xs font-semibold text-gold-800">
                        {item.customizationLabel}
                      </span>
                    </div>

                    <div className="mt-auto flex items-center justify-between pt-3">
                      <div className="flex items-center rounded-lg border border-gray-200">
                        <button
                          onClick={() => updateQuantity(item.id, item.quantity - 1)}
                          className="flex h-9 w-9 items-center justify-center text-gray-500 hover:text-brand-700"
                          aria-label={t('product.decreaseQty')}
                        >
                          <Minus className="h-3 w-3" />
                        </button>
                        <span className="w-8 text-center text-sm font-semibold">
                          {item.quantity}
                        </span>
                        <button
                          onClick={() => updateQuantity(item.id, item.quantity + 1)}
                          className="flex h-9 w-9 items-center justify-center text-gray-500 hover:text-brand-700"
                          aria-label={t('product.increaseQty')}
                        >
                          <Plus className="h-3 w-3" />
                        </button>
                      </div>
                      <span className="text-lg font-bold text-brand-800">
                        {fmt(item.product.price * item.quantity)}
                      </span>
                    </div>
                  </div>
                </div>
              );
            })}
          </div>

          <div>
            <div className="card-premium sticky top-24 p-6">
              <h2 className="mb-4 font-display text-lg font-semibold text-brand-900">
                {t('cart.orderSummary')}
              </h2>

              <div className="space-y-3 border-b border-gray-100 pb-4">
                <div className="flex justify-between text-sm">
                  <span className="text-gray-500">{t('cart.subtotal')}</span>
                  <span className="font-medium">{fmt(total)}</span>
                </div>
                <div className="flex justify-between text-sm">
                  <span className="text-gray-500">{t('cart.delivery')}</span>
                  <span className="font-medium">
                    {deliveryFee === 0 ? (
                      <span className="text-brand-700">{t('cart.free')}</span>
                    ) : (
                      fmt(deliveryFee)
                    )}
                  </span>
                </div>
                {deliveryFee > 0 && (
                  <p className="text-xs text-gray-400">{t('cart.freeDeliveryHint')}</p>
                )}
              </div>

              <div className="flex justify-between py-4">
                <span className="font-semibold text-brand-900">{t('cart.total')}</span>
                <span className="text-xl font-bold text-brand-800">{fmt(grandTotal)}</span>
              </div>

              <Link href="/checkout">
                <Button variant="gold" size="lg" className="w-full">
                  {t('cart.proceedCheckout')}
                  <ArrowRight className="h-4 w-4 rtl:rotate-180" />
                </Button>
              </Link>

              <Link
                href="/shop"
                className="mt-3 block text-center text-sm font-medium text-brand-600 hover:text-brand-800"
              >
                {t('cart.continueShopping')}
              </Link>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}