// Screens for Datamin POS/DTE Intelligence
// Builds: Login, Executive (3 variants), Compras DTE, Proveedores, Productos, Inventario, Calidad de Datos

const {
  Icon, Logo, ReliabilityBadge, KPICard, Card, Sidebar, Topbar,
  LineChart, HBarChart, VBarChart, Donut, Heatmap, Sparkline, Histogram, ProgressBar,
  AlertList, EmptyState, DataTable, FiltersBar, Tag,
  fmtCLP, fmtNumber, fmtPct,
} = window;

const { useState, useMemo, useEffect } = React;

// ===================== LOGIN =====================
const LoginScreen = ({ lang, onLogin, setLang }) => {
  const t = window.I18N[lang].login;
  const [showPw, setShowPw] = useState(false);
  const [company, setCompany] = useState("pernia");
  const [email, setEmail] = useState("juan.pernia@pernia.cl");
  const [pw, setPw] = useState("•••••••••••");

  return (
    <div className="dm-login">
      <div className="dm-login-left">
        <div className="dm-login-brand">
          <Logo size={40}/>
          <div>
            <strong>Datamin</strong>
            <span>POS/DTE Intelligence</span>
          </div>
        </div>
        <div className="dm-login-hero">
          <h2>Indicadores estratégicos<br/>desde tus datos POS/DTE.</h2>
          <p>Centraliza compras, proveedores, inventario y calidad de catálogo en una sola vista. Pensado para minimarkets y carnicerías que operan con sistemas locales.</p>
          <ul className="dm-login-points">
            <li><span className="dm-dot" style={{background:"#10B981"}}></span>Compras DTE y proveedores: confiables</li>
            <li><span className="dm-dot" style={{background:"#F59E0B"}}></span>Catálogo y caja: parciales — en saneamiento</li>
            <li><span className="dm-dot" style={{background:"#DC2626"}}></span>Ventas: pendiente de poblar datos</li>
          </ul>
        </div>
        <footer className="dm-login-foot">
          Datamin · v2.4.1 · poseasydte central · <span style={{opacity:.6}}>SLA 99.5%</span>
        </footer>
      </div>

      <div className="dm-login-right">
        <div className="dm-login-card">
          <div className="dm-login-card-head">
            <h1>{t.title}</h1>
            <p>{t.subtitle}</p>
          </div>

          <form className="dm-login-form" onSubmit={(e) => { e.preventDefault(); onLogin(); }}>
            <label className="dm-field">
              <span>{t.company}</span>
              <div className="dm-input-wrap">
                <Icon name="grid" size={14}/>
                <select value={company} onChange={e => setCompany(e.target.value)}>
                  {window.COMPANIES.map(c => <option key={c.id} value={c.id}>{c.name} · {c.rut}</option>)}
                </select>
              </div>
            </label>

            <label className="dm-field">
              <span>{t.email}</span>
              <div className="dm-input-wrap">
                <Icon name="user" size={14}/>
                <input type="email" value={email} onChange={e => setEmail(e.target.value)} />
              </div>
            </label>

            <label className="dm-field">
              <span>{t.password}</span>
              <div className="dm-input-wrap">
                <Icon name="lock" size={14}/>
                <input type={showPw ? "text" : "password"} value={pw} onChange={e => setPw(e.target.value)} />
                <button type="button" className="dm-input-trail" onClick={() => setShowPw(s => !s)} title="Mostrar">
                  <Icon name={showPw ? "eyeOff" : "eye"} size={14}/>
                </button>
              </div>
            </label>

            <div className="dm-login-row">
              <label className="dm-check">
                <input type="checkbox" defaultChecked/>
                <span>{t.remember}</span>
              </label>
              <a className="dm-link">{t.forgot}</a>
            </div>

            <button type="submit" className="dm-btn dm-btn-primary dm-btn-lg dm-w-full">
              <Icon name="shield" size={16}/>
              {t.submit}
            </button>

            <div className="dm-secure">
              <Icon name="lock" size={12}/>
              <span>{t.secure}</span>
            </div>
          </form>

          <div className="dm-login-sso">
            <span className="dm-sep"><i></i><b>o</b><i></i></span>
            <div className="dm-sso-row">
              <button className="dm-btn dm-btn-secondary"><Icon name="db" size={14}/> SSO empresa</button>
              <button className="dm-btn dm-btn-secondary"><Icon name="shield" size={14}/> Token 2FA</button>
            </div>
          </div>
        </div>

        <div className="dm-login-lang">
          <Icon name="globe" size={12}/>
          <button className={lang === "es" ? "active" : ""} onClick={() => setLang("es")}>Español (CL)</button>
          <span>·</span>
          <button className={lang === "en" ? "active" : ""} onClick={() => setLang("en")}>English</button>
        </div>
      </div>
    </div>
  );
};

// ===================== EXECUTIVE (3 variants) =====================
const ExecutiveScreen = ({ lang, density, showRel, variant = "topkpis" }) => {
  const months = window.MONTHS;
  const purchasesTotal = window.PURCHASES_MONTHLY.map(m => m.neto + m.iva + m.exento);
  const totalCompras = purchasesTotal[purchasesTotal.length - 1];
  const ivaTotal = window.PURCHASES_MONTHLY[window.PURCHASES_MONTHLY.length-1].iva;
  const facturas = 412;
  const avgFactura = Math.round(totalCompras / facturas);

  const kpis = [
    { label: "Total comprado", value: fmtCLP(totalCompras), sub: "mes actual", delta: "+6.5%", deltaPositive: true, icon: "invoice", emphasis: true, reliability: "reliable" },
    { label: "IVA acumulado", value: fmtCLP(ivaTotal), sub: "F.29", delta: "+5.9%", deltaPositive: true, icon: "shield", reliability: "reliable" },
    { label: "Facturas recibidas", value: fmtNumber(facturas), sub: "DTE 33/34/39/52", delta: "+12", deltaPositive: true, icon: "invoice", reliability: "reliable" },
    { label: "Promedio por factura", value: fmtCLP(avgFactura), sub: "vs $204.180 mes anterior", delta: "−2.1%", deltaPositive: false, icon: "spark", reliability: "reliable" },
    { label: "Proveedores activos", value: "47", sub: "12 estratégicos", delta: "+3", deltaPositive: true, icon: "suppliers", reliability: "reliable" },
    { label: "Alertas críticas", value: "7", sub: "datos a sanear", delta: "−2", deltaPositive: true, icon: "alert", reliability: "partial" },
  ];

  const top5Share = window.SUPPLIERS.slice(0,5).reduce((a,s) => a+s.monto, 0);
  const top10Share = window.SUPPLIERS.slice(0,10).reduce((a,s) => a+s.monto, 0);
  const totalProv = window.SUPPLIERS.reduce((a,s) => a+s.monto, 0);
  const conc5 = (top5Share/totalProv*100);
  const conc10 = (top10Share/totalProv*100);

  const alerts = [
    { sev: "high", title: "Módulo Ventas no confiable", detail: "Cobertura < 10%. No usar para decisiones operacionales.", cta: "Ver" },
    { sev: "high", title: "Inventario requiere validación", detail: "1.842 productos con stock cero — exportación POS sospechosa.", cta: "Revisar" },
    { sev: "med", title: "Cliente genérico domina boletas", detail: "RUT 11.111.111-1 recibe 38% de las boletas.", cta: "Excluir" },
    { sev: "med", title: "1.106 productos sin costo", detail: "Margen real no calculable. Importar costos desde DTE.", cta: "Asistente" },
    { sev: "low", title: "3 cajas abiertas > 24h", detail: "Forzar cierre y revisar con cajero.", cta: "Ver" },
  ];

  // ============ Variant A: KPIs arriba ============
  if (variant === "topkpis") {
    return (
      <div className={`dm-screen dm-density-${density}`}>
        <div className="dm-kpi-grid dm-kpi-grid-6">
          {kpis.map((k, i) => <KPICard key={i} {...k} lang={lang} showRel={showRel}/>)}
        </div>

        <div className="dm-grid dm-grid-2-1">
          <Card title="Evolución mensual de compras" subtitle="Neto + IVA + Exento · últimos 12 meses"
            reliability="reliable" showRel={showRel} lang={lang}>
            <LineChart
              labels={months}
              series={[
                { name: "Total", color: "#0EA5E9", fill: "#0EA5E9", values: window.PURCHASES_MONTHLY.map(m => m.neto + m.iva + m.exento) },
                { name: "Neto", color: "#0B1E3F", values: window.PURCHASES_MONTHLY.map(m => m.neto) },
                { name: "IVA", color: "#94A3B8", values: window.PURCHASES_MONTHLY.map(m => m.iva), dots: false },
              ]}
              height={260}
            />
          </Card>

          <Card title="Alertas críticas" subtitle="Datos no confiables · acción requerida"
            action={<a className="dm-link">Ver todas (7)</a>}>
            <AlertList items={alerts.slice(0,4)}/>
          </Card>
        </div>

        <div className="dm-grid dm-grid-1-1-1">
          <Card title="Top 10 proveedores · monto" reliability="reliable" showRel={showRel} lang={lang}>
            <HBarChart data={window.SUPPLIERS.slice(0,10).map(s => ({label:s.short, sub:s.rut, value:s.monto}))}
              subKey="sub" color="#0EA5E9" format={fmtCLP}/>
          </Card>
          <Card title="Top 10 proveedores · frecuencia" reliability="reliable" showRel={showRel} lang={lang}>
            <HBarChart data={[...window.SUPPLIERS].sort((a,b)=>b.docs-a.docs).slice(0,10).map(s => ({label:s.short, sub:s.freq, value:s.docs}))}
              subKey="sub" color="#0B1E3F" format={(v)=>v + " docs"}/>
          </Card>
          <Card title="Concentración de abastecimiento" subtitle="Riesgo de dependencia">
            <div className="dm-conc">
              <Donut size={180} thickness={26}
                segments={[
                  { value: conc5, color: "#0EA5E9" },
                  { value: conc10 - conc5, color: "#7DD3FC" },
                  { value: 100 - conc10, color: "#E2E8F0" },
                ]}
                centerLabel={fmtPct(conc10, 0)}
                centerSub="Top 10"
              />
              <div className="dm-conc-legend">
                <div><span className="dm-dot" style={{background:"#0EA5E9"}}></span><strong>Top 5</strong> <em>{fmtPct(conc5,1)}</em></div>
                <div><span className="dm-dot" style={{background:"#7DD3FC"}}></span><strong>Top 6-10</strong> <em>{fmtPct(conc10-conc5,1)}</em></div>
                <div><span className="dm-dot" style={{background:"#E2E8F0"}}></span><strong>Resto</strong> <em>{fmtPct(100-conc10,1)}</em></div>
              </div>
              <div className="dm-risk-banner dm-risk-med">
                <Icon name="alert" size={14}/>
                <div>
                  <strong>Riesgo medio.</strong> 5 proveedores concentran el {fmtPct(conc5,0)} del gasto. Considera diversificar carnes y bebidas.
                </div>
              </div>
            </div>
          </Card>
        </div>
      </div>
    );
  }

  // ============ Variant B: Alerts sidebar ============
  if (variant === "alertsidebar") {
    return (
      <div className={`dm-screen dm-density-${density} dm-screen-split`}>
        <div className="dm-screen-main">
          <div className="dm-kpi-grid dm-kpi-grid-3">
            {kpis.slice(0,3).map((k, i) => <KPICard key={i} {...k} size="lg" lang={lang} showRel={showRel}/>)}
          </div>

          <Card title="Evolución mensual de compras" subtitle="Neto · IVA · Exento — apilado"
            reliability="reliable" showRel={showRel} lang={lang}>
            <LineChart
              labels={months}
              series={[
                { name: "Total", color: "#0EA5E9", fill: "#0EA5E9", values: window.PURCHASES_MONTHLY.map(m => m.neto + m.iva + m.exento) },
                { name: "Neto", color: "#0B1E3F", values: window.PURCHASES_MONTHLY.map(m => m.neto) },
              ]}
              height={280}
            />
          </Card>

          <div className="dm-grid dm-grid-1-1">
            <Card title="Top 10 proveedores · monto" reliability="reliable" showRel={showRel} lang={lang}>
              <HBarChart data={window.SUPPLIERS.slice(0,10).map(s => ({label:s.short, sub:s.rut, value:s.monto}))}
                subKey="sub" color="#0EA5E9" format={fmtCLP}/>
            </Card>
            <Card title="Top 10 proveedores · frecuencia" reliability="reliable" showRel={showRel} lang={lang}>
              <HBarChart data={[...window.SUPPLIERS].sort((a,b)=>b.docs-a.docs).slice(0,10).map(s => ({label:s.short, sub:s.freq, value:s.docs}))}
                subKey="sub" color="#0B1E3F" format={(v)=>v+" docs"}/>
            </Card>
          </div>
        </div>

        <aside className="dm-screen-aside">
          <Card title="Estado de la operación" subtitle="Tiempo real" className="dm-card-tight">
            <div className="dm-side-kpis">
              {kpis.slice(3).map((k, i) => (
                <div key={i} className="dm-side-kpi">
                  <div className="dm-side-kpi-l">{k.label}</div>
                  <div className="dm-side-kpi-v">{k.value}</div>
                  <div className="dm-side-kpi-s">{k.sub}</div>
                </div>
              ))}
            </div>
          </Card>

          <Card title="Concentración Top 10" className="dm-card-tight">
            <div className="dm-conc dm-conc-tight">
              <Donut size={140} thickness={20}
                segments={[
                  { value: conc5, color: "#0EA5E9" },
                  { value: conc10 - conc5, color: "#7DD3FC" },
                  { value: 100 - conc10, color: "#E2E8F0" },
                ]}
                centerLabel={fmtPct(conc10, 0)}
                centerSub="Top 10"
              />
              <div className="dm-conc-mini">
                <div><strong>Top 5</strong><em>{fmtPct(conc5,1)}</em></div>
                <div><strong>Top 6-10</strong><em>{fmtPct(conc10-conc5,1)}</em></div>
                <div><strong>Resto</strong><em>{fmtPct(100-conc10,1)}</em></div>
              </div>
            </div>
          </Card>

          <Card title="Alertas críticas" subtitle="7 activas">
            <AlertList items={alerts}/>
          </Card>
        </aside>
      </div>
    );
  }

  // ============ Variant C: Dense / Analyst view ============
  return (
    <div className={`dm-screen dm-density-compact`}>
      <div className="dm-kpi-strip">
        {kpis.map((k, i) => (
          <div key={i} className="dm-kpi-strip-item">
            <div className="dm-kpi-strip-l">
              <Icon name={k.icon} size={12}/>
              <span>{k.label}</span>
              {showRel && <span className={`dm-rel-pip dm-rel-pip-${k.reliability}`}></span>}
            </div>
            <div className="dm-kpi-strip-v">{k.value}</div>
            <div className={`dm-kpi-strip-d ${k.deltaPositive ? "up" : "down"}`}>{k.delta} <Sparkline values={[3,5,4,6,5,8,7,9]} color={k.deltaPositive ? "#10B981" : "#DC2626"} w={48} h={14}/></div>
          </div>
        ))}
      </div>

      <div className="dm-grid dm-grid-3-1">
        <Card title="Evolución mensual de compras" subtitle="Total / Neto / IVA / Exento"
          reliability="reliable" showRel={showRel} lang={lang}>
          <LineChart
            labels={months}
            series={[
              { name: "Total", color: "#0EA5E9", fill: "#0EA5E9", values: window.PURCHASES_MONTHLY.map(m => m.neto + m.iva + m.exento) },
              { name: "Neto", color: "#0B1E3F", values: window.PURCHASES_MONTHLY.map(m => m.neto) },
              { name: "IVA", color: "#F59E0B", values: window.PURCHASES_MONTHLY.map(m => m.iva), dots: false },
              { name: "Exento", color: "#94A3B8", values: window.PURCHASES_MONTHLY.map(m => m.exento), dots: false },
            ]}
            height={220}
          />
        </Card>
        <Card title="Concentración" subtitle="Top 5 / Top 10">
          <div style={{display:"flex", flexDirection:"column", alignItems:"center", gap:8}}>
            <Donut size={140} thickness={20}
              segments={[
                { value: conc5, color: "#0EA5E9" },
                { value: conc10 - conc5, color: "#7DD3FC" },
                { value: 100 - conc10, color: "#E2E8F0" },
              ]}
              centerLabel={fmtPct(conc10, 0)}
              centerSub="Top 10"
            />
            <div className="dm-conc-mini" style={{width:"100%"}}>
              <div><strong>Top 5</strong><em>{fmtPct(conc5,1)}</em></div>
              <div><strong>Top 10</strong><em>{fmtPct(conc10,1)}</em></div>
            </div>
          </div>
        </Card>
      </div>

      <div className="dm-grid dm-grid-1-1-1">
        <Card title="Top proveedores · monto" className="dm-card-tight">
          <HBarChart data={window.SUPPLIERS.slice(0,8).map(s => ({label:s.short, value:s.monto}))}
            color="#0EA5E9" format={fmtCLP}/>
        </Card>
        <Card title="Top proveedores · frecuencia" className="dm-card-tight">
          <HBarChart data={[...window.SUPPLIERS].sort((a,b)=>b.docs-a.docs).slice(0,8).map(s => ({label:s.short, value:s.docs}))}
            color="#0B1E3F" format={(v)=>v + " docs"}/>
        </Card>
        <Card title="Alertas (7)" className="dm-card-tight">
          <AlertList items={alerts}/>
        </Card>
      </div>
    </div>
  );
};

// ===================== COMPRAS DTE =====================
const ComprasScreen = ({ lang, density, showRel }) => {
  const months = window.MONTHS;
  const [tipoFiltro, setTipoFiltro] = useState("todos");
  const [provFiltro, setProvFiltro] = useState("todos");

  const histo = [
    { label: "<200K", count: 32 },
    { label: "200-500K", count: 78 },
    { label: "500K-1M", count: 96 },
    { label: "1-2M", count: 124 },
    { label: "2-5M", count: 58 },
    { label: ">5M", count: 24 },
  ];

  const heatmapRows = window.SUPPLIERS.slice(0,8).map(s => s.short);
  const seedVals = [
    [3.2,3.6,3.1,3.4,4.1,5.0,5.6,4.0,3.8,4.3,4.5,4.2],
    [2.5,2.8,2.4,2.8,3.4,4.0,4.5,3.1,3.0,3.4,3.6,3.3],
    [2.0,2.2,1.9,2.3,2.7,3.2,3.6,2.5,2.4,2.7,2.9,2.7],
    [1.6,1.9,1.5,1.9,2.2,2.6,3.0,2.0,1.9,2.2,2.4,2.2],
    [1.0,1.2,1.0,1.2,1.4,1.7,1.9,1.3,1.2,1.4,1.5,1.4],
    [0.9,1.0,0.8,1.0,1.2,1.4,1.6,1.1,1.0,1.1,1.2,1.1],
    [0.7,0.8,0.7,0.8,1.0,1.2,1.3,0.9,0.8,0.9,1.0,0.9],
    [0.6,0.7,0.6,0.7,0.8,1.0,1.1,0.7,0.7,0.8,0.8,0.8],
  ];

  const filteredInvoices = useMemo(() => {
    return window.INVOICES.filter(inv =>
      (tipoFiltro === "todos" || inv.tipo === tipoFiltro) &&
      (provFiltro === "todos" || inv.rut === provFiltro)
    );
  }, [tipoFiltro, provFiltro]);

  const kpis = [
    { label: "Compras del período", value: fmtCLP(88540000), sub: "12% vs período anterior", delta: "+12.3%", deltaPositive: true, icon: "invoice", reliability:"reliable" },
    { label: "IVA acumulado", value: fmtCLP(13338000), sub: "F.29 mayo", icon: "shield", reliability:"reliable" },
    { label: "Facturas (33)", value: "287", sub: "afectas", icon: "invoice", reliability:"reliable" },
    { label: "Boletas (39)", value: "98", sub: "afectas", icon: "invoice", reliability:"reliable" },
    { label: "Facturas exentas (34)", value: "27", sub: "F.34", icon: "invoice", reliability:"reliable" },
  ];

  return (
    <div className={`dm-screen dm-density-${density}`}>
      <FiltersBar lang={lang} onReset={() => { setTipoFiltro("todos"); setProvFiltro("todos"); }}>
        <div className="dm-mini-field">
          <label>Tipo DTE</label>
          <select value={tipoFiltro} onChange={e => setTipoFiltro(e.target.value)}>
            <option value="todos">Todos</option>
            <option value="33">33 · Factura afecta</option>
            <option value="34">34 · Factura exenta</option>
            <option value="39">39 · Boleta</option>
            <option value="52">52 · Guía despacho</option>
          </select>
        </div>
        <div className="dm-mini-field">
          <label>Proveedor</label>
          <select value={provFiltro} onChange={e => setProvFiltro(e.target.value)}>
            <option value="todos">Todos</option>
            {window.SUPPLIERS.map(s => <option key={s.rut} value={s.rut}>{s.short}</option>)}
          </select>
        </div>
        <div className="dm-mini-field">
          <label>Rango monto</label>
          <select defaultValue="todos">
            <option value="todos">Cualquiera</option>
            <option>&lt; 500K</option>
            <option>500K - 2M</option>
            <option>&gt; 2M</option>
          </select>
        </div>
        <div className="dm-mini-field">
          <label>Afecto/Exento</label>
          <select defaultValue="todos">
            <option>Ambos</option><option>Afecto</option><option>Exento</option>
          </select>
        </div>
      </FiltersBar>

      <div className="dm-kpi-grid dm-kpi-grid-5">
        {kpis.map((k, i) => <KPICard key={i} {...k} lang={lang} showRel={showRel}/>)}
      </div>

      <Card title="Serie mensual: Neto · IVA · Exento" reliability="reliable" showRel={showRel} lang={lang}>
        <LineChart
          labels={months}
          series={[
            { name: "Neto", color: "#0B1E3F", values: window.PURCHASES_MONTHLY.map(m => m.neto) },
            { name: "IVA", color: "#0EA5E9", values: window.PURCHASES_MONTHLY.map(m => m.iva) },
            { name: "Exento", color: "#F97316", values: window.PURCHASES_MONTHLY.map(m => m.exento) },
          ]}
          height={260}
        />
      </Card>

      <div className="dm-grid dm-grid-2-1">
        <Card title="Heatmap proveedor × mes" subtitle="Monto en MM CLP">
          <Heatmap
            rows={heatmapRows}
            cols={months}
            getValue={(r,c) => seedVals[r][c] * 1e6}
            color="#0EA5E9"
          />
        </Card>
        <Card title="Histograma · monto factura" subtitle={`${filteredInvoices.length} en pantalla · 412 total`}>
          <Histogram bins={histo} color="#0EA5E9"/>
          <div className="dm-mini-stats">
            <div><span>Mediana</span><strong>$1.180.400</strong></div>
            <div><span>Promedio</span><strong>$214.890</strong></div>
            <div><span>P95</span><strong>$3.420.000</strong></div>
          </div>
        </Card>
      </div>

      <div className="dm-grid dm-grid-1-1">
        <Card title="Facturas recibidas" subtitle={`${filteredInvoices.length} documentos`}
          reliability="reliable" showRel={showRel} lang={lang}>
          <DataTable
            density={density}
            searchPlaceholder="Buscar folio, RUT, razón social..."
            columns={[
              { key:"folio", header:"Folio", width:100 },
              { key:"emision", header:"Emisión", width:110 },
              { key:"razon", header:"Proveedor", render: r => (
                <div className="dm-cell-stack"><strong>{r.razon}</strong><small>{r.rut}</small></div>
              )},
              { key:"tipo", header:"Tipo", width:80, render: r => <Tag tone={r.tipo === "34" ? "warning" : r.tipo === "39" ? "info" : "neutral"}>{r.tipo}</Tag> },
              { key:"neto", header:"Neto", align:"right", width:110, render: r => <span className="dm-mono">{fmtCLP(r.neto)}</span> },
              { key:"iva", header:"IVA", align:"right", width:100, render: r => <span className="dm-mono">{fmtCLP(r.iva)}</span> },
              { key:"total", header:"Total", align:"right", width:120, render: r => <span className="dm-mono dm-strong">{fmtCLP(r.total)}</span> },
              { key:"venc", header:"Vence", width:110 },
            ]}
            rows={filteredInvoices}
            rowKey="folio"
          />
        </Card>

        <Card title="Productos más comprados" subtitle="Desde líneas DTE"
          reliability="reliable" showRel={showRel} lang={lang}>
          <HBarChart data={window.TOP_PRODUCTS_COMPRA.map(p => ({label: p.desc, sub: p.prov, value: p.monto}))}
            subKey="sub" color="#0EA5E9" format={fmtCLP}/>
        </Card>
      </div>
    </div>
  );
};

// ===================== PROVEEDORES =====================
const ProveedoresScreen = ({ lang, density, showRel }) => {
  const [selected, setSelected] = useState(window.SUPPLIERS[0]);
  const totalProv = window.SUPPLIERS.reduce((a, s) => a + s.monto, 0);

  const data = window.SUPPLIERS.map(s => ({...s, share: (s.monto/totalProv)*100}));

  const kpis = [
    { label: "Proveedores activos", value: "47", sub: "12 estratégicos", icon: "suppliers", reliability:"reliable" },
    { label: "Top 5 concentran", value: fmtPct(data.slice(0,5).reduce((a,s)=>a+s.share,0), 1), sub: "del gasto", icon: "alert", reliability:"reliable" },
    { label: "Top 10 concentran", value: fmtPct(data.slice(0,10).reduce((a,s)=>a+s.share,0), 1), sub: "del gasto", icon: "alert", reliability:"reliable" },
    { label: "Gasto último mes", value: fmtCLP(88540000), sub: "47 docs", icon: "invoice", reliability:"reliable" },
  ];

  return (
    <div className={`dm-screen dm-density-${density}`}>
      <div className="dm-kpi-grid dm-kpi-grid-4">
        {kpis.map((k, i) => <KPICard key={i} {...k} lang={lang} showRel={showRel}/>)}
      </div>

      <div className="dm-risk-banner dm-risk-med dm-risk-banner-lg">
        <Icon name="alert" size={18}/>
        <div>
          <strong>Riesgo de concentración medio.</strong> 5 proveedores explican el {fmtPct(data.slice(0,5).reduce((a,s)=>a+s.share,0), 0)} del gasto. CCU y Andina suman {fmtPct(data[0].share + data[1].share, 0)}. Considera ampliar alternativas en bebidas y carnes.
        </div>
        <button className="dm-btn dm-btn-secondary">Plan de diversificación</button>
      </div>

      <div className="dm-grid dm-grid-1-1">
        <Card title="Top proveedores · monto" reliability="reliable" showRel={showRel} lang={lang}>
          <HBarChart data={data.slice(0,10).map(s => ({label:s.short, sub:s.rut, value:s.monto}))} subKey="sub" color="#0EA5E9" format={fmtCLP}/>
        </Card>
        <Card title="Top proveedores · documentos" reliability="reliable" showRel={showRel} lang={lang}>
          <HBarChart data={[...data].sort((a,b)=>b.docs-a.docs).slice(0,10).map(s => ({label:s.short, sub:s.freq, value:s.docs}))} subKey="sub" color="#0B1E3F" format={(v)=>v+" docs"}/>
        </Card>
      </div>

      <div className="dm-grid dm-grid-2-1">
        <Card title="Cartera de proveedores" subtitle={`${data.length} activos`}
          reliability="reliable" showRel={showRel} lang={lang}>
          <DataTable
            density={density}
            searchPlaceholder="Buscar por razón social, RUT..."
            onRowClick={(r) => setSelected(r)}
            columns={[
              { key:"razon", header:"Razón social", render: r => (
                <div className="dm-cell-stack"><strong>{r.razon}</strong><small>{r.rut}</small></div>
              )},
              { key:"monto", header:"Gasto 12m", align:"right", width:140, render: r => <span className="dm-mono">{fmtCLP(r.monto)}</span> },
              { key:"share", header:"%", align:"right", width:80, render: r => (
                <span className="dm-mono">{fmtPct(r.share, 1)}</span>
              )},
              { key:"docs", header:"Docs", align:"right", width:80, render: r => <span className="dm-mono">{r.docs}</span> },
              { key:"freq", header:"Frecuencia", width:110 },
              { key:"last", header:"Última compra", width:120 },
            ]}
            rows={data}
            rowKey="rut"
          />
        </Card>

        <Card title="Ficha de proveedor" subtitle={selected.razon}>
          <div className="dm-prov-detail">
            <div className="dm-prov-head">
              <div className="dm-prov-avatar">{selected.short.slice(0,2).toUpperCase()}</div>
              <div>
                <strong>{selected.razon}</strong>
                <small className="dm-mono">{selected.rut}</small>
                <Tag tone="success">Activo</Tag>
              </div>
            </div>
            <dl className="dm-prov-dl">
              <div><dt>Gasto acumulado (12m)</dt><dd className="dm-mono">{fmtCLP(selected.monto)}</dd></div>
              <div><dt>Documentos recibidos</dt><dd className="dm-mono">{selected.docs}</dd></div>
              <div><dt>Frecuencia</dt><dd>{selected.freq}</dd></div>
              <div><dt>Última compra</dt><dd>{selected.last}</dd></div>
              <div><dt>Promedio por documento</dt><dd className="dm-mono">{fmtCLP(selected.monto / selected.docs)}</dd></div>
              <div><dt>Participación del gasto total</dt><dd className="dm-mono">{fmtPct(selected.monto/totalProv*100, 2)}</dd></div>
            </dl>
            <div>
              <div className="dm-card-sub" style={{marginBottom:6}}>Tendencia gasto 12m</div>
              <Sparkline values={[selected.monto*0.7, selected.monto*0.8, selected.monto*0.75, selected.monto*0.9, selected.monto*0.85, selected.monto*0.95, selected.monto*1.0, selected.monto*0.92, selected.monto*0.98, selected.monto*1.05, selected.monto*1.08, selected.monto*1.12]} w={260} h={48} color="#0EA5E9"/>
            </div>
            <div className="dm-prov-actions">
              <button className="dm-btn dm-btn-secondary"><Icon name="invoice" size={12}/> Ver facturas</button>
              <button className="dm-btn dm-btn-ghost">Exportar</button>
            </div>
          </div>
        </Card>
      </div>
    </div>
  );
};

// ===================== PRODUCTOS =====================
const ProductosScreen = ({ lang, density, showRel }) => {
  const h = window.CATALOG_HEALTH;
  const kpis = [
    { label: "Productos totales", value: fmtNumber(h.total), icon: "products", reliability:"reliable" },
    { label: "Activos", value: fmtNumber(h.activos), sub: `${Math.round(h.activos/h.total*100)}% del maestro`, icon: "check", reliability:"reliable" },
    { label: "Sin marca", value: fmtNumber(h.sinMarca), sub: "saneamiento pendiente", icon: "alert", reliability:"partial" },
    { label: "Sin familia/categoría", value: fmtNumber(h.sinCategoria), sub: "no clasificados", icon: "alert", reliability:"partial" },
    { label: "Sin costo", value: fmtNumber(h.sinCosto), sub: "bloquea margen real", icon: "alert", reliability:"unreliable" },
    { label: "Pesables", value: fmtNumber(h.pesables), sub: "balanza POS", icon: "products", reliability:"reliable" },
  ];

  return (
    <div className={`dm-screen dm-density-${density}`}>

      <div className="dm-data-debt">
        <div className="dm-data-debt-icon"><Icon name="alert" size={20}/></div>
        <div className="dm-data-debt-body">
          <h3>Deuda de datos · Catálogo</h3>
          <p>Antes de calcular margen real, el maestro requiere saneamiento: <strong>1.106 productos sin costo</strong>, 642 sin marca y 218 sin categoría válida. Recomendado: importar costos desde compras DTE recientes y normalizar marcas a partir del catálogo maestro.</p>
        </div>
        <button className="dm-btn dm-btn-primary">Iniciar saneamiento</button>
      </div>

      <div className="dm-kpi-grid dm-kpi-grid-6">
        {kpis.map((k, i) => <KPICard key={i} {...k} lang={lang} showRel={showRel}/>)}
      </div>

      <div className="dm-grid dm-grid-1-1">
        <Card title="Completitud del catálogo" subtitle="Por campo · % de registros con dato">
          <div className="dm-completeness">
            {Object.entries(h.completitud).map(([k, v]) => {
              const color = v >= 90 ? "#10B981" : v >= 60 ? "#F59E0B" : "#DC2626";
              return <ProgressBar key={k} value={v} color={color} label={k}/>;
            })}
          </div>
        </Card>

        <Card title="Salud por categoría" subtitle="% productos con todos los campos">
          <div className="dm-cat-health">
            {[
              { name:"Carnes", count:412, score: 88 },
              { name:"Bebidas", count:298, score: 94 },
              { name:"Lácteos", count:184, score: 82 },
              { name:"Panadería", count:62, score: 64 },
              { name:"Cecinas", count:152, score: 76 },
              { name:"Frutas y Verduras", count:188, score: 41 },
              { name:"Aseo", count:204, score: 72 },
              { name:"Sin categoría", count:218, score: 0 },
            ].map((c, i) => (
              <div key={i} className="dm-cat-row">
                <div className="dm-cat-name">{c.name} <small>{c.count}</small></div>
                <div className="dm-cat-track">
                  <div className="dm-cat-fill" style={{width: c.score + "%", background: c.score >= 80 ? "#10B981" : c.score >= 50 ? "#F59E0B" : "#DC2626"}}></div>
                </div>
                <div className="dm-mono dm-cat-val">{c.score}%</div>
              </div>
            ))}
          </div>
        </Card>
      </div>

      <Card title="Maestro de productos" subtitle="Costos no auditados marcados en rojo"
        reliability="partial" showRel={showRel} lang={lang}>
        <DataTable
          density={density}
          searchPlaceholder="Buscar código, nombre, marca..."
          columns={[
            { key:"cod", header:"Código", width:96, render: r => <span className="dm-mono">{r.cod}</span> },
            { key:"nombre", header:"Producto", render: r => (
              <div className="dm-cell-stack"><strong>{r.nombre}</strong>
                <small>{r.pesable ? "Pesable · " : ""}{r.fam}</small>
              </div>
            )},
            { key:"cat", header:"Categoría", width:130, render: r => (
              r.sinCat ? <Tag tone="danger">Sin categoría</Tag> : <Tag>{r.cat}</Tag>
            )},
            { key:"marca", header:"Marca", width:120, render: r => (
              r.sinMarca ? <Tag tone="warning">Sin marca</Tag> : r.marca
            )},
            { key:"costo", header:"Costo", align:"right", width:100, render: r => (
              r.sinCosto ? <Tag tone="danger">Sin costo</Tag> : <span className="dm-mono">{fmtCLP(r.costo)}</span>
            )},
            { key:"precio", header:"Precio", align:"right", width:100, render: r => <span className="dm-mono">{fmtCLP(r.precio)}</span> },
            { key:"margen", header:"Margen", align:"right", width:100, render: r => (
              r.margen == null ? <Tag tone="muted">N/D</Tag> :
              <span className={`dm-mono ${r.margen < 20 ? "dm-text-warn" : ""}`}>{r.margen}%</span>
            )},
            { key:"estado", header:"Estado", width:90, render: r => (
              <Tag tone={r.estado === "Activo" ? "success" : "muted"}>{r.estado}</Tag>
            )},
          ]}
          rows={window.PRODUCTS}
          rowKey="cod"
        />
      </Card>
    </div>
  );
};

// ===================== INVENTARIO =====================
const InventarioScreen = ({ lang, density, showRel }) => {
  const k = window.INVENTORY_KPI;
  const kpis = [
    { label: "Stock total reportado", value: fmtNumber(k.stockTotal), sub: `${k.bodegas} bodegas`, icon: "inventory", reliability:"partial" },
    { label: "Stock cero", value: fmtNumber(k.productosStockCero), sub: "sospechoso", icon: "alert", reliability:"unreliable" },
    { label: "Stock negativo", value: fmtNumber(k.productosNegativo), sub: "revisar ajustes", icon: "alert", reliability:"unreliable" },
    { label: "Sin movimiento (90d)", value: fmtNumber(k.sinMovimiento), sub: "candidatos a baja", icon: "products", reliability:"partial" },
    { label: "Ajustes (30d)", value: fmtNumber(k.ajustes30d), icon: "inventory", reliability:"partial" },
    { label: "Mermas (30d)", value: fmtNumber(k.mermas30d), sub: "registradas", icon: "alert", reliability:"partial" },
  ];

  return (
    <div className={`dm-screen dm-density-${density}`}>

      <div className="dm-data-debt dm-data-debt-warn">
        <div className="dm-data-debt-icon"><Icon name="alert" size={20}/></div>
        <div className="dm-data-debt-body">
          <h3>Inventario requiere validación</h3>
          <p>El 56% del catálogo aparece con <strong>stock cero</strong> y 47 productos con stock negativo. La exportación desde POS local no parece consistente. Antes de tomar decisiones de reposición, valida la última carga.</p>
        </div>
        <button className="dm-btn dm-btn-primary">Re-sincronizar POS</button>
      </div>

      <FiltersBar lang={lang}>
        <div className="dm-mini-field">
          <label>Bodega</label>
          <select defaultValue="todas"><option value="todas">Todas</option><option>Local 1</option><option>Bodega central</option></select>
        </div>
        <div className="dm-mini-field">
          <label>Tipo movimiento</label>
          <select defaultValue="todos"><option value="todos">Todos</option><option>Venta</option><option>Ingreso DTE</option><option>Ajuste</option><option>Merma</option></select>
        </div>
        <div className="dm-mini-field">
          <label>Merma</label>
          <select defaultValue="todos"><option value="todos">Sí / No</option><option>Sólo mermas</option><option>Sin mermas</option></select>
        </div>
        <div className="dm-mini-field">
          <label>Rango fechas</label>
          <select defaultValue="30d"><option value="7d">Últimos 7d</option><option value="30d">Últimos 30d</option><option value="90d">90d</option></select>
        </div>
      </FiltersBar>

      <div className="dm-kpi-grid dm-kpi-grid-6">
        {kpis.map((kk, i) => <KPICard key={i} {...kk} lang={lang} showRel={showRel}/>)}
      </div>

      <div className="dm-grid dm-grid-1-1">
        <Card title="Movimientos por tipo · últimos 30 días"
          reliability="partial" showRel={showRel} lang={lang}>
          <VBarChart
            labels={["Venta","Ingreso","Ajuste","Merma","Trasp.","Devol."]}
            values={[2840, 412, 124, 38, 86, 21]}
            color="#0EA5E9"
            height={220}
          />
        </Card>
        <Card title="Mermas por categoría" subtitle="Top 5 · monto estimado"
          reliability="partial" showRel={showRel} lang={lang}>
          <HBarChart data={[
            { label: "Frutas y Verduras", sub: "vencimiento natural", value: 480000 },
            { label: "Carnes", sub: "manipulación", value: 320000 },
            { label: "Panadería", sub: "diario", value: 180000 },
            { label: "Lácteos", sub: "fecha de venc.", value: 120000 },
            { label: "Cecinas", sub: "—", value: 64000 },
          ]} subKey="sub" color="#F97316" format={fmtCLP}/>
        </Card>
      </div>

      <Card title="Movimientos de inventario" subtitle="Últimos eventos"
        reliability="partial" showRel={showRel} lang={lang}>
        <DataTable
          density={density}
          searchPlaceholder="Buscar producto, bodega..."
          columns={[
            { key:"fecha", header:"Fecha", width:160, render: r => <span className="dm-mono dm-text-muted">{r.fecha}</span> },
            { key:"prod", header:"Producto" },
            { key:"bodega", header:"Bodega", width:130 },
            { key:"antes", header:"Antes", align:"right", width:80, render: r => <span className="dm-mono">{r.antes}</span> },
            { key:"despues", header:"Después", align:"right", width:90, render: r => <span className="dm-mono">{r.despues}</span> },
            { key:"diff", header:"Δ", align:"right", width:70, render: r => {
              const d = r.despues - r.antes;
              return <span className={`dm-mono ${d >= 0 ? "dm-text-up" : "dm-text-down"}`}>{d >= 0 ? "+" : ""}{d}</span>;
            }},
            { key:"tipo", header:"Tipo", width:130, render: r => {
              const tone = r.tipo === "Merma" ? "danger" : r.tipo === "Ajuste" ? "warning" : r.tipo === "Ingreso DTE" ? "success" : "info";
              return <Tag tone={tone}>{r.tipo}</Tag>;
            }},
          ]}
          rows={window.INVENTORY_MOVES.map((m, i) => ({...m, _id: i}))}
          rowKey="_id"
        />
      </Card>
    </div>
  );
};

// ===================== CALIDAD DE DATOS =====================
const CalidadScreen = ({ lang, density, showRel }) => {
  const modules = [
    { id: "compras",     name: "Compras DTE",  ...window.RELIABILITY.compras },
    { id: "proveedores", name: "Proveedores",  ...window.RELIABILITY.proveedores },
    { id: "clientes",    name: "Clientes",     ...window.RELIABILITY.clientes },
    { id: "productos",   name: "Productos",    ...window.RELIABILITY.productos },
    { id: "inventario",  name: "Inventario",   ...window.RELIABILITY.inventario },
    { id: "ventas",      name: "Ventas",       ...window.RELIABILITY.ventas },
    { id: "caja",        name: "Caja",         ...window.RELIABILITY.caja },
  ];

  const colorMap = { reliable: "#10B981", partial: "#F59E0B", unreliable: "#DC2626" };
  const labelMap = window.I18N[lang].reliability;

  return (
    <div className={`dm-screen dm-density-${density}`}>

      <Card title="Semáforo de confiabilidad por módulo" subtitle="Última carga ETL: 2026-05-15 06:00 · proceso: programado diario"
        action={
          <div className="dm-etl-status">
            <span className="dm-etl-dot dm-etl-ok"></span>
            <span>ETL operativo</span>
          </div>
        }>
        <div className="dm-semaforo">
          {modules.map(m => (
            <div key={m.id} className={`dm-semaforo-item dm-sem-${m.level}`}>
              <div className="dm-sem-light">
                <span style={{background: colorMap[m.level]}}></span>
              </div>
              <div className="dm-sem-body">
                <div className="dm-sem-head">
                  <strong>{m.name}</strong>
                  <ReliabilityBadge level={m.level} show={true} lang={lang} size="xs"/>
                </div>
                <div className="dm-sem-stats">
                  <div><span>Cobertura</span><strong>{m.coverage}%</strong></div>
                  <div><span>Issues</span><strong>{m.issues}</strong></div>
                  <div><span>Última carga</span><strong>{m.lastSync}</strong></div>
                </div>
                <div className="dm-sem-bar">
                  <div className="dm-sem-fill" style={{width: m.coverage + "%", background: colorMap[m.level]}}></div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </Card>

      <div className="dm-grid dm-grid-2-1">
        <Card title="Problemas detectados" subtitle={`${window.DATA_QUALITY_ISSUES.length} issues activos`}>
          <DataTable
            density={density}
            searchable={false}
            columns={[
              { key:"sev", header:"Sev", width:80, render: r => (
                <Tag tone={r.sev === "high" ? "danger" : r.sev === "med" ? "warning" : "info"}>
                  {r.sev === "high" ? "Alta" : r.sev === "med" ? "Media" : "Baja"}
                </Tag>
              )},
              { key:"mod", header:"Módulo", width:120, render: r => <Tag>{r.mod}</Tag> },
              { key:"desc", header:"Descripción" },
              { key:"action", header:"Acción recomendada" },
              { key:"_", header:"", width:90, render: () => <button className="dm-btn dm-btn-ghost dm-btn-sm">Asistente</button>, sortable:false },
            ]}
            rows={window.DATA_QUALITY_ISSUES.map((q, i) => ({...q, _id: i}))}
            rowKey="_id"
          />
        </Card>

        <Card title="Pipeline de datos" subtitle="POS local → ETL → central → API → UI">
          <div className="dm-pipeline">
            {[
              { name: "POS/DTE local", note: "2 nodos", ok: true },
              { name: "Exportación CSV", note: "agente local v1.4", ok: true },
              { name: "ETL", note: "diario 06:00 · 4m 12s", ok: true },
              { name: "Base analítica", note: "poseasydte_central", ok: true },
              { name: "API backend", note: "/v2/dte · /v2/maestro", ok: true },
              { name: "Dashboard web", note: "este", ok: true },
            ].map((step, i, arr) => (
              <React.Fragment key={i}>
                <div className="dm-pipe-step">
                  <div className={`dm-pipe-ico ${step.ok ? "ok" : "err"}`}>
                    <Icon name={step.ok ? "check" : "x"} size={12} stroke={2.5}/>
                  </div>
                  <div>
                    <strong>{step.name}</strong>
                    <small>{step.note}</small>
                  </div>
                </div>
                {i < arr.length - 1 && <div className="dm-pipe-arrow">↓</div>}
              </React.Fragment>
            ))}
          </div>
          <div className="dm-pipe-foot">
            <div><span>Última carga</span><strong>2026-05-15 06:00</strong></div>
            <div><span>Próxima carga</span><strong>2026-05-16 06:00</strong></div>
            <div><span>Trazabilidad</span><strong>Habilitada</strong></div>
            <div><span>Respaldos</span><strong>S3 · 30d</strong></div>
          </div>
        </Card>
      </div>

      <Card title="Recomendaciones priorizadas" subtitle="Ruta de saneamiento (próximas 4 semanas)">
        <ol className="dm-roadmap">
          <li>
            <strong>Semana 1.</strong> Importar costos desde líneas DTE recientes para 1.106 productos sin costo. Resultado esperado: cálculo de margen real para 78% del catálogo activo.
          </li>
          <li>
            <strong>Semana 2.</strong> Normalizar marcas y resolver 218 productos sin categoría. Resultado: catálogo apto para reporting comercial.
          </li>
          <li>
            <strong>Semana 3.</strong> Revalidar exportación de stock desde POS local. Eliminar 1.842 productos en stock cero por error de pipeline.
          </li>
          <li>
            <strong>Semana 4.</strong> Activar exportación diaria de ventas. Habilita módulo de ventas y margen real punto a punto.
          </li>
        </ol>
      </Card>
    </div>
  );
};

// Export to window
Object.assign(window, {
  LoginScreen, ExecutiveScreen, ComprasScreen, ProveedoresScreen,
  ProductosScreen, InventarioScreen, CalidadScreen,
});