'use client';
import { useState, useEffect, useCallback } from 'react';
import { posApi } from '@/lib/api-client';
import { formatPrice } from '@/lib/money';
import { generateIdempotencyKey } from '@/lib/idempotency';
import DiscountPanel from '@/components/DiscountPanel';

interface CartItem {
  variantId: string;
  productId: string;
  sku: string;
  name: string;
  ean: string | null;
  unitPriceCents: number;
  discountCents: number;
  taxCents: number;
  quantity: number;
  stock: number;
}

interface SearchResult {
  variantId: string; productId: string; name: string; sku: string; ean: string | null;
  stock: number; priceCents: number; category: string | null; brand: string | null;
}

interface Config {
  session: { id: string; storeId: string; status: string } | null;
  terminal: { id: string; name: string };
  store: { id: string; name: string };
  paymentMethods: { id: string; code: string; label: string; kind: string }[];
}

interface Customer {
  id: string;
  email: string;
  firstName?: string;
  lastName?: string;
}

export default function RegisterPage() {
  const [config, setConfig] = useState<Config | null>(null);
  const [configError, setConfigError] = useState('');
  const [needsBinding, setNeedsBinding] = useState(false);
  const [bindingCode, setBindingCode] = useState('');
  const [binding, setBinding] = useState(false);
  const [openingCash, setOpeningCash] = useState('0');
  const [openingSession, setOpeningSession] = useState(false);
  const [sessionError, setSessionError] = useState('');
  const [cart, setCart] = useState<CartItem[]>([]);
  const [search, setSearch] = useState('');
  const [searchResults, setSearchResults] = useState<SearchResult[]>([]);
  const [searching, setSearching] = useState(false);
  const [selectedItem, setSelectedItem] = useState<CartItem | null>(null);
  const [showDiscountPanel, setShowDiscountPanel] = useState(false);
  const [customer, setCustomer] = useState<Customer | null>(null);
  const [showCustomerSearch, setShowCustomerSearch] = useState(false);
  const [customerQuery, setCustomerQuery] = useState('');
  const [customerResults, setCustomerResults] = useState<Customer[]>([]);
  const [processing, setProcessing] = useState(false);
  const [lastSale, setLastSale] = useState<{ orderId: string; totalCents: number } | null>(null);
  const [error, setError] = useState('');

  const loadConfig = useCallback(async () => {
    setConfigError('');
    try {
      setConfig(await posApi.config<Config>());
      setNeedsBinding(false);
    } catch (err: unknown) {
      const apiError = err as { code?: string; message?: string };
      setConfig(null);
      setNeedsBinding(apiError.code === 'MISSING_TERMINAL_ID');
      setConfigError(apiError.message ?? 'No se pudo cargar la configuración del TPV');
    }
  }, []);

  useEffect(() => {
    void loadConfig();
  }, [loadConfig]);

  const bindTerminal = async (event: React.FormEvent) => {
    event.preventDefault();
    setBinding(true);
    setConfigError('');
    try {
      await posApi.bind(bindingCode.trim().toUpperCase());
      setBindingCode('');
      await loadConfig();
    } catch (err: unknown) {
      setConfigError(err instanceof Error ? err.message : 'No se pudo vincular el terminal');
    } finally {
      setBinding(false);
    }
  };

  const openCashSession = async (event: React.FormEvent) => {
    event.preventDefault();
    const amount = Number(openingCash.replace(',', '.'));
    if (!Number.isFinite(amount) || amount < 0) {
      setSessionError('Introduce un importe válido');
      return;
    }
    setOpeningSession(true);
    setSessionError('');
    try {
      await posApi.openSession(Math.round(amount * 100));
      await loadConfig();
    } catch (err) {
      setSessionError(err instanceof Error ? err.message : 'No se pudo abrir la caja');
    } finally {
      setOpeningSession(false);
    }
  };

  const doSearch = useCallback(async (q: string) => {
    if (q.trim().length < 2) { setSearchResults([]); return; }
    setSearching(true);
    try {
      const res = await posApi.searchProducts(q, config?.session?.storeId) as { items: SearchResult[] };
      setSearchResults(res.items ?? []);
    } catch { setSearchResults([]); }
    finally { setSearching(false); }
  }, [config]);

  useEffect(() => {
    const t = setTimeout(() => doSearch(search), 300);
    return () => clearTimeout(t);
  }, [search, doSearch]);

  const addToCart = (product: SearchResult) => {
    const existing = cart.find(i => i.variantId === product.variantId);
    if (existing) {
      setCart(cart.map(i => i.variantId === product.variantId ? { ...i, quantity: i.quantity + 1 } : i));
    } else {
      setCart([...cart, {
        variantId: product.variantId, productId: product.productId, sku: product.sku,
        name: product.name, ean: product.ean, unitPriceCents: product.priceCents,
        discountCents: 0, taxCents: 0, quantity: 1, stock: product.stock,
      }]);
    }
    setSearch('');
    setSearchResults([]);
  };

  const removeFromCart = (variantId: string) => {
    setCart(cart.filter(i => i.variantId !== variantId));
  };

  const updateQuantity = (variantId: string, quantity: number) => {
    if (quantity <= 0) { removeFromCart(variantId); return; }
    setCart(cart.map(i => i.variantId === variantId ? { ...i, quantity } : i));
  };

  const subtotal = cart.reduce((s, i) => s + (i.unitPriceCents - i.discountCents) * i.quantity, 0);
  const tax = cart.reduce((s, i) => s + i.taxCents * i.quantity, 0);
  const discount = cart.reduce((s, i) => s + i.discountCents * i.quantity, 0);
  const total = subtotal + tax;

  const handleApplyDiscount = (variantId: string, discountCents: number) => {
    setCart(cart.map(i => i.variantId === variantId ? { ...i, discountCents } : i));
  };

  const handleCustomerSearch = async (q: string) => {
    setCustomerQuery(q);
    if (q.trim().length < 2) { setCustomerResults([]); return; }
    try {
      const res = await fetch(`/api/pos/customers/search?q=${encodeURIComponent(q)}`, { credentials: 'include' });
      if (res.ok) {
        const data = await res.json() as { items: Customer[] };
        setCustomerResults(data.items ?? []);
      }
    } catch { setCustomerResults([]); }
  };

  const completeSale = async (kind: 'cash' | 'card') => {
    if (!config?.session) { setError('No hay sesión abierta'); return; }
    if (cart.length === 0) { setError('Carrito vacío'); return; }
    setProcessing(true);
    setError('');
    try {
      const result = await fetch('/api/pos/sales', {
        method: 'POST',
        credentials: 'include',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          idempotencyKey: generateIdempotencyKey(),
          cashSessionId: config.session.id,
          terminalId: config.terminal.id,
          items: cart.map(i => ({ variantId: i.variantId, productId: i.productId, sku: i.sku, ean: i.ean, name: i.name, unitPriceCents: i.unitPriceCents, discountCents: i.discountCents, taxCents: i.taxCents, quantity: i.quantity })),
          payments: [{ kind, amountCents: total }],
          customerId: customer?.id,
        }),
      });
      if (!result.ok) {
        const err = await result.json() as { message?: string };
        throw new Error((err as { message?: string }).message ?? 'Sale failed');
      }
      const data = await result.json() as { orderId: string; totalCents: number };
      setLastSale({ orderId: data.orderId, totalCents: data.totalCents });
      setCart([]);
      setCustomer(null);
      setTimeout(() => setLastSale(null), 5000);
    } catch (err: unknown) {
      setError(err instanceof Error ? err.message : 'Error');
    } finally {
      setProcessing(false);
    }
  };

  if (!config && needsBinding) {
    return (
      <div className="flex min-h-screen items-center justify-center bg-gray-100 p-6">
        <form onSubmit={bindTerminal} className="w-full max-w-sm space-y-4 rounded-2xl bg-white p-8 shadow-lg">
          <div>
            <h1 className="text-2xl font-bold text-gray-900">Vincular terminal</h1>
            <p className="mt-1 text-sm text-gray-500">Introduce el código de 8 caracteres generado en administración.</p>
          </div>
          <input
            value={bindingCode}
            onChange={(event) => setBindingCode(event.target.value.toUpperCase())}
            minLength={8}
            maxLength={8}
            autoComplete="off"
            className="w-full rounded-xl border border-gray-300 px-4 py-3 text-center font-mono text-xl tracking-widest outline-none focus:ring-2 focus:ring-[#2D6A4F]"
            placeholder="AB12CD34"
            required
            autoFocus
          />
          {configError && <p className="text-sm text-red-600">{configError}</p>}
          <button
            type="submit"
            disabled={binding || bindingCode.trim().length !== 8}
            className="w-full rounded-xl bg-[#2D6A4F] py-2.5 font-semibold text-white transition-colors hover:bg-[#1B4332] disabled:opacity-50"
          >
            {binding ? 'Vinculando…' : 'Vincular TPV'}
          </button>
        </form>
      </div>
    );
  }

  if (!config) {
    return (
      <div className="flex min-h-screen flex-col items-center justify-center gap-3 text-gray-500">
        <p>{configError || 'Cargando TPV…'}</p>
        {configError && (
          <button onClick={() => void loadConfig()} className="text-sm font-medium text-[#2D6A4F] hover:underline">
            Reintentar
          </button>
        )}
      </div>
    );
  }

  if (config.session?.status !== 'OPEN') {
    return (
      <div className="flex min-h-screen items-center justify-center bg-gray-100 p-6">
        <form onSubmit={openCashSession} className="w-full max-w-md space-y-5 rounded-2xl bg-white p-8 shadow-lg">
          <div>
            <p className="text-sm font-medium text-[#2D6A4F]">{config.store.name} · {config.terminal.name}</p>
            <h1 className="mt-1 text-3xl font-bold text-gray-900">Abrir sesión de caja</h1>
            <p className="mt-2 text-sm text-gray-500">Indica el efectivo disponible al comenzar el turno. Puedes usar 0 si la caja empieza vacía.</p>
          </div>
          <label className="block text-sm font-medium text-gray-700">
            Efectivo inicial (€)
            <input
              type="number"
              min="0"
              step="0.01"
              value={openingCash}
              onChange={(event) => setOpeningCash(event.target.value)}
              className="mt-1 w-full rounded-xl border border-gray-300 px-4 py-3 text-xl outline-none focus:ring-2 focus:ring-[#2D6A4F]"
              required
              autoFocus
            />
          </label>
          {sessionError && <p className="text-sm text-red-600">{sessionError}</p>}
          <button type="submit" disabled={openingSession} className="w-full rounded-xl bg-[#2D6A4F] py-3 font-semibold text-white hover:bg-[#1B4332] disabled:opacity-50">
            {openingSession ? 'Abriendo…' : 'Abrir caja y comenzar'}
          </button>
          <p className="text-xs text-gray-400">Una sesión de caja representa el turno diario y registra ventas, efectivo esperado y cierre.</p>
        </form>
      </div>
    );
  }

  return (
    <div className="flex h-screen" style={{ '--color-primary': '#2D6A4F' } as React.CSSProperties}>
      {/* Left: product search */}
      <div className="flex-1 flex flex-col p-4 border-r overflow-hidden">
        <div className="mb-3">
          <div className="flex items-center gap-2 mb-2">
            <span className="text-sm font-bold" style={{ color: 'var(--color-primary)' }}>{config.store.name}</span>
            <span className="text-xs bg-green-100 text-green-700 px-2 py-0.5 rounded-full">Caja abierta</span>
          </div>
          <input
            type="text"
            value={search}
            onChange={e => setSearch(e.target.value)}
            placeholder="Buscar producto o escanear EAN…"
            className="w-full px-4 py-3 border-2 border-gray-200 rounded-xl text-lg focus:border-[#2D6A4F] outline-none"
            autoFocus
          />
        </div>

        {searchResults.length > 0 && (
          <div className="flex-1 overflow-y-auto space-y-2">
            {searchResults.map(p => (
              <button
                key={p.variantId}
                onClick={() => addToCart(p)}
                className="w-full text-left bg-white rounded-xl p-3 shadow-sm hover:shadow-md transition-shadow flex justify-between items-center"
              >
                <div>
                  <p className="font-medium">{p.name}</p>
                  <p className="text-xs text-gray-400">{p.sku} {p.ean ? `· ${p.ean}` : ''}</p>
                </div>
                <div className="text-right">
                  <p className="font-bold" style={{ color: 'var(--color-primary)' }}>{formatPrice(p.priceCents)}</p>
                  <p className={`text-xs ${p.stock > 0 ? 'text-green-600' : 'text-red-500'}`}>{p.stock > 0 ? `${p.stock} uds` : 'Sin stock'}</p>
                </div>
              </button>
            ))}
          </div>
        )}

        {searching && <p className="text-center text-gray-400 py-4">Buscando…</p>}
        {search && searchResults.length === 0 && !searching && (
          <p className="text-center text-gray-400 py-4">Sin resultados para &quot;{search}&quot;</p>
        )}
      </div>

      {/* Right: cart */}
      <div className="w-[420px] flex flex-col p-4 bg-gray-50">
        <div className="flex justify-between items-center mb-3">
          <h2 className="text-lg font-bold" style={{ color: 'var(--color-primary)' }}>Carrito</h2>
          {customer ? (
            <span className="text-xs bg-blue-100 text-blue-700 px-2 py-1 rounded-full">
              {customer.firstName} {customer.lastName} ✕
            </span>
          ) : (
            <button onClick={() => setShowCustomerSearch(!showCustomerSearch)} className="text-xs text-blue-600 underline">
              + Asociar cliente
            </button>
          )}
        </div>

        {showCustomerSearch && (
          <div className="mb-3 bg-white rounded-xl p-3 shadow">
            <input
              type="text"
              value={customerQuery}
              onChange={e => handleCustomerSearch(e.target.value)}
              placeholder="Buscar cliente…"
              className="w-full px-3 py-2 border rounded-lg text-sm mb-2"
              autoFocus
            />
            <div className="space-y-1 max-h-32 overflow-y-auto">
              {customerResults.map(c => (
                <button key={c.id} onClick={() => { setCustomer(c); setShowCustomerSearch(false); setCustomerQuery(''); setCustomerResults([]); }}
                  className="w-full text-left px-2 py-1 text-sm hover:bg-blue-50 rounded-lg">
                  {c.email} {c.firstName ? `(${c.firstName} ${c.lastName})` : ''}
                </button>
              ))}
            </div>
          </div>
        )}

        <div className="flex-1 overflow-y-auto space-y-2">
          {cart.map(item => (
            <div key={item.variantId} className="bg-white rounded-xl p-3 shadow-sm">
              <div className="flex justify-between items-start">
                <div className="flex-1">
                  <p className="font-medium text-sm">{item.name}</p>
                  <p className="text-xs text-gray-400">{formatPrice(item.unitPriceCents - item.discountCents)}/ud</p>
                </div>
                <button onClick={() => removeFromCart(item.variantId)} className="text-gray-300 hover:text-red-500 ml-2">✕</button>
              </div>
              <div className="flex justify-between items-center mt-2">
                <div className="flex items-center gap-2">
                  <button onClick={() => updateQuantity(item.variantId, item.quantity - 1)} className="w-7 h-7 rounded-lg bg-gray-100 font-bold text-sm">−</button>
                  <span className="font-medium w-6 text-center">{item.quantity}</span>
                  <button onClick={() => updateQuantity(item.variantId, item.quantity + 1)} className="w-7 h-7 rounded-lg bg-gray-100 font-bold text-sm">+</button>
                </div>
                <div className="flex gap-2 items-center">
                  {item.discountCents > 0 && (
                    <button onClick={() => { setSelectedItem(item); setShowDiscountPanel(true); }}
                      className="text-xs bg-red-100 text-red-600 px-2 py-0.5 rounded-full">
                      -{formatPrice(item.discountCents)}
                    </button>
                  )}
                  <button onClick={() => { setSelectedItem(item); setShowDiscountPanel(true); }}
                    className="text-xs text-gray-400 underline">Dto.</button>
                  <span className="font-bold text-sm">{formatPrice((item.unitPriceCents - item.discountCents) * item.quantity)}</span>
                </div>
              </div>
            </div>
          ))}
        </div>

        {/* Totals */}
        <div className="mt-3 space-y-1">
          <div className="flex justify-between text-sm"><span>Subtotal</span><span>{formatPrice(subtotal)}</span></div>
          {discount > 0 && <div className="flex justify-between text-sm text-red-500"><span>Descuentos</span><span>−{formatPrice(discount)}</span></div>}
          <div className="flex justify-between text-sm"><span>IVA</span><span>{formatPrice(tax)}</span></div>
          <div className="flex justify-between text-lg font-bold border-t pt-2 mt-2"><span>Total</span><span style={{ color: 'var(--color-primary)' }}>{formatPrice(total)}</span></div>
        </div>

        {error && <p className="text-sm text-red-500 mt-2 text-center">{error}</p>}
        {lastSale && (
          <div className="text-sm text-green-600 mt-2 text-center bg-green-50 rounded-xl p-2">
            Venta #{lastSale.orderId.slice(0, 8)} · {formatPrice(lastSale.totalCents)} ✅
          </div>
        )}

        {/* Payment buttons */}
        <div className="mt-3 grid grid-cols-2 gap-2">
          <button
            onClick={() => completeSale('cash')}
            disabled={processing || cart.length === 0}
            className="py-3 bg-green-600 hover:bg-green-700 disabled:opacity-40 text-white font-bold rounded-xl transition-colors"
          >
            {processing ? '…' : '💵 Efectivo'}
          </button>
          <button
            onClick={() => completeSale('card')}
            disabled={processing || cart.length === 0}
            className="py-3 bg-blue-600 hover:bg-blue-700 disabled:opacity-40 text-white font-bold rounded-xl transition-colors"
          >
            {processing ? '…' : '💳 Tarjeta'}
          </button>
        </div>
      </div>

      {/* Discount panel overlay */}
      {showDiscountPanel && selectedItem && (
        <div className="fixed inset-0 bg-black/30 flex items-center justify-center z-50">
          <DiscountPanel
            unitPriceCents={selectedItem.unitPriceCents}
            onApply={(dc) => { handleApplyDiscount(selectedItem.variantId, dc); setShowDiscountPanel(false); setSelectedItem(null); }}
            onClose={() => { setShowDiscountPanel(false); setSelectedItem(null); }}
          />
        </div>
      )}
    </div>
  );
}
