'use client';

import { useEffect, useState } from 'react';
import { api } from '@/lib/api-client';

interface PosStore { id: string; name: string; active: boolean }
interface PosTerminal {
  id: string;
  storeId: string;
  name: string;
  bindingCode: string | null;
  boundAt: string | null;
  status: string;
  lastSeenAt: string | null;
  settings?: { touchNavigationEnabled?: boolean; quickProductVariantIds?: Array<string | null> };
}
interface CatalogOption { variantId: string; productId: string; name: string; sku: string; priceCents: number }

export default function PosAdminPage() {
  const [stores, setStores] = useState<PosStore[]>([]);
  const [terminals, setTerminals] = useState<PosTerminal[]>([]);
  const [storeId, setStoreId] = useState('');
  const [name, setName] = useState('');
  const [loading, setLoading] = useState(true);
  const [creating, setCreating] = useState(false);
  const [error, setError] = useState('');
  const [newCode, setNewCode] = useState('');
  const [copied, setCopied] = useState('');
  const [catalogOptions, setCatalogOptions] = useState<CatalogOption[]>([]);
  const [configuring, setConfiguring] = useState<PosTerminal | null>(null);
  const [touchEnabled, setTouchEnabled] = useState(true);
  const [quickSlots, setQuickSlots] = useState<Array<string | null>>([null, null, null, null]);
  const [savingTouch, setSavingTouch] = useState(false);
  const [touchMessage, setTouchMessage] = useState('');

  const load = async () => {
    setLoading(true);
    setError('');
    try {
      const [storeData, terminalData, catalogData] = await Promise.all([
        api.get<{ stores: PosStore[] }>('/api/pos/admin/stores'),
        api.get<{ terminals: PosTerminal[] }>('/api/pos/admin/terminals'),
        api.get<{ items: CatalogOption[] }>('/api/pos/admin/catalog-products'),
      ]);
      setStores(storeData.stores);
      setTerminals(terminalData.terminals);
      setCatalogOptions(catalogData.items);
      setStoreId((current) => current || storeData.stores.find((store) => store.active)?.id || '');
    } catch (err) {
      setError(err instanceof Error ? err.message : 'No se pudo cargar la configuración TPV');
    } finally {
      setLoading(false);
    }
  };

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

  const createTerminal = async (event: React.FormEvent) => {
    event.preventDefault();
    setCreating(true);
    setError('');
    setNewCode('');
    try {
      const terminal = await api.post<PosTerminal>('/api/pos/admin/terminals', { storeId, name: name.trim() });
      setName('');
      setNewCode(terminal.bindingCode ?? '');
      await load();
    } catch (err) {
      setError(err instanceof Error ? err.message : 'No se pudo crear el terminal');
    } finally {
      setCreating(false);
    }
  };

  const openTouchConfig = (terminal: PosTerminal) => {
    setConfiguring(terminal);
    setTouchEnabled(terminal.settings?.touchNavigationEnabled !== false);
    const configured = terminal.settings?.quickProductVariantIds ?? [];
    setQuickSlots([0, 1, 2, 3].map((slot) => configured[slot] ?? null));
    setTouchMessage('');
  };

  const saveTouchConfig = async () => {
    if (!configuring) return;
    setSavingTouch(true);
    setTouchMessage('');
    try {
      await api.patch(`/api/pos/admin/terminals/${configuring.id}/touch-config`, {
        touchNavigationEnabled: touchEnabled,
        quickProductVariantIds: quickSlots,
      });
      setTouchMessage('Configuración táctil guardada');
      await load();
    } catch (err) {
      setTouchMessage(err instanceof Error ? err.message : 'No se pudo guardar');
    } finally {
      setSavingTouch(false);
    }
  };

  const copyCode = async (code: string) => {
    await navigator.clipboard.writeText(code);
    setCopied(code);
    setTimeout(() => setCopied(''), 2000);
  };

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-2xl font-bold text-gray-900">TPV</h1>
        <p className="mt-0.5 text-sm text-gray-500">Configura dispositivos y obtén el código para vincular cada caja.</p>
      </div>

      <div className="grid gap-4 md:grid-cols-2">
        <div className="rounded-xl border border-blue-200 bg-blue-50 p-5 text-sm text-blue-900">
          <h2 className="font-bold">1. Vincular terminal</h2>
          <p className="mt-1">Crea un terminal aquí y escribe su código de 8 caracteres en el navegador del TPV. Esto identifica qué caja física está vendiendo.</p>
        </div>
        <div className="rounded-xl border border-amber-200 bg-amber-50 p-5 text-sm text-amber-900">
          <h2 className="font-bold">2. Abrir sesión de caja</h2>
          <p className="mt-1">Después de vincular, el cajero indica el efectivo inicial en el propio TPV. La sesión representa el turno diario de caja.</p>
        </div>
      </div>

      <form onSubmit={createTerminal} className="rounded-xl border border-gray-200 bg-white p-6">
        <h2 className="mb-4 font-bold text-gray-900">Crear terminal</h2>
        <div className="grid gap-4 md:grid-cols-[1fr_1fr_auto] md:items-end">
          <label className="text-sm font-medium text-gray-700">
            Tienda
            <select value={storeId} onChange={(event) => setStoreId(event.target.value)} required className="mt-1 w-full rounded-xl border border-gray-300 bg-white px-3 py-2.5">
              {stores.filter((store) => store.active).map((store) => <option key={store.id} value={store.id}>{store.name}</option>)}
            </select>
          </label>
          <label className="text-sm font-medium text-gray-700">
            Nombre del terminal
            <input value={name} onChange={(event) => setName(event.target.value)} required maxLength={100} placeholder="Caja principal" className="mt-1 w-full rounded-xl border border-gray-300 px-3 py-2.5" />
          </label>
          <button type="submit" disabled={creating || !storeId || !name.trim()} className="rounded-xl bg-[#2D6A4F] px-5 py-2.5 text-sm font-semibold text-white disabled:opacity-50">
            {creating ? 'Creando…' : 'Crear terminal'}
          </button>
        </div>
        {newCode && <p className="mt-4 rounded-lg bg-green-50 p-3 text-sm text-green-800">Código creado: <strong className="font-mono text-lg tracking-widest">{newCode}</strong></p>}
        {error && <p className="mt-4 text-sm text-red-600">{error}</p>}
      </form>

      <div className="overflow-hidden rounded-xl border border-gray-200 bg-white">
        <div className="border-b border-gray-200 px-6 py-4"><h2 className="font-bold text-gray-900">Terminales</h2></div>
        {loading ? <p className="p-6 text-sm text-gray-500">Cargando…</p> : terminals.length === 0 ? <p className="p-6 text-sm text-gray-500">No hay terminales.</p> : (
          <div className="overflow-x-auto">
            <table className="w-full text-sm">
              <thead className="bg-gray-50 text-left text-xs uppercase text-gray-500"><tr><th className="px-4 py-3">Nombre</th><th className="px-4 py-3">Tienda</th><th className="px-4 py-3">Código</th><th className="px-4 py-3">Estado</th><th className="px-4 py-3">Vinculado</th><th className="px-4 py-3">Interfaz</th></tr></thead>
              <tbody className="divide-y divide-gray-100">
                {terminals.map((terminal) => {
                  const store = stores.find((item) => item.id === terminal.storeId);
                  return <tr key={terminal.id}><td className="px-4 py-3 font-medium">{terminal.name}</td><td className="px-4 py-3">{store?.name ?? terminal.storeId}</td><td className="px-4 py-3"><button type="button" onClick={() => terminal.bindingCode && void copyCode(terminal.bindingCode)} disabled={!terminal.bindingCode} className="rounded-lg bg-gray-100 px-3 py-1 font-mono tracking-wider hover:bg-gray-200 disabled:opacity-40">{copied === terminal.bindingCode ? 'Copiado' : terminal.bindingCode ?? '—'}</button></td><td className="px-4 py-3 capitalize">{terminal.status}</td><td className="px-4 py-3">{terminal.boundAt ? 'Sí' : 'No'}</td><td className="px-4 py-3"><button type="button" onClick={() => openTouchConfig(terminal)} className="rounded-lg border border-[#2D6A4F] px-3 py-1.5 text-xs font-semibold text-[#2D6A4F] hover:bg-green-50">Configurar táctil</button></td></tr>;
                })}
              </tbody>
            </table>
          </div>
        )}
      </div>

      {configuring && (
        <section className="rounded-xl border border-gray-200 bg-white p-6">
          <div className="flex items-start justify-between gap-4">
            <div>
              <h2 className="font-bold text-gray-900">Interfaz táctil · {configuring.name}</h2>
              <p className="mt-1 text-sm text-gray-500">Las categorías y subcategorías se administran en Categorías. Aquí activas su navegación en este terminal y eliges cuatro productos rápidos.</p>
            </div>
            <button type="button" onClick={() => setConfiguring(null)} className="text-gray-400 hover:text-gray-700" aria-label="Cerrar">✕</button>
          </div>
          <label className="mt-5 flex items-center gap-3 rounded-xl bg-gray-50 p-4 text-sm font-medium text-gray-800">
            <input type="checkbox" checked={touchEnabled} onChange={(event) => setTouchEnabled(event.target.checked)} className="h-5 w-5 accent-[#2D6A4F]" />
            Activar botones grandes categoría → subcategoría → producto
          </label>
          <div className="mt-5 grid gap-4 md:grid-cols-2 xl:grid-cols-4">
            {quickSlots.map((variantId, slot) => (
              <label key={slot} className="text-sm font-medium text-gray-700">
                Producto rápido {slot + 1}
                <select value={variantId ?? ''} onChange={(event) => setQuickSlots((current) => current.map((value, index) => index === slot ? event.target.value || null : value))} className="mt-1 w-full rounded-xl border border-gray-300 bg-white px-3 py-2.5">
                  <option value="">Sin asignar</option>
                  {catalogOptions.map((product) => <option key={product.variantId} value={product.variantId}>{product.name} · {product.sku}</option>)}
                </select>
              </label>
            ))}
          </div>
          <div className="mt-5 flex items-center gap-4">
            <button type="button" onClick={() => void saveTouchConfig()} disabled={savingTouch} className="rounded-xl bg-[#2D6A4F] px-5 py-2.5 text-sm font-semibold text-white disabled:opacity-50">{savingTouch ? 'Guardando…' : 'Guardar interfaz táctil'}</button>
            {touchMessage && <p className={`text-sm ${touchMessage.includes('guardada') ? 'text-green-700' : 'text-red-600'}`}>{touchMessage}</p>}
          </div>
        </section>
      )}
    </div>
  );
}