SKEEN-Proyecto/frontend/src/components/inventario/AlertasPanel.tsx

import type { FC } from 'react';
import { useCallback, useEffect, useState } from 'react';
import { CalendarX, ShoppingCart } from 'lucide-react';
import { Card, Badge, EmptyState, Skeleton, toast } from '../ui';
import { ExportButton } from '../ui/ExportButton';
import { exportToExcel } from '../../lib/exporter';
import { odooApi, type CaducidadRow, type SugerenciaRow } from '../../services/odoo';
import type { BadgeVariant } from '../ui/Badge';

const fmtMoney = (n: number) =>
  (n || 0).toLocaleString('es-MX', { style: 'currency', currency: 'MXN', maximumFractionDigits: 2 });

const caducidadBadge = (row: CaducidadRow): { variant: BadgeVariant; label: string } => {
  if (row.vencido) return { variant: 'danger', label: `Vencido hace ${Math.abs(row.dias_restantes)} días` };
  if (row.dias_restantes <= 30) return { variant: 'warning', label: `${row.dias_restantes} días` };
  return { variant: 'info', label: `${row.dias_restantes} días` };
};

const AlertasPanel: FC = () => {
  const [caducidades, setCaducidades] = useState<CaducidadRow[]>([]);
  const [sugerencia, setSugerencia] = useState<SugerenciaRow[]>([]);
  const [totalSugerencia, setTotalSugerencia] = useState({ items: 0, costo_total: 0 });
  const [loading, setLoading] = useState(true);
  const [exporting, setExporting] = useState(false);

  const load = useCallback(async () => {
    try {
      setLoading(true);
      const res = await odooApi.getInventarioAlertas();
      if (res.status === 'success') {
        setCaducidades(res.caducidades);
        setSugerencia(res.sugerencia_compra);
        setTotalSugerencia(res.sugerencia_total);
      }
    } catch (err) {
      toast.error('Error al cargar alertas');
      console.error(err);
    } finally {
      setLoading(false);
    }
  }, []);

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

  const exportar = async () => {
    try {
      setExporting(true);
      await exportToExcel({
        filename: `sugerencia-compra-${new Date().toISOString().split('T')[0]}`,
        sheetName: 'Sugerencia de compra',
        title: 'Sugerencia de compra — inventario SKEEN',
        subtitle: `${totalSugerencia.items} artículos bajo mínimo · costo estimado ${fmtMoney(totalSugerencia.costo_total)}`,
        columns: [
          { header: 'Artículo', key: 'name' },
          { header: 'Categoría', key: 'category' },
          { header: 'Unidad', key: 'unit' },
          { header: 'Existencia', key: 'qty', format: 'number' },
          { header: 'Mínimo', key: 'qty_min', format: 'number' },
          { header: 'Óptimo', key: 'qty_optimal', format: 'number' },
          { header: 'Sugerido', key: 'sugerido', format: 'number' },
          { header: 'Costo estimado', key: 'costo_estimado', format: 'currency' },
        ],
        rows: sugerencia.map((s) => ({ ...s })),
        totals: { name: '', costo_estimado: totalSugerencia.costo_total },
      });
      toast.success('Excel descargado');
    } catch (err) {
      toast.error('Error al exportar');
      console.error(err);
    } finally {
      setExporting(false);
    }
  };

  return (
    <div className="space-y-4">
      {/* Caducidades */}
      <Card>
        <Card.Body>
          <h3 className="font-heading text-xl text-theme-heading mb-1 flex items-center">
            <CalendarX size={20} className="mr-2" /> Caducidades
          </h3>
          <p className="text-xs text-theme-muted mb-4">Artículos con fecha de caducidad registrada, ordenados por urgencia.</p>
          {loading ? (
            <Skeleton count={4} className="h-10 w-full" />
          ) : caducidades.length === 0 ? (
            <EmptyState title="Sin caducidades" subtitle="Ningún artículo tiene fecha de caducidad registrada." icon={<CalendarX size={28} />} />
          ) : (
            <div className="overflow-x-auto">
              <table className="w-full text-sm">
                <thead className="bg-theme-bg text-theme-muted text-xs uppercase">
                  <tr>
                    <th className="text-left px-4 py-3">Artículo</th>
                    <th className="text-left px-4 py-3 hidden sm:table-cell">Categoría</th>
                    <th className="text-right px-4 py-3">Existencia</th>
                    <th className="text-left px-4 py-3">Caduca</th>
                    <th className="text-left px-4 py-3">Estado</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-theme-border">
                  {caducidades.map((c) => {
                    const b = caducidadBadge(c);
                    return (
                      <tr key={c.id} className="hover:bg-theme-bg">
                        <td className="px-4 py-3 font-medium text-theme-heading">{c.name}</td>
                        <td className="px-4 py-3 text-theme-muted hidden sm:table-cell">{c.category || '-'}</td>
                        <td className="px-4 py-3 text-right text-theme-muted">{c.qty} {c.unit}</td>
                        <td className="px-4 py-3 text-theme-heading">{c.expiry_date}</td>
                        <td className="px-4 py-3"><Badge variant={b.variant}>{b.label}</Badge></td>
                      </tr>
                    );
                  })}
                </tbody>
              </table>
            </div>
          )}
        </Card.Body>
      </Card>

      {/* Sugerencia de compra */}
      <Card>
        <Card.Body>
          <div className="flex items-start justify-between gap-3 mb-1">
            <h3 className="font-heading text-xl text-theme-heading flex items-center">
              <ShoppingCart size={20} className="mr-2" /> Sugerencia de compra
            </h3>
            <ExportButton onClick={exportar} loading={exporting} />
          </div>
          <p className="text-xs text-theme-muted mb-4">
            Artículos bajo su stock mínimo (o sin existencia). Sugerido = óptimo − existencia (o 2× mínimo).
          </p>
          {loading ? (
            <Skeleton count={6} className="h-10 w-full" />
          ) : sugerencia.length === 0 ? (
            <EmptyState title="Sin faltantes" subtitle="Todos los artículos están por encima de su mínimo." icon={<ShoppingCart size={28} />} />
          ) : (
            <>
              <div className="overflow-x-auto">
                <table className="w-full text-sm">
                  <thead className="bg-theme-bg text-theme-muted text-xs uppercase">
                    <tr>
                      <th className="text-left px-4 py-3">Artículo</th>
                      <th className="text-right px-4 py-3">Existencia</th>
                      <th className="text-right px-4 py-3 hidden sm:table-cell">Mínimo</th>
                      <th className="text-right px-4 py-3 hidden md:table-cell">Óptimo</th>
                      <th className="text-right px-4 py-3">Sugerido</th>
                      <th className="text-right px-4 py-3">Costo est.</th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-theme-border">
                    {sugerencia.map((s) => (
                      <tr key={s.id} className="hover:bg-theme-bg">
                        <td className="px-4 py-3 font-medium text-theme-heading">{s.name}</td>
                        <td className="px-4 py-3 text-right text-theme-muted">{s.qty} {s.unit}</td>
                        <td className="px-4 py-3 text-right text-theme-muted hidden sm:table-cell">{s.qty_min || '-'}</td>
                        <td className="px-4 py-3 text-right text-theme-muted hidden md:table-cell">{s.qty_optimal || '-'}</td>
                        <td className="px-4 py-3 text-right font-medium text-theme-heading">+{s.sugerido} {s.unit}</td>
                        <td className="px-4 py-3 text-right text-theme-heading">{fmtMoney(s.costo_estimado)}</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
              <div className="flex justify-end mt-3 pt-3 border-t border-theme-border">
                <p className="text-sm text-theme-muted">
                  Total estimado: <span className="font-semibold text-theme-heading">{fmtMoney(totalSugerencia.costo_total)}</span>
                  {' '}({totalSugerencia.items} artículos)
                </p>
              </div>
            </>
          )}
        </Card.Body>
      </Card>
    </div>
  );
};

export default AlertasPanel;