/* global React, Icon */
const { useState, useMemo } = React;

// The hero "dashboard" — a real Contarte-flavored facturación view
function HeroDashboard() {
  const invoices = [
    { rfc: "AALJ890203K91", cli: "Jiménez Ingeniería", folio: "F-2084", amt: "$48,720.00", st: "pg" },
    { rfc: "CSA100115M22",  cli: "Cosméticos del Álamo", folio: "F-2083", amt: "$12,340.50", st: "pg" },
    { rfc: "PMT220718DG4",  cli: "Papelería Montejo",    folio: "F-2082", amt: "$3,890.00",  st: "pn" },
    { rfc: "RDM950402A18",  cli: "Refacciones del Mar",  folio: "F-2081", amt: "$27,500.00", st: "pn" },
    { rfc: "LBR780910B57",  cli: "Láminas del Bajío",    folio: "F-2080", amt: "$9,450.00",  st: "vn" },
  ];
  const stLabel = { pg: "Pagada", pn: "Pendiente", vn: "Vencida" };
  const stTag = { pg: "inv-status pg", pn: "inv-status pn", vn: "inv-status vn" };

  return (
    <div className="hero-visual">
      <div className="dash">
        <div className="dash-topbar">
          <span className="dot" style={{background:"#ff5f57"}}/>
          <span className="dot" style={{background:"#ffbd2e"}}/>
          <span className="dot" style={{background:"#28c840"}}/>
          <div className="url">app.contarte.mx&nbsp;/&nbsp;facturación</div>
        </div>
        <div className="dash-body">
          <aside className="dash-side">
            <div className="side-label">Operación</div>
            <div className="side-item" data-on="true"><Icon name="invoice" size={15}/>Facturación</div>
            <div className="side-item"><Icon name="wallet" size={15}/>Cuentas por cobrar</div>
            <div className="side-item"><Icon name="download" size={15}/>Gastos (XML)</div>
            <div className="side-item"><Icon name="bank" size={15}/>Bancos</div>
            <hr/>
            <div className="side-label">Reportes</div>
            <div className="side-item"><Icon name="chart" size={15}/>Flujo de efectivo</div>
            <div className="side-item"><Icon name="folder" size={15}/>Balanza</div>
            <div className="side-item"><Icon name="people" size={15}/>Contador</div>
          </aside>

          <div className="dash-main">
            <div className="dash-header">
              <div>
                <h5>Facturación · Abril 2026</h5>
                <div className="sub">32 CFDI 4.0 emitidos · sincronía con SAT hace 2 min</div>
              </div>
              <button className="new"><Icon name="plus" size={14}/> Nueva factura</button>
            </div>

            <div className="kpis">
              <div className="kpi ok">
                <div className="label">Cobrado</div>
                <div className="val">$184,320</div>
                <div className="delta">↑ 12.4% vs marzo</div>
                <div className="bar"><i style={{width:"72%", background:"var(--green-500)"}}/></div>
              </div>
              <div className="kpi warn">
                <div className="label">Por cobrar</div>
                <div className="val">$64,890</div>
                <div className="delta">8 facturas · 3 vencen hoy</div>
                <div className="bar"><i style={{width:"45%", background:"var(--orange-500)"}}/></div>
              </div>
              <div className="kpi">
                <div className="label">Timbres usados</div>
                <div className="val">184 <span style={{color:"var(--ink-400)", fontWeight:500, fontSize:14}}>/ 500</span></div>
                <div className="delta" style={{color:"var(--ink-500)"}}>Plan B · se reinicia 01 may</div>
                <div className="bar"><i style={{width:"37%", background:"var(--cyan-500)"}}/></div>
              </div>
            </div>

            <table className="inv-table">
              <thead>
                <tr><th>Cliente</th><th>RFC</th><th>Folio</th><th style={{textAlign:"right"}}>Importe</th><th>Estado</th></tr>
              </thead>
              <tbody>
                {invoices.map(r => (
                  <tr key={r.folio}>
                    <td>{r.cli}</td>
                    <td className="rfc">{r.rfc}</td>
                    <td className="rfc">{r.folio}</td>
                    <td className="amt">{r.amt}</td>
                    <td><span className={stTag[r.st]}><i className="dot"/>{stLabel[r.st]}</span></td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </div>

      <div className="dash-chip c1">
        <div className="ico sat"><Icon name="link" size={14}/></div>
        <div>
          <b>SAT conectado</b>
          <span>Descarga masiva al día</span>
        </div>
      </div>
      <div className="dash-chip c2">
        <div className="ico ok"><Icon name="check" size={14}/></div>
        <div>
          <b>CFDI 4.0 timbrado</b>
          <span>F-2085 · hace 8 seg</span>
        </div>
      </div>
    </div>
  );
}

window.HeroDashboard = HeroDashboard;