'use client';

import { useState } from 'react';
import { useRouter } from 'next/navigation';
import { useTranslations } from 'next-intl';
import { useBookingDraft } from '@/lib/store/booking-draft';
import { bookingApi } from '@/lib/api';
import type { ServiceDetail } from '@/types/api';

export function SaleVariant({ service, locale }: { service: ServiceDetail; locale: string }) {
  const t = useTranslations('service');
  const router = useRouter();
  const bookingPublicId = useBookingDraft((s) => s.bookingPublicId);
  const sale = service.sale;
  const isSoldOut = sale != null && sale.stock_quantity != null && sale.stock_quantity <= 0;
  const [qty, setQty] = useState(1);
  const [adding, setAdding] = useState(false);
  const [addError, setAddError] = useState<string | null>(null);

  const handleAddToCart = async () => {
    if (bookingPublicId) {
      setAdding(true);
      setAddError(null);
      try {
        await bookingApi.addItem(locale, bookingPublicId, {
          service_id: service.public_id,
          quantity: qty,
        });
        router.push(`/${locale}/checkout/items`);
      } catch {
        setAddError(t('add_error'));
        setAdding(false);
      }
    } else {
      router.push(`/${locale}/checkout/event`);
    }
  };

  return (
    <div className="space-y-4">
      <div className="rounded-lg border border-neutral-200 p-4 bg-white">
        <div className="flex flex-wrap items-baseline gap-2">
          <div className="text-2xl font-bold text-primary-700">
            {new Intl.NumberFormat(locale === 'ar' ? 'ar-EG' : 'en-EG', {
              style: 'currency',
              currency: service.currency,
              maximumFractionDigits: 0,
            }).format(service.price_from_minor / 100)}
          </div>
          <span className="text-sm text-neutral-500">{t('per_unit')}</span>
        </div>

        {sale ? (
          <ul className="mt-4 space-y-2 text-sm">
            <li>
              <span className="text-neutral-500">{t('lead_time')}: </span>
              <span className="font-medium">{sale.lead_time_hours}h</span>
            </li>
            {sale.is_perishable ? <li className="text-warning">⚠ {t('perishable')}</li> : null}
            {sale.is_made_to_order ? <li className="text-info">{t('made_to_order')}</li> : null}
            {sale.stock_quantity !== null ? (
              <li>
                <span className="text-neutral-500">{t('stock')}: </span>
                <span className="font-medium">{sale.stock_quantity}</span>
              </li>
            ) : null}
          </ul>
        ) : null}

        {isSoldOut ? (
          <div className="mt-6 rounded-md border border-neutral-200 bg-neutral-50 px-4 py-3 text-center text-sm text-neutral-500">
            {t('out_of_stock')}
          </div>
        ) : (
          <>
            <label className="block mt-6 text-sm">
              <span className="font-medium">{t('quantity')}</span>
              <input
                type="number"
                min={1}
                max={sale?.stock_quantity ?? 99}
                value={qty}
                onChange={(e) => setQty(Math.max(1, Number(e.target.value)))}
                className="mt-1 block w-full rounded-md border border-neutral-300 px-3 py-2 text-sm"
              />
            </label>

            {addError && <p className="mt-2 text-xs text-danger">{addError}</p>}

            <button
              type="button"
              onClick={handleAddToCart}
              disabled={adding}
              className="mt-6 w-full rounded-md bg-primary-600 hover:bg-primary-700 text-white py-3 text-sm font-semibold disabled:opacity-60"
            >
              {adding ? '…' : t('add_to_cart')}
            </button>
          </>
        )}
      </div>
    </div>
  );
}