import { useState } from 'react';
import { useQuery } from '@tanstack/react-query';
import { bsDesdeUsd, formatBs } from '@gustito/shared';
import { supabase } from '../lib/supabase';

type Cliente = {
  id: string;
  telefono: string;
  nombre: string | null;
  pedidos_count: number;
  total_usd: number;
  ultimo_pedido_en: string;
};

const usd = (n: number) => `$${Number(n).toFixed(2)}`;
const fecha = (s: string) => new Date(s).toLocaleDateString('es-VE', { day: '2-digit', month: '2-digit', year: '2-digit' });

export default function Clientes({
  restauranteId,
  acento,
  tasaBs,
}: {
  restauranteId: string;
  acento: string;
  tasaBs: number | null;
}) {
  const [q, setQ] = useState('');
  const bsTxt = (n: number) => (tasaBs && tasaBs > 0 ? formatBs(bsDesdeUsd(n, tasaBs)) : null);

  const { data: clientes } = useQuery({
    queryKey: ['clientes', restauranteId],
    queryFn: async () => {
      const { data } = await supabase
        .from('clientes')
        .select('id,telefono,nombre,pedidos_count,total_usd,ultimo_pedido_en')
        .eq('restaurante_id', restauranteId)
        .order('pedidos_count', { ascending: false })
        .limit(500);
      return (data ?? []) as unknown as Cliente[];
    },
  });

  const todos = clientes ?? [];
  const lista = todos.filter((c) => {
    if (!q.trim()) return true;
    const t = q.toLowerCase();
    return (c.nombre ?? '').toLowerCase().includes(t) || c.telefono.includes(q.trim());
  });
  const totalPedidos = todos.reduce((s, c) => s + c.pedidos_count, 0);
  const totalVentas = todos.reduce((s, c) => s + Number(c.total_usd), 0);

  return (
    <div className="space-y-5">
      <h1 className="text-xl font-extrabold">Clientes</h1>

      <div className="grid grid-cols-3 gap-2 sm:gap-3">
        <ResumenC label="Clientes" valor={String(todos.length)} color="#FFFFFF" />
        <ResumenC label="Pedidos totales" valor={String(totalPedidos)} color={acento} />
        <ResumenC label="Ventas totales" valor={usd(totalVentas)} bs={bsTxt(totalVentas)} color="#22C55E" />
      </div>

      <input
        className="w-full rounded-xl border border-white/10 bg-superficie-2 px-3.5 py-2.5 text-sm text-white placeholder:text-white/40 outline-none focus:border-white/25"
        placeholder="Buscar por nombre o teléfono"
        value={q}
        onChange={(e) => setQ(e.target.value)}
      />

      {todos.length === 0 ? (
        <p className="rounded-2xl border border-dashed border-white/15 bg-superficie p-6 text-center text-sm text-niebla">
          Aún no hay clientes. Aparecen solos cuando alguien hace un pedido.
        </p>
      ) : lista.length === 0 ? (
        <p className="p-4 text-center text-sm text-niebla">Sin resultados para "{q}".</p>
      ) : (
        <div className="divide-y divide-white/10 overflow-hidden rounded-2xl bg-superficie ring-1 ring-white/10">
          {lista.map((c) => (
            <div key={c.id} className="flex items-center justify-between gap-3 px-4 py-3">
              <div className="min-w-0">
                <p className="truncate font-semibold">{c.nombre || 'Sin nombre'}</p>
                <p className="text-xs text-niebla">
                  {c.telefono} · último pedido {fecha(c.ultimo_pedido_en)}
                </p>
              </div>
              <div className="shrink-0 text-right">
                <p className="text-sm font-bold" style={{ color: acento }}>
                  {c.pedidos_count} pedido{c.pedidos_count === 1 ? '' : 's'}
                </p>
                <p className="text-xs font-semibold text-green-400">{usd(Number(c.total_usd))}</p>
                {bsTxt(Number(c.total_usd)) && <p className="text-[10px] text-niebla">{bsTxt(Number(c.total_usd))}</p>}
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

function ResumenC({ label, valor, bs, color }: { label: string; valor: string; bs?: string | null; color: string }) {
  return (
    <div className="rounded-2xl bg-superficie p-3 text-center ring-1 ring-white/10 sm:p-4">
      <p className="text-xs font-semibold uppercase tracking-wide text-niebla">{label}</p>
      <p className="mt-1 text-xl font-black tabular-nums sm:text-2xl" style={{ color }}>
        {valor}
      </p>
      {bs && <p className="mt-0.5 text-[11px] font-semibold tabular-nums text-niebla">{bs}</p>}
    </div>
  );
}
