// ─── Documentos · Proveedores (Directorio) ──────────────────────────────
// ProveedoresScreen + ProveedorDetailScreen: directorio de proveedores.
// Extraído de screens-documentos.jsx (P10, split junto con las otras 5
// listas — ver compartido.jsx). Se queda en `screens/documentos/` (no en
// `screens/directorio/`): la spec de P10 asigna explícitamente "las 6
// listas" a este módulo (Presupuestos/OC/Remitos/Facturas/Recibos +
// Proveedores) y ya reusa dir-kit igual que Entidades/Médicos/Particulares —
// ver ESTRUCTURA.md y el reporte del paquete para la nota de la decisión.
// Expone a window: ProveedoresScreen, ProveedorDetailScreen. Consume
// window.PROVEEDORES/COMPRAS/PAGOS (core/colecciones.js), EntityListScreen/
// useEntityStats (ui/entity-list.jsx), IdDateCell (ui/primitives.jsx),
// formatCuit/formatMoneyShort (dominio/formato.js), DirHeader/DirCard/
// DirFieldGrid/DirRegistros/DirNotas (ui/dir-kit.jsx), _docMoney/
// _docMoneyShort/_docCount (compartido.jsx).
//
// FIX P13 (ítem 17, anti-patrón `|| rows[0]` residual): mismo fix que
// Entidad/Medico/ParticularDetailScreen (screens/directorio/) — guard de
// fetch-and-merge (molde de InventarioDetailScreen, P10) en vez de caer
// silenciosamente a rows[0] si `proveedorId` no está en la ventana hidratada
// (el guard viejo `if (!p) return null` solo cubría colección vacía, no id
// no encontrado con la colección poblada).
const { useState: _useStateProvD, useEffect: _useEffectProvD } = React;

function ProveedoresScreen({ onOpen, onNew }) {
  const rows = window.PROVEEDORES || [];
  const conSaldo = _docCount(rows, (p) => (p.saldoPagar || 0) > 0);
  const totalPagar = rows.reduce((s, p) => s + (p.saldoPagar || 0), 0);
  const rubros = Array.from(new Set(rows.map((p) => p.rubro).filter(Boolean)));

  // v_proveedores_stats: {total, sumSaldo}. "Con saldo" (count) y "Rubros"
  // (distinct) no están en la vista — quedan en el cálculo local (fallback).
  const srvStats = window.useEntityStats('proveedores');
  const kTotal = srvStats ? srvStats.total : rows.length;
  const kSumSaldo = srvStats ? srvStats.sumSaldo : totalPagar;

  return (
    <EntityListScreen
      eyebrow="Directorio · Proveedores"
      title="Proveedores"
      description="Proveedores de insumos e implantes. Referenciados desde Compras y Pagos."
      primaryAction={{ label: 'Nuevo proveedor', icon: IconPlus, onClick: onNew }}
      secondaryAction={{ label: 'Exportar', icon: IconDownload }}
      kpis={[
        { label: 'Proveedores', value: String(kTotal), deltaTone: 'neutral', icon: IconTruck },
        { label: 'Con saldo', value: String(conSaldo), deltaTone: conSaldo > 0 ? 'warn' : 'pos', icon: IconClock },
        { label: 'Saldo a pagar', value: _docMoneyShort(kSumSaldo), deltaTone: 'neutral', icon: IconDollar },
        { label: 'Rubros', value: String(rubros.length), deltaTone: 'neutral', icon: IconPackage },
      ]}
      columns={[
        { key: 'publicId', label: 'ID · Alta', width: 'minmax(150px, 1fr)', render: (p) => <IdDateCell id={p.publicId} date={p.fechaCreacion} /> },
        { key: 'razonSocial', label: 'Razón social', width: 'minmax(190px, 1fr)', render: (p) => (
          <div className="min-w-0">
            <p className="text-[13px] font-bold truncate" style={{ color: 'var(--foreground)' }}>{p.razonSocial}</p>
            <p className="font-mono text-[11px] tabular-nums mt-0.5" style={{ color: 'var(--muted-foreground)' }}>{formatCuit(p.cuit)}</p>
          </div>
        ) },
        { key: 'rubro', label: 'Rubro', width: 'minmax(130px, 1fr)', render: (p) => <span className="text-[12.5px] font-semibold" style={{ color: 'var(--foreground)' }}>{p.rubro || '—'}</span> },
        { key: 'condicionVenta', label: 'Condición', width: 'minmax(120px, 1fr)', render: (p) => <span className="text-[12px]" style={{ color: 'var(--muted-foreground)' }}>{p.condicionVenta}</span> },
        { key: 'saldoPagar', label: 'Saldo a pagar', width: 'minmax(140px, 1fr)', render: (p) => <span className="text-[14px] font-extrabold tabular-nums" style={{ color: (p.saldoPagar || 0) > 0 ? 'var(--danger)' : 'var(--muted-foreground)' }}>{_docMoney(p.saldoPagar || 0)}</span> },
      ]}
      rows={rows}
      collection="proveedores"
      searchPlaceholder="Buscar por razón social, CUIT o rubro…"
      searchFilter={(p, q) => p.razonSocial.toLowerCase().includes(q) || (p.cuit || '').includes(q) || (p.rubro || '').toLowerCase().includes(q)}
      onRowClick={onOpen}
      dateField="fechaCreacion"
      exportFilename="Proveedores"
      exportConfig={[
        { label: 'ID', value: (p) => p.publicId },
        { label: 'Razón social', value: (p) => p.razonSocial },
        { label: 'CUIT', value: (p) => p.cuit || '' },
        { label: 'Rubro', value: (p) => p.rubro || '' },
        { label: 'Condición', value: (p) => p.condicionVenta || '' },
        { label: 'Saldo a pagar', value: (p) => p.saldoPagar || 0 },
      ]}
    />
  );
}

// ─── Detalle ────────────────────────────────────────
// Mismo patrón que Entidades/Médicos/Particulares (screens/directorio/):
// DirHeader + DirCard/DirFieldGrid + Registros asociados + Notas. Sin pill de
// "Estado" ni tarjetas de Contactos/Convenios/Notas propias del proveedor: la
// tabla `proveedores` no tiene esas columnas (M8, BUGS-caza-01-07-2026.md) —
// no se inventan, DirNotas ya cae solo a "Sin notas registradas." cuando
// `p.notas` no existe.
function ProveedorDetailScreen({ proveedorId, onBack, navigator, onEdit }) {
  // Guard fetch-and-merge (ver header) — nunca rows[0].
  const foundLocal = (window.PROVEEDORES || []).find((x) => x.id === proveedorId);
  const [, _setMergeTickProv] = _useStateProvD(0);
  const [notFoundProv, setNotFoundProv] = _useStateProvD(false);
  _useEffectProvD(() => {
    if (foundLocal || !proveedorId) return undefined;
    let cancelled = false;
    fetch(`/api/proveedores/${encodeURIComponent(proveedorId)}`, { credentials: 'same-origin' })
      .then((r) => (r.ok ? r.json() : Promise.reject(r.status)))
      .then((server) => {
        if (cancelled || !server || !server.id) throw new Error('sin id');
        const col = window.PROVEEDORES || (window.PROVEEDORES = []);
        if (!col.some((x) => x.id === server.id)) col.push(server);
        _setMergeTickProv((t) => t + 1);
      })
      .catch((err) => {
        if (cancelled) return;
        console.warn('[ProveedorDetailScreen] fetch-and-merge', proveedorId, err);
        setNotFoundProv(true);
      });
    return () => { cancelled = true; };
  }, [proveedorId, foundLocal]);

  if (!foundLocal) {
    if (notFoundProv) {
      return (
        <div className="space-y-6 pt-2">
          <button onClick={onBack} className="flex items-center gap-2 text-[11px] font-bold uppercase tracking-[0.12em] cursor-pointer" style={{ color: 'var(--muted-foreground)' }}>
            <IconArrowLeft size={13} />Volver a Proveedores
          </button>
          <p className="text-[14px] font-semibold" style={{ color: 'var(--muted-foreground)' }}>No se encontró el proveedor.</p>
        </div>
      );
    }
    return null;
  }
  const p = foundLocal;
  const [exportToast, setExportToast] = _useStateProvD(null);

  // Registros asociados, derivados de las colecciones (no inventados): compras y
  // pagos vinculados por `proveedorId` real (FK que ya embeben /api/compras y
  // /api/pagos, ver src/app/api/compras/route.ts).
  const comprasProv = (window.COMPRAS || []).filter((c) => c.proveedorId === p.id).length;
  const pagosProv = (window.PAGOS || []).filter((pg) => pg.proveedorId === p.id).length;

  // Datos principales
  const datosPrincipales = [
    { label: 'Razón social',  value: p.razonSocial },
    { label: 'CUIT',          value: p.cuit,          mono: true },
    { label: 'Rubro',         value: p.rubro },
    { label: 'Condición IVA', value: p.condicionIva },
    { label: 'Cond. venta',   value: p.condicionVenta },
  ];

  // Ubicación
  const ubicacion = [
    { label: 'Domicilio',  value: p.domicilio },
    { label: 'Localidad',  value: p.localidad },
    { label: 'Provincia',  value: p.provincia },
  ];

  // Contacto
  const contacto = [
    { label: 'Teléfono', value: p.telefono, mono: true },
    { label: 'Email',    value: p.email },
  ];

  return (
    <div className="space-y-7 pt-2">

      {/* Header */}
      <DirHeader
        backLabel="Volver a Proveedores"
        eyebrow="Directorio · Proveedor"
        onBack={onBack}
        title={p.razonSocial}
        subtitle={
          <>
            <span className="font-mono font-bold" style={{ color: 'var(--accent)' }}>{p.publicId}</span>
            {p.rubro && <><span className="mx-1.5 opacity-50">·</span><span>{p.rubro}</span></>}
            <span className="mx-1.5 opacity-50">·</span>
            <span className="font-mono tabular-nums">{formatCuit(p.cuit)}</span>
          </>
        }
        actions={<>
          {/* FIX AUDITORIA-ui-decorativa-05-07-2026.md MEDIA "Exportar de detalle de
              proveedor": wired de verdad (dirExportRegistro, ui/dir-kit.jsx) — antes sin
              onClick. */}
          <button className="btn btn-outline" onClick={() => {
            const res = dirExportRegistro(`Proveedor ${p.publicId}`, [datosPrincipales, ubicacion, contacto]);
            setExportToast(`Exportado · 1 fila${res.format === 'csv' ? ' (CSV)' : ''}`);
            setTimeout(() => setExportToast(null), 3600);
          }}><IconDownload size={15} /><span className="hidden sm:inline">Exportar</span></button>
          <button className="btn btn-primary" onClick={() => onEdit && onEdit()}><IconPencil size={14} /><span className="hidden sm:inline">Editar</span></button>
        </>}
      />

      {/* Datos principales */}
      <DirCard eyebrow="Datos principales">
        <DirFieldGrid fields={datosPrincipales} />
      </DirCard>

      {/* Ubicación */}
      <DirCard eyebrow="Ubicación">
        <DirFieldGrid fields={ubicacion} cols={3} />
      </DirCard>

      {/* Contacto */}
      <DirCard eyebrow="Contacto">
        <DirFieldGrid fields={contacto} cols={3} />
      </DirCard>

      {/* Registros asociados */}
      <div className="space-y-3">
        <p className="text-[11px] font-bold uppercase tracking-[0.2em]" style={{ color: 'var(--accent)' }}>
          Registros asociados
        </p>
        {/* FIX AUDITORIA-ui-decorativa-05-07-2026.md MEDIA "tarjeta stat Pagos navega a
            Finanzas sin filtrar" + "tarjeta Pagos (detalle de proveedor)": antes
            `toPagos()` se llamaba SIN el id (ignoraba cualquier argumento igual) y
            navegaba a Finanzas sin filtro — ahora pasa `p.id` y `toPagos` (core/
            directorio-nav.jsx) arma un prefilter real por `proveedorId`, igual que ya
            hace el hermano `toComprasProveedor`. */}
        <DirRegistros items={[
          { label: 'Compras', value: String(comprasProv), sublabel: comprasProv === 1 ? 'registrada' : 'registradas', icon: <IconShoppingCart size={16} />, onClick: () => navigator && navigator.toComprasProveedor(p.id) },
          { label: 'Pagos',   value: String(pagosProv),   sublabel: formatMoneyShort(p.saldoPagar || 0),              icon: <IconWallet size={16} />,       onClick: () => navigator && navigator.toPagos(p.id) },
        ]} />
      </div>

      {/* Notas */}
      <DirNotas notas={p.notas} />

      <DirToast message={exportToast} />
    </div>
  );
}

Object.assign(window, { ProveedoresScreen, ProveedorDetailScreen });