import { useState, type FormEvent } from 'react';
import { Link } from 'react-router-dom';
import { formatUsd, ESTADO_META, type EstadoPedido } from '@gustito/shared';
import { supabase } from '../lib/supabase';

interface PedidoBusqueda {
  pedido_id: string;
  codigo: string;
  restaurante_nombre: string;
  estado: EstadoPedido;
  total_usd: number;
  creado_en: string;
}

export default function Verificar() {
  const [tel, setTel] = useState('');
  const [pedidos, setPedidos] = useState<PedidoBusqueda[] | null>(null);
  const [buscando, setBuscando] = useState(false);
  const [msg, setMsg] = useState<string | null>(null);

  async function buscar(e: FormEvent) {
    e.preventDefault();
    setBuscando(true);
    setMsg(null);
    setPedidos(null);
    const { data, error } = await supabase.rpc('buscar_pedidos', { p_telefono: tel });
    setBuscando(false);
    if (error) {
      setMsg(error.message);
      return;
    }
    const list = (data as unknown as PedidoBusqueda[]) ?? [];
    setPedidos(list);
    if (list.length === 0) setMsg('No encontramos pedidos recientes con ese telefono.');
  }

  return (
    <div className="min-h-full bg-crema p-4">
      <div className="max-w-md mx-auto">
        <h1 className="text-2xl font-extrabold mt-4">Verifica tu pedido</h1>
        <p className="text-sm text-stone-500 mb-4">
          Pon el telefono con el que hiciste el pedido y te mostramos tus pedidos recientes.
        </p>
        <form onSubmit={buscar} className="flex gap-2">
          <input
            className="input flex-1"
            inputMode="tel"
            placeholder="0414-1234567"
            value={tel}
            onChange={(e) => setTel(e.target.value)}
          />
          <button disabled={buscando} className="bg-marca text-marca-contraste font-bold rounded-xl px-4 disabled:opacity-60">
            {buscando ? '...' : 'Buscar'}
          </button>
        </form>

        {msg && <p className="text-sm text-stone-500 mt-3">{msg}</p>}

        <div className="mt-4 space-y-2">
          {pedidos?.map((p) => (
            <div key={p.pedido_id} className="bg-white rounded-2xl p-3 shadow-tarjeta">
              <div className="flex justify-between items-start">
                <div>
                  <p className="font-bold">{p.codigo}</p>
                  <p className="text-xs text-stone-500">{p.restaurante_nombre}</p>
                </div>
                <span
                  className="text-xs font-bold px-2 py-1 rounded-full text-white"
                  style={{ backgroundColor: ESTADO_META[p.estado].color }}
                >
                  {ESTADO_META[p.estado].label}
                </span>
              </div>
              <div className="flex justify-between items-center mt-2">
                <span className="text-sm font-bold">{formatUsd(p.total_usd)}</span>
                <div className="flex gap-4">
                  <Link to={`/pedido/${p.pedido_id}`} className="text-sm font-bold text-marca-oscuro">
                    Seguir
                  </Link>
                  <Link to={`/ticket/${p.pedido_id}`} className="text-sm font-bold text-marca-oscuro">
                    Ticket
                  </Link>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}
