/* global React */
const { useState } = React;

/* ================================================================
   Tiny inline icon set
   ================================================================ */
const Icon = ({ name, size = 14 }) => {
  const paths = {
    grid: "M3 3h7v7H3zM14 3h7v7h-7zM3 14h7v7H3zM14 14h7v7h-7z",
    cal: "M3 7h18M7 3v4M17 3v4M5 7h14v14H5z",
    list: "M3 6h18M3 12h18M3 18h18",
    users: "M7 11a4 4 0 100-8 4 4 0 000 8zM1 21v-1a6 6 0 0112 0v1M17 11a4 4 0 100-8 4 4 0 000 8zM15 21v-1a6 6 0 0112 0",
    file: "M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8zM14 2v6h6",
    chart: "M3 21V3M21 21H3M7 17V9M12 17V5M17 17v-7",
    money: "M3 7h18v10H3zM7 12h.01M12 12h.01M17 12h.01",
    box: "M21 8l-9-5-9 5 9 5 9-5zM3 8v8l9 5 9-5V8M12 13v8",
    truck: "M1 6h13v9H1zM14 9h4l3 3v3h-7M5 18a2 2 0 100-4 2 2 0 000 4zM17 18a2 2 0 100-4 2 2 0 000 4z",
    cog: "M12 8a4 4 0 100 8 4 4 0 000-8zM19 12c0 1-.5 2-.5 2l2 3-2 2-3-2s-1 .5-2 .5-2-.5-2-.5l-3 2-2-2 2-3s-.5-1-.5-2 .5-2 .5-2l-2-3 2-2 3 2s1-.5 2-.5 2 .5 2 .5l3-2 2 2-2 3s.5 1 .5 2z",
    shield: "M12 2L4 6v6c0 5 3.5 9 8 10 4.5-1 8-5 8-10V6l-8-4z",
    clock: "M12 2a10 10 0 100 20 10 10 0 000-20zM12 6v6l4 2",
    plus: "M12 5v14M5 12h14",
    eye: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8zM12 9a3 3 0 100 6 3 3 0 000-6z",
    edit: "M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7M18.5 2.5a2.12 2.12 0 013 3L12 15l-4 1 1-4 9.5-9.5z",
    search: "M11 19a8 8 0 100-16 8 8 0 000 16zM21 21l-4.35-4.35",
    check: "M5 12l5 5 9-11",
    chev_r: "M9 6l6 6-6 6",
    chev_l: "M15 6l-6 6 6 6",
    arrow_r: "M5 12h14M12 5l7 7-7 7",
    scissors: "M6 9a3 3 0 100-6 3 3 0 000 6zM6 21a3 3 0 100-6 3 3 0 000 6zM20 4L8.12 15.88M14.47 14.48L20 20M8.12 8.12L12 12",
    lock: "M5 11h14v10H5zM8 11V7a4 4 0 018 0v4",
    pos: "M3 3h18v6H3zM3 9v12h18V9M7 14h4M7 17h4M15 14h2M15 17h2",
    mega: "M3 11l14-6v14L3 13zM3 11v2M17 8a4 4 0 010 6",
    sms: "M21 11.5a8.38 8.38 0 01-9 8.5 9.06 9.06 0 01-4-.9L3 21l1.9-5A8.38 8.38 0 0112 3a8.5 8.5 0 019 8.5z",
    bldg: "M3 21V5l9-2v18M13 21V9l8-2v14M7 8h.01M7 12h.01M7 16h.01M17 12h.01M17 16h.01",
    pct: "M19 5L5 19M6.5 8a1.5 1.5 0 100-3 1.5 1.5 0 000 3zM17.5 19a1.5 1.5 0 100-3 1.5 1.5 0 000 3z",
    mail: "M4 4h16v16H4zM4 6l8 6 8-6",
    pin: "M12 21s7-6.5 7-12a7 7 0 10-14 0c0 5.5 7 12 7 12zM12 9a2 2 0 100 4 2 2 0 000-4z",
    home: "M3 11l9-8 9 8M5 10v10h14V10",
  };
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <path d={paths[name]} />
    </svg>
  );
};

/* ================================================================
   Sidebar (FashionOne)
   ================================================================ */
const PRODUCT_NAV = [
  { group: "PRINCIPAL", items: [
    { id: "inicio", label: "Inicio", icon: "home" },
    { id: "agenda", label: "Agenda y Citas", icon: "cal" },
    { id: "cobro", label: "Atención / Cobro", icon: "pos" },
  ]},
  { group: "OPERACIÓN", items: [
    { id: "clientes", label: "Clientes (CRM)", icon: "users" },
    { id: "servicios", label: "Servicios", icon: "scissors" },
    { id: "facturacion", label: "Facturación", icon: "file" },
  ]},
  { group: "ADMINISTRACIÓN", items: [
    { id: "bodega", label: "Bodega e Inventario", icon: "box" },
    { id: "compras", label: "Compras", icon: "truck" },
    { id: "personal", label: "Personal", icon: "users" },
  ]},
  { group: "SISTEMA", items: [
    { id: "publicidad", label: "Publicidad", icon: "mega" },
    { id: "accesos", label: "Usuarios y accesos", icon: "lock" },
    { id: "config", label: "Configuración", icon: "cog" },
  ]},
];

const AppSidebar = ({ active, onChange }) => (
  <aside className="app-side">
    <div className="app-brand">
      <div className="mk">F</div>
      <div>
        <div className="nm">FashionOne</div>
        <div className="sb">Salones &amp; Belleza</div>
      </div>
    </div>
    {PRODUCT_NAV.map((g) => (
      <div key={g.group}>
        <div className="app-section-label">{g.group}</div>
        {g.items.map((it) => (
          <div
            key={it.id}
            className={`app-nav-item ${active === it.id ? "active" : ""}`}
            onClick={() => onChange(it.id)}
          >
            <Icon name={it.icon} />
            <span>{it.label}</span>
          </div>
        ))}
      </div>
    ))}
  </aside>
);

const AppTopbar = ({ title }) => (
  <div className="app-topbar">
    <div className="ttl">{title}</div>
    <div className="user">
      maria.rodriguez01@example.cr
      <div className="avatar">M</div>
    </div>
  </div>
);

/* ================================================================
   Screens
   ================================================================ */
const ScreenInicio = () => (
  <>
    <AppTopbar title="Panel de control" />
    <div className="app-body">
      <div className="dash-tiles">
        <div className="dash-tile">
          <div className="label">Citas de hoy</div>
          <div className="value">3</div>
          <div className="sub">21 jun · todas confirmadas</div>
        </div>
        <div className="dash-tile green">
          <div className="label">Ventas de hoy</div>
          <div className="value">₡247k</div>
          <div className="sub">Mes: ₡4.1M</div>
        </div>
        <div className="dash-tile">
          <div className="label">Clientes activos</div>
          <div className="value">9</div>
          <div className="sub">+2 esta semana</div>
        </div>
        <div className="dash-tile amber">
          <div className="label">Por reponer</div>
          <div className="value">2</div>
          <div className="sub">Tinte rubio · Peróxido</div>
        </div>
      </div>
      <div className="dash-grid">
        <div className="dash-card">
          <div className="dash-card-h">
            Próximas citas
            <div className="tiny">Hoy · 21 jun</div>
          </div>
          <table className="app-table">
            <thead><tr><th>Hora</th><th>Cliente</th><th>Servicio</th><th>Tipo</th><th>Estado</th></tr></thead>
            <tbody>
              <tr><td className="num">09:00</td><td>Laura Hernández Vega</td><td>Alisados y Keratina</td><td><span className="pill gray">Local</span></td><td><span className="pill green">Confirmada</span></td></tr>
              <tr><td className="num">10:00</td><td>Sofía González Mora</td><td>Alisados y Keratina</td><td><span className="pill gray">Local</span></td><td><span className="pill green">Confirmada</span></td></tr>
              <tr><td className="num">12:00</td><td>Natalia Solís Rojas</td><td>Maquillaje profesional</td><td><span className="pill cyan">Express</span></td><td><span className="pill green">Confirmada</span></td></tr>
            </tbody>
          </table>
        </div>
        <div className="dash-card">
          <div className="dash-card-h">Servicios más vendidos<div className="tiny">Junio</div></div>
          <div className="risk-bars">
            <div className="risk-bar-row"><span style={{color:"var(--ink)"}}>Alisados</span><div className="risk-bar"><div className="fill" style={{width:"90%", background:"var(--brand-accent)"}}/></div><span className="num">28</span></div>
            <div className="risk-bar-row"><span style={{color:"var(--ink)"}}>Maquillaje</span><div className="risk-bar"><div className="fill" style={{width:"70%", background:"var(--brand-accent)"}}/></div><span className="num">21</span></div>
            <div className="risk-bar-row"><span style={{color:"var(--ink)"}}>Mechas</span><div className="risk-bar"><div className="fill" style={{width:"55%", background:"var(--brand-accent)"}}/></div><span className="num">17</span></div>
            <div className="risk-bar-row"><span style={{color:"var(--ink)"}}>Manicura</span><div className="risk-bar"><div className="fill" style={{width:"40%", background:"var(--brand-accent)"}}/></div><span className="num">12</span></div>
          </div>
          <div className="dash-card-h" style={{borderTop:"1px solid var(--line-soft)", borderBottom:"none"}}>Facturas borrador<div className="tiny">4 pendientes</div></div>
          <div style={{padding:"0 16px 16px", fontSize:12, color:"var(--ink-2)"}}>
            <div style={{display:"flex", justifyContent:"space-between", padding:"8px 0", borderBottom:"1px dashed var(--line-soft)"}}><span>Laura Hernández</span><span className="num" style={{fontWeight:600}}>₡339,000</span></div>
            <div style={{display:"flex", justifyContent:"space-between", padding:"8px 0"}}><span>Fernanda Chaves</span><span className="num" style={{fontWeight:600}}>₡161,590</span></div>
          </div>
        </div>
      </div>
    </div>
  </>
);

const ScreenAgenda = () => {
  // June 2026, June 1 = Monday
  const events = {
    16: ["09:00 Carolina","11:00 Daniela","13:00 Gabriela"],
    17: ["09:00 Fernanda"],
    20: ["09:00 Andrea"],
    21: ["09:00 Laura","10:00 Sofía","12:00 Natalia"],
  };
  const cells = [];
  for (let d=1; d<=30; d++) cells.push({d, muted:false});
  for (let d=1; d<=5; d++) cells.push({d, muted:true}); // jul spillover to fill last week
  const days = ["lun","mar","mié","jue","vie","sáb","dom"];
  return (
    <>
      <AppTopbar title="Calendario de citas" />
      <div className="app-body">
        <div style={{display:"flex", justifyContent:"space-between", alignItems:"center", marginBottom:12}}>
          <div style={{display:"flex", gap:6, alignItems:"center"}}>
            <button className="cal-h-btn nav-btn" style={{width:28, height:28, borderRadius:6, background:"var(--brand-navy)", color:"white", border:"none", display:"inline-grid", placeItems:"center"}}><Icon name="chev_l" size={12}/></button>
            <button className="nav-btn" style={{width:28, height:28, borderRadius:6, background:"var(--brand-navy)", color:"white", border:"none", display:"inline-grid", placeItems:"center"}}><Icon name="chev_r" size={12}/></button>
            <button className="app-btn">today</button>
            <div style={{fontSize:16, fontWeight:700, marginLeft:14, color:"var(--brand-navy)"}}>Junio 2026</div>
          </div>
          <div style={{display:"flex", gap:8, alignItems:"center"}}>
            <div style={{display:"flex", gap:0, border:"1px solid var(--line)", borderRadius:6, overflow:"hidden"}}>
              <button className="app-btn primary" style={{borderRadius:0, border:"none"}}>month</button>
              <button className="app-btn" style={{borderRadius:0, border:"none"}}>week</button>
              <button className="app-btn" style={{borderRadius:0, border:"none"}}>day</button>
            </div>
            <button className="app-btn green"><Icon name="plus" size={11}/>Nueva cita</button>
          </div>
        </div>
        <div className="mcal">
          <div className="mcal-head">{days.map(d=>(<div key={d}>{d}</div>))}</div>
          <div className="mcal-grid">
            {cells.map((c,i)=>(
              <div key={i} className={`mcal-day ${c.muted?"muted":""} ${c.d===20&&!c.muted?"today":""}`}>
                <span className="dn">{c.d}</span>
                {!c.muted && (events[c.d]||[]).map((e,j)=>(<div className="mcal-ev" key={j}>{e}</div>))}
              </div>
            ))}
          </div>
        </div>
      </div>
    </>
  );
};

const ScreenClientes = () => (
  <>
    <AppTopbar title="Clientes (CRM)" />
    <div className="app-body">
      <div style={{display:"flex", justifyContent:"space-between", alignItems:"center", marginBottom:12, gap:8}}>
        <div style={{display:"flex", gap:8, alignItems:"center"}}>
          <select className="app-search" style={{width:120}}><option>Activos</option></select>
          <input className="app-search" placeholder="Buscar nombre o teléfono..."/>
        </div>
        <div style={{display:"flex", gap:6}}>
          <button className="app-btn">Exportar</button>
          <button className="app-btn">Importar</button>
          <button className="app-btn cyan"><Icon name="plus" size={11}/>Nuevo cliente</button>
        </div>
      </div>
      <table className="app-table" style={{border:"1px solid var(--line)", borderRadius:8, overflow:"hidden"}}>
        <thead><tr><th>Nombre</th><th>Teléfono</th><th>Estado</th><th>Visitas</th><th>Acciones</th></tr></thead>
        <tbody>
          {[
            ["Andrea Jiménez Solano","8765-2345",1],
            ["Carolina Castillo Hernández","8555-9012",1],
            ["Daniela Vargas Chaves","8999-4567",1],
            ["Fernanda Chaves Ramírez","8333-7890",1],
            ["Gabriela Rojas Sánchez","8444-8901",1],
            ["Laura Hernández Vega","8666-0123",1],
            ["Natalia Solís Rojas","8777-6789",1],
            ["Sofía González Mora","8456-3456",1],
            ["Valeria Mora Castillo","8222-5678",0],
          ].map((r,i)=>(
            <tr key={i}>
              <td><b>{r[0]}</b></td>
              <td className="num">{r[1]}</td>
              <td><span className="pill green">Activo</span></td>
              <td className="num">{r[2]}</td>
              <td><div className="app-actions">
                <button className="app-btn">Ver ficha</button>
                <button className="app-btn" style={{color:"var(--risk-high)", borderColor:"rgba(212,53,28,.3)", background:"rgba(212,53,28,.05)"}}>Moroso</button>
                <button className="app-btn">Desactivar</button>
              </div></td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  </>
);

const ScreenServicios = () => (
  <>
    <AppTopbar title="Servicios" />
    <div className="app-body">
      <div style={{display:"flex", justifyContent:"space-between", alignItems:"center", marginBottom:12}}>
        <div style={{fontSize:14, fontWeight:600}}>Catálogo de servicios</div>
        <div style={{display:"flex", gap:6}}>
          <button className="app-btn">Exportar</button>
          <button className="app-btn">Importar</button>
          <button className="app-btn cyan"><Icon name="plus" size={11}/>Nuevo servicio</button>
        </div>
      </div>
      <table className="app-table" style={{border:"1px solid var(--line)", borderRadius:8, overflow:"hidden"}}>
        <thead><tr><th>Servicio</th><th>Categoría</th><th>Precio</th><th>Costo insumos</th><th>Ganancia</th><th>Duración</th><th></th></tr></thead>
        <tbody>
          {[
            ["Alisados y Keratina","52,000"],
            ["Corte de cabello","8,000"],
            ["Depilación (cera o hilo)","8,000"],
            ["Esmaltado semipermanente","12,000"],
            ["Faciales (limpieza/hidratación)","19,000"],
            ["Manicura","7,000"],
            ["Maquillaje profesional","21,000"],
            ["Mechas o Balayage","42,000"],
            ["Pedicura","9,000"],
            ["Peinados y blower","16,000"],
            ["Pestañas y cejas","15,000"],
            ["Tinte completo","25,000"],
            ["Uñas acrílicas o gel","18,000"],
          ].map((r,i)=>(
            <tr key={i}>
              <td><b>{r[0]}</b></td>
              <td><span className="pill gray">Belleza</span></td>
              <td className="num">₡{r[1]}</td>
              <td className="num" style={{color:"var(--ink-3)"}}>₡0</td>
              <td className="num" style={{color:"var(--risk-low)", fontWeight:600}}>₡{r[1]}</td>
              <td className="num">30 min</td>
              <td><div className="app-actions"><button className="app-btn icon cyan"><Icon name="edit" size={12}/></button><button className="app-btn icon" style={{background:"var(--risk-high)", color:"white", borderColor:"var(--risk-high)"}}>×</button></div></td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  </>
);

const ScreenCobro = () => (
  <>
    <AppTopbar title="Atención / Cobro — Nueva factura" />
    <div className="app-body">
      <div style={{background:"white", border:"1px solid var(--line)", borderRadius:10, padding:16, marginBottom:12}}>
        <div style={{fontSize:10, letterSpacing:".1em", textTransform:"uppercase", color:"var(--ink-3)", fontWeight:600, marginBottom:10}}>Datos del cliente</div>
        <div style={{display:"grid", gridTemplateColumns:"repeat(3, 1fr)", gap:12}}>
          <label className="fld"><span>Cliente registrado</span><select className="app-search" style={{width:"100%"}}><option>Natalia Solís Rojas</option></select></label>
          <label className="fld"><span>Tipo identificación</span><select className="app-search" style={{width:"100%"}}><option>Cédula física</option></select></label>
          <label className="fld"><span>Medio de pago</span><select className="app-search" style={{width:"100%"}}><option>Efectivo</option><option>SINPE Móvil</option><option>Tarjeta</option></select></label>
        </div>
      </div>
      <div style={{background:"white", border:"1px solid var(--line)", borderRadius:10, overflow:"hidden"}}>
        <div style={{display:"flex", justifyContent:"space-between", alignItems:"center", padding:"12px 16px"}}>
          <div style={{fontSize:10, letterSpacing:".1em", textTransform:"uppercase", color:"var(--ink-3)", fontWeight:600}}>Detalle</div>
          <div style={{display:"flex", gap:6}}>
            <select className="app-search" style={{width:200}}><option>+ Agregar del catálogo…</option></select>
            <button className="app-btn cyan">Agregar</button>
          </div>
        </div>
        <table className="app-table">
          <thead><tr><th>Detalle</th><th>Cant.</th><th>Precio</th><th>Desc.</th><th>IVA %</th><th>Total</th></tr></thead>
          <tbody>
            <tr><td>Maquillaje profesional</td><td className="num">1</td><td className="num">₡21,000</td><td className="num">₡0</td><td className="num">13%</td><td className="num" style={{fontWeight:600}}>₡23,730</td></tr>
            <tr><td>Peinados y blower</td><td className="num">1</td><td className="num">₡16,000</td><td className="num">₡0</td><td className="num">13%</td><td className="num" style={{fontWeight:600}}>₡18,080</td></tr>
            <tr><td>Esmalte gel</td><td className="num">1</td><td className="num">₡4,500</td><td className="num">₡0</td><td className="num">13%</td><td className="num" style={{fontWeight:600}}>₡5,085</td></tr>
          </tbody>
        </table>
        <div style={{padding:"12px 16px", textAlign:"right", fontSize:12, color:"var(--ink-2)"}}>
          <div>Subtotal: <b className="num">₡41,500.00</b></div>
          <div>Impuestos: <b className="num">₡5,395.00</b></div>
          <div style={{fontSize:16, marginTop:4, color:"var(--brand-navy)"}}>TOTAL: <b className="num">₡46,895.00</b></div>
        </div>
      </div>
      <div style={{display:"flex", gap:8, marginTop:14}}>
        <button className="app-btn green" style={{height:36, padding:"0 16px"}}><Icon name="check" size={12}/>Generar factura (borrador)</button>
        <button className="app-btn" style={{height:36}}>Cancelar</button>
      </div>
    </div>
  </>
);

const ScreenFacturacion = () => (
  <>
    <AppTopbar title="Facturación" />
    <div className="app-body">
      <div style={{display:"flex", justifyContent:"space-between", alignItems:"center", marginBottom:12}}>
        <div style={{display:"flex", gap:8, alignItems:"center"}}>
          <select className="app-search" style={{width:120}}><option>Todas</option></select>
          <input className="app-search" style={{width:130}} defaultValue="21/05/2026"/>
          <input className="app-search" style={{width:130}} defaultValue="20/06/2026"/>
          <button className="app-btn cyan">Filtrar</button>
        </div>
        <button className="app-btn green"><Icon name="plus" size={11}/>Nueva factura</button>
      </div>
      <table className="app-table" style={{border:"1px solid var(--line)", borderRadius:8, overflow:"hidden"}}>
        <thead><tr><th>Consecutivo</th><th>Fecha</th><th>Cliente</th><th>Total</th><th>Estado</th><th>Hacienda</th><th>Descargas</th></tr></thead>
        <tbody>
          {[
            ["F-20260620233657","20/06/2026","Fernanda Chaves Ramírez","161,590.00"],
            ["F-20260620000235","20/06/2026","Carolina Castillo Hernández","85,880.00"],
            ["F-20260619234423","19/06/2026","Laura Hernández Vega","339,000.00"],
            ["F-20260619182344","19/06/2026","Andrea Jiménez Solano","97,180.00"],
          ].map((r,i)=>(
            <tr key={i}>
              <td className="num" style={{fontSize:11}}><b>{r[0]}</b></td>
              <td className="num">{r[1]}</td>
              <td>{r[2]}</td>
              <td className="num" style={{fontWeight:600}}>₡{r[3]}</td>
              <td><span className="pill cyan">Borrador</span></td>
              <td><span className="pill amber">Pendiente envío</span></td>
              <td><div className="app-actions"><button className="app-btn">PDF</button><button className="app-btn">XML</button><button className="app-btn">Resp.</button></div></td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  </>
);

const ScreenBodega = () => {
  const [tab, setTab] = useState("prod");
  return (
    <>
      <AppTopbar title="Bodega e inventario" />
      <div className="app-body">
        <div style={{display:"flex", justifyContent:"space-between", alignItems:"center", marginBottom:12}}>
          <div style={{display:"flex", gap:4}}>
            <button className={`app-btn ${tab==="prod"?"primary":""}`} onClick={()=>setTab("prod")}>Productos (venta)</button>
            <button className={`app-btn ${tab==="mat"?"primary":""}`} onClick={()=>setTab("mat")}>Materiales (insumos)</button>
          </div>
          <button className="app-btn cyan"><Icon name="plus" size={11}/>{tab==="prod"?"Nuevo producto":"Nuevo material"}</button>
        </div>
        <table className="app-table" style={{border:"1px solid var(--line)", borderRadius:8, overflow:"hidden"}}>
          <thead><tr><th>Nombre</th><th>SKU</th><th>Unidad</th>{tab==="prod"&&<th>Precio</th>}<th>Costo</th><th>Stock</th><th>Mínimo</th><th>Estado</th><th>Reabastecer</th></tr></thead>
          <tbody>
            {(tab==="prod" ? [
              ["Esmalte gel","ESM-01","Unidad","4,500","2,000.00","24","6"],
              ["Shampoo profesional 500ml","SH-500","Unidad","9,500","5,000.00","20","5"],
            ] : [
              ["Guantes","MAT-03","par",null,"300.00","97","20"],
              ["Peróxido 20 Vol","MAT-02","ml",null,"10.00","850","500"],
              ["Tinte rubio cenizo","MAT-01","Unidad",null,"2,500.00","12","5"],
            ]).map((r,i)=>(
              <tr key={i}>
                <td><b>{r[0]}</b></td>
                <td className="num">{r[1]}</td>
                <td>{r[2]}</td>
                {tab==="prod"&&<td className="num">₡{r[3]}</td>}
                <td className="num">₡{r[4]}</td>
                <td className="num">{r[5]}</td>
                <td className="num">{r[6]}</td>
                <td><span className="pill green">OK</span></td>
                <td><div style={{display:"flex", gap:6, alignItems:"center"}}><input className="app-search" style={{width:54, height:26}} defaultValue="0"/><a style={{color:"var(--brand-accent)", fontSize:11, fontWeight:600}}>+ Entrada</a></div></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </>
  );
};

const ScreenCompras = () => (
  <>
    <AppTopbar title="Compras a proveedores" />
    <div className="app-body">
      <div style={{display:"flex", justifyContent:"space-between", alignItems:"center", marginBottom:12}}>
        <div style={{fontSize:10, letterSpacing:".1em", textTransform:"uppercase", color:"var(--ink-3)", fontWeight:600}}>Nueva compra (ingreso de mercadería)</div>
        <button className="app-btn green"><Icon name="plus" size={11}/>Nueva compra</button>
      </div>
      <div style={{background:"white", border:"1px solid var(--line)", borderRadius:10, padding:16}}>
        <div style={{display:"grid", gridTemplateColumns:"1fr 1fr 160px", gap:12, marginBottom:12}}>
          <label className="fld"><span>Proveedor</span><input className="app-search" style={{width:"100%"}} defaultValue="SuperSalón"/></label>
          <label className="fld"><span>N.º factura proveedor</span><input className="app-search" style={{width:"100%"}} defaultValue="33435345"/></label>
          <label className="fld"><span>Fecha</span><input className="app-search" style={{width:"100%"}} defaultValue="14/06/2026"/></label>
        </div>
        <table className="app-table" style={{border:"1px solid var(--line-soft)", borderRadius:6, overflow:"hidden"}}>
          <thead><tr><th>Producto / Insumo</th><th>Cantidad</th><th>Unidad</th><th>Costo unitario (₡)</th><th>Total</th><th></th></tr></thead>
          <tbody>
            <tr><td>Esmalte gel</td><td className="num">5</td><td>Unidad</td><td className="num">2,000.00</td><td className="num" style={{fontWeight:600}}>₡10,000.00</td><td><button className="app-btn icon" style={{color:"var(--brand-accent)"}}>×</button></td></tr>
            <tr><td>Guantes</td><td className="num">50</td><td>par</td><td className="num">300.00</td><td className="num" style={{fontWeight:600}}>₡15,000.00</td><td><button className="app-btn icon" style={{color:"var(--brand-accent)"}}>×</button></td></tr>
            <tr><td>Peróxido 20 Vol</td><td className="num">20</td><td>ml</td><td className="num">10.00</td><td className="num" style={{fontWeight:600}}>₡200.00</td><td><button className="app-btn icon" style={{color:"var(--brand-accent)"}}>×</button></td></tr>
          </tbody>
        </table>
        <div style={{textAlign:"right", marginTop:12, fontSize:16, fontWeight:700, color:"var(--brand-navy)"}}>Total compra: <span className="num">₡25,200.00</span></div>
        <div style={{display:"flex", gap:8, marginTop:12}}>
          <button className="app-btn green" style={{height:36, padding:"0 16px"}}><Icon name="check" size={12}/>Registrar compra (suma al inventario)</button>
          <button className="app-btn" style={{height:36}}>Cancelar</button>
        </div>
      </div>
    </div>
  </>
);

const ScreenPersonal = () => (
  <>
    <AppTopbar title="Gestión de personal" />
    <div className="app-body">
      <div style={{display:"flex", justifyContent:"flex-end", marginBottom:12}}>
        <button className="app-btn cyan"><Icon name="plus" size={11}/>Nuevo empleado</button>
      </div>
      <table className="app-table" style={{border:"1px solid var(--line)", borderRadius:8, overflow:"hidden"}}>
        <thead><tr><th>Nombre</th><th>Puesto</th><th>Teléfono</th><th>Email</th><th>Comisión</th><th>Acciones</th></tr></thead>
        <tbody>
          {[
            ["María Rodríguez","Estilista senior","8888-1122","maria.rodriguez01@example.cr","15%"],
            ["Kimberly Godínez","Manicurista","9988-7766","kimberly@example.cr","10%"],
            ["Ferlly Feita","Asistente","7766-5566","—","0%"],
            ["Encarnación Sánchez","Recepción","7878-7811","—","0%"],
          ].map((r,i)=>(
            <tr key={i}>
              <td><b>{r[0]}</b></td>
              <td>{r[1]}</td>
              <td className="num">{r[2]}</td>
              <td className="num" style={{fontSize:11, color:"var(--ink-3)"}}>{r[3]}</td>
              <td className="num">{r[4]}</td>
              <td><div className="app-actions"><button className="app-btn cyan"><Icon name="edit" size={11}/>Editar</button><button className="app-btn" style={{background:"var(--risk-high)", color:"white", borderColor:"var(--risk-high)"}}>Eliminar</button></div></td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  </>
);

const ScreenPublicidad = () => (
  <>
    <AppTopbar title="Publicidad y promociones" />
    <div className="app-body">
      <div style={{display:"flex", justifyContent:"flex-end", gap:6, marginBottom:12}}>
        <button className="app-btn primary"><Icon name="file" size={11}/>Ver catálogo PDF</button>
        <button className="app-btn cyan"><Icon name="plus" size={11}/>Nueva promoción</button>
      </div>
      <div className="promo-banner">
        <div className="pb-lbl">Enviar catálogo a clientes</div>
        <p>El catálogo PDF se adjunta por correo. Por SMS se envía un texto con el enlace.</p>
        <button className="app-btn green" style={{height:34}}><Icon name="mail" size={12}/>Enviar catálogo a clientes…</button>
      </div>
      <div className="promo-grid">
        {[
          ["Promoción del Mes de Junio","Todos los productos del mes.","Vigente","green"],
          ["Combo Novias 2026","Maquillaje + peinado + uñas.","Vigente","green"],
          ["Promo San Valentín","Expirada el 28/02.","Expirada","gray"],
        ].map((p,i)=>(
          <div className="promo-card" key={i}>
            <div className="promo-cover">
              <div className="pages">
                <div className="pg"><span/><span/><span/></div>
                <div className="pg"><span/><span/><span/></div>
              </div>
            </div>
            <div className="promo-body">
              <h4>{p[0]}</h4>
              <div className="pd">{p[1]}</div>
              <div><span className={`pill ${p[3]==="green"?"green":"gray"}`}>{p[2]}</span></div>
              <div className="pacts">
                <button className="app-btn green"><Icon name="arrow_r" size={11}/>Compartir</button>
                <button className="app-btn cyan"><Icon name="mail" size={11}/>Enviar</button>
                <a style={{color:"var(--brand-accent)", fontSize:11}}>Editar</a>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  </>
);

const ScreenConfig = () => (
  <>
    <AppTopbar title="Configuración del sistema" />
    <div className="app-body">
      <div style={{fontSize:13, color:"var(--ink-2)", marginBottom:16}}>Empresa, impuestos, Hacienda y servidor de correo.</div>
      <div className="cfg-grid">
        {[
          ["bldg","Datos de la empresa","Identificación fiscal, dirección y actividad económica.","var(--brand-navy)"],
          ["pct","Impuestos","Tarifa de IVA por defecto (13%, 4%, 2%, 1%, exento).","var(--brand-accent-2)"],
          ["file","Hacienda (FE 4.4)","Ambiente, credenciales TRIBU-CR, certificado .p12 y consecutivos.","var(--brand-navy)"],
          ["mail","Servidor de correo","SMTP para enviar facturas y comprobantes al cliente.","var(--brand-accent)"],
        ].map((c,i)=>(
          <div className="cfg-card" key={i}>
            <div className="cfg-ic" style={{background:c[3]}}><Icon name={c[0]} size={24}/></div>
            <h4>{c[1]}</h4>
            <p>{c[2]}</p>
          </div>
        ))}
      </div>
    </div>
  </>
);

const ScreenLogin = () => (
  <div className="login-frame">
    <div className="login-left">
      <div className="mk-big">F</div>
      <h2><em>FashionOne</em><br/>tu salón, bajo control</h2>
      <div className="desc" style={{marginTop:12}}>
        Sistema integral para salones de belleza y peluquerías. Citas, clientes, servicios,
        punto de venta, inventario y facturación electrónica — todo en un solo lugar.
      </div>
      <div className="chips">
        <div className="login-chip">14<br/><span style={{opacity:0.8, fontSize:9}}>SERVICIOS</span></div>
        <div className="login-chip">CRM<br/><span style={{opacity:0.8, fontSize:9}}>CLIENTES</span></div>
        <div className="login-chip">FE 4.4<br/><span style={{opacity:0.8, fontSize:9}}>HACIENDA</span></div>
      </div>
      <div style={{position:"absolute", bottom:18, left:36, fontFamily:"var(--f-mono)", fontSize:10, letterSpacing:".1em", opacity:0.65}}>ARGUEDASONE · CALIDAD &amp; SERVICIO</div>
    </div>
    <div className="login-right">
      <div className="ttl">FashionOne</div>
      <div className="sb">SALONES · BELLEZA · PELUQUERÍAS</div>
      <input className="login-input" placeholder="Correo electrónico" style={{marginTop:22}} defaultValue="admin@fashionone.cr"/>
      <input className="login-input" placeholder="Contraseña" type="password" defaultValue="········"/>
      <button className="login-btn">→ Entrar</button>
      <label style={{fontSize:12, color:"var(--ink-2)", marginTop:12, display:"flex", alignItems:"center", gap:6}}>
        <input type="checkbox"/> Recordarme en este equipo
      </label>
      <div style={{borderTop:"1px solid var(--line-soft)", margin:"18px 0"}}/>
      <div style={{fontSize:12, color:"var(--ink-3)", textAlign:"center"}}>¿Necesita acceso? Contacte al administrador del sistema.</div>
    </div>
  </div>
);

/* ================================================================
   Map screen id → component
   ================================================================ */
const SCREENS = {
  inicio: ScreenInicio,
  agenda: ScreenAgenda,
  clientes: ScreenClientes,
  servicios: ScreenServicios,
  cobro: ScreenCobro,
  facturacion: ScreenFacturacion,
  bodega: ScreenBodega,
  compras: ScreenCompras,
  personal: ScreenPersonal,
  publicidad: ScreenPublicidad,
  config: ScreenConfig,
  accesos: ScreenConfig,
  login: ScreenLogin,
};

/* ================================================================
   Preview shell
   ================================================================ */
const ProductPreview = ({ initial = "inicio", showTabs = true }) => {
  const [screen, setScreen] = useState(initial);
  const Comp = SCREENS[screen] || ScreenInicio;
  const isLogin = screen === "login";

  const TABS = [
    { id: "inicio", label: "Inicio" },
    { id: "agenda", label: "Agenda" },
    { id: "clientes", label: "Clientes" },
    { id: "servicios", label: "Servicios" },
    { id: "cobro", label: "Cobro" },
    { id: "facturacion", label: "Facturación" },
    { id: "bodega", label: "Inventario" },
    { id: "compras", label: "Compras" },
    { id: "publicidad", label: "Publicidad" },
    { id: "config", label: "Configuración" },
    { id: "login", label: "Login" },
  ];

  return (
    <>
      {showTabs && (
        <div className="preview-tabs">
          {TABS.map((t)=>(
            <button key={t.id} className={`preview-tab ${screen===t.id?"active":""}`} onClick={()=>setScreen(t.id)}>
              {t.label}
            </button>
          ))}
        </div>
      )}
      <div className="preview-shell">
        <div className="preview-titlebar">
          <div className="dots"><span className="dot"/><span className="dot"/><span className="dot"/></div>
          <div className="url">app.fashionone.cr / {screen}</div>
          <div style={{fontFamily:"var(--f-mono)", fontSize:10}}>v4.4</div>
        </div>
        <div className="preview-frame" style={isLogin ? {gridTemplateColumns: "1fr"} : {}}>
          {!isLogin && <AppSidebar active={screen} onChange={setScreen}/>}
          <div className="app-main">
            <Comp/>
          </div>
        </div>
      </div>
    </>
  );
};

window.ProductPreview = ProductPreview;
window.Icon = Icon;