import { useQuery } from '@tanstack/react-query';
import { formatUsd } from '@gustito/shared';
import { supabase } from '../lib/supabase';

interface EntregaHecha {
  pedido_id: string;
  codigo: string;
  cliente_nombre: string;
  direccion: string | null;
  total_usd: number;
  metodo_pago: string | null;
  tipo_entrega: string | null;
  entregado_en: string;
}

interface Jornada {
  clave: string;
  titulo: string;
  items: EntregaHecha[];
  total: number;
}

function tituloDia(d: Date): string {
  const hoy = new Date();
  const ayer = new Date();
  ayer.setDate(hoy.getDate() - 1);
  const mismo = (a: Date, b: Date) => a.toDateString() === b.toDateString();
  if (mismo(d, hoy)) return 'Hoy';
  if (mismo(d, ayer)) return 'Ayer';
  const t = d.toLocaleDateString('es-VE', { weekday: 'long', day: 'numeric', month: 'long' });
  return t.charAt(0).toUpperCase() + t.slice(1);
}

function agrupar(items: EntregaHecha[]): Jornada[] {
  const mapa = new Map<string, Jornada>();
  for (const it of items) {
    const d = new Date(it.entregado_en);
    const clave = d.toDateString();
    let j = mapa.get(clave);
    if (!j) {
      j = { clave, titulo: tituloDia(d), items: [], total: 0 };
      mapa.set(clave, j);
    }
    j.items.push(it);
    j.total += Number(it.total_usd) || 0;
  }
  return [...mapa.values()];
}

const hora = (s: string) =>
  new Date(s).toLocaleTimeString('es-VE', { hour: '2-digit', minute: '2-digit' });

export default function Historial() {
  const q = useQuery({
    queryKey: ['mis-entregas-realizadas'],
    queryFn: async () => {
      const { data, error } = await supabase.rpc('mis_entregas_realizadas', { p_dias: 60 });
      if (error) throw error;
      return (data as unknown as EntregaHecha[]) ?? [];
    },
  });

  const jornadas = agrupar(q.data ?? []);
  const totalGeneral = (q.data ?? []).length;

  return (
    <section className="space-y-4">
      <div className="flex items-center justify-between">
        <h2 className="text-sm font-bold text-stone-500 uppercase tracking-wide">Mis entregas</h2>
        {totalGeneral > 0 && (
          <span className="text-xs text-stone-400">{totalGeneral} en los ultimos 60 dias</span>
        )}
      </div>

      {q.isLoading && <p className="text-stone-400 text-sm">Cargando...</p>}
      {q.isError && (
        <p className="rounded-xl bg-red-50 px-3 py-2 text-sm text-red-600">
          No se pudo cargar el historial.
        </p>
      )}
      {!q.isLoading && !q.isError && jornadas.length === 0 && (
        <p className="text-stone-400 text-center py-10 text-sm">
          Aun no tienes entregas realizadas. Cuando completes una, queda aqui como respaldo.
        </p>
      )}

      {jornadas.map((j) => (
        <div key={j.clave} className="space-y-2">
          <div className="flex items-center justify-between px-1">
            <p className="font-bold text-stone-800">{j.titulo}</p>
            <p className="text-xs font-semibold text-marca-oscuro">
              {j.items.length} {j.items.length === 1 ? 'entrega' : 'entregas'} · {formatUsd(j.total)}
            </p>
          </div>
          <ul className="space-y-2">
            {j.items.map((it) => (
              <li key={it.pedido_id} className="bg-white rounded-xl border p-3 shadow-tarjeta">
                <div className="flex items-center justify-between gap-2">
                  <p className="font-bold text-sm">{it.codigo}</p>
                  <span className="text-xs text-stone-400 shrink-0">{hora(it.entregado_en)}</span>
                </div>
                <p className="text-sm text-stone-700 truncate">{it.cliente_nombre}</p>
                {it.direccion && <p className="text-xs text-stone-500 truncate">{it.direccion}</p>}
                <div className="mt-1 flex items-center justify-between">
                  <span className="text-xs text-stone-400 capitalize">
                    {it.tipo_entrega ?? 'entrega'}
                    {it.metodo_pago ? ` · ${it.metodo_pago}` : ''}
                  </span>
                  <span className="text-sm font-bold">{formatUsd(it.total_usd)}</span>
                </div>
              </li>
            ))}
          </ul>
        </div>
      ))}
    </section>
  );
}
