/* Pantalla 5 — Configuración de la cuenta */

function Toggle({ on }) {
  const [v, setV] = React.useState(on);
  return <div className={`tg${v ? ' on' : ''}`} onClick={() => setV(!v)}></div>;
}

function PanelUsers() {
  return (
    <div>
      <div className="set-head">
        <div>
          <div className="t">Usuarios</div>
          <div className="s">Operarios, supervisores y administradores de tu planta. Asígnalos a una planta y módulo. La inactivación nunca borra datos.</div>
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          <button className="btn btn-ghost"><Icon name="boxes" />Carga masiva</button>
          <button className="btn btn-primary"><Icon name="plus" />Invitar</button>
        </div>
      </div>
      <div className="block" style={{ overflow: 'hidden' }}>
        <table className="dt" style={{ minWidth: 0 }}>
          <thead>
            <tr>
              <th style={{ paddingLeft: 22 }}>Nombre</th><th>Rol</th><th>Planta</th><th>Módulo</th><th>Estado</th><th></th>
            </tr>
          </thead>
          <tbody>
            {window.USERS.map((u) => (
              <tr key={u.email} style={{ cursor: 'default' }}>
                <td style={{ paddingLeft: 22 }}><div className="namecell">
                  <div className="rail-av" style={{ width: 30, height: 30, fontSize: 11, background: u.tile === 'cl' ? 'var(--clay)' : 'var(--sand-2)', color: u.tile === 'cl' ? '#fff' : 'var(--ink-2)' }}>{u.init}</div>
                  <span className="nm">{u.n}<small>{u.email}</small></span>
                </div></td>
                <td className="muted">{u.role}</td>
                <td className="muted">{u.plant}</td>
                <td className="muted m">{u.mod}</td>
                <td>{u.on ? <Pill kind="ok">Activo</Pill> : <Pill kind="wt">Inactivo</Pill>}</td>
                <td style={{ width: 50 }}><Toggle on={u.on} /></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

function PanelPlants() {
  const plants = [
    { n: 'Planta Norte', a: 'Cra. 50 #80-22, Medellín', shift: 'Turno A · 07:00–17:00', mods: ['Corte A', 'Costura 1', 'Costura 2', 'Ensamble', 'Empaque'] },
    { n: 'Planta Sur', a: 'Cl. 10 #40-15, Itagüí', shift: 'Turno B · 06:00–14:00', mods: ['Corte B', 'Costura 3', 'Empaque'] },
  ];
  return (
    <div>
      <div className="set-head">
        <div>
          <div className="t">Plantas y módulos</div>
          <div className="s">Tus plantas físicas y las celdas/módulos dentro de cada una. El turno se asigna a la planta; un módulo puede sobreescribirlo.</div>
        </div>
        <button className="btn btn-primary"><Icon name="plus" />Nueva planta</button>
      </div>
      <div className="plant-grid">
        {plants.map((p) => (
          <div className="plant" key={p.n}>
            <div className="ph">
              <div>
                <div className="pn">{p.n}</div>
                <div className="pa">{p.a}</div>
              </div>
              <span className="shift">{p.shift}</span>
            </div>
            <div className="mods">
              {p.mods.map((m) => <span className="mod" key={m}><span className="md"></span>{m}</span>)}
              <span className="mod" style={{ borderStyle: 'dashed', color: 'var(--stone)' }}><Icon name="plus" style={{ width: 13, height: 13, strokeWidth: 2, stroke: 'currentColor' }} />Módulo</span>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function PanelShifts() {
  return (
    <div>
      <div className="set-head">
        <div>
          <div className="t">Turnos</div>
          <div className="s">Plantillas reutilizables con pausas y horas extra. Las franjas horarias se calculan dinámicamente — solo se permite marcar dentro del turno + extras.</div>
        </div>
        <button className="btn btn-primary"><Icon name="plus" />Nuevo turno</button>
      </div>
      <div className="shift-card">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div>
            <div className="pn disp" style={{ fontWeight: 700, fontSize: 16 }}>Turno A — Diurno</div>
            <div className="pa" style={{ color: 'var(--stone)', fontSize: 12, marginTop: 3 }}>Asignado a · Planta Norte</div>
          </div>
          <span className="shift mono">07:00 – 17:00</span>
        </div>
        <div className="timeline">
          <div className="tl-seg work" style={{ flexBasis: '20%' }}>07–09</div>
          <div className="tl-seg brk" style={{ flexBasis: '6%' }}>☕</div>
          <div className="tl-seg work" style={{ flexBasis: '28%' }}>09–12</div>
          <div className="tl-seg brk" style={{ flexBasis: '9%' }}>🍽</div>
          <div className="tl-seg work" style={{ flexBasis: '27%' }}>13–17</div>
          <div className="tl-seg ot" style={{ flexBasis: '10%' }}>+2h</div>
        </div>
        <div style={{ display: 'flex', gap: 16, marginTop: 14, fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--stone)' }}>
          <span><span style={{ color: 'var(--ok-tx)' }}>■</span> Trabajo</span>
          <span><span style={{ color: 'var(--warn-tx)' }}>■</span> Pausa (desayuno 15m · almuerzo 45m)</span>
          <span><span style={{ color: 'var(--clay-tx)' }}>■</span> Hora extra 17:00–19:00</span>
        </div>
      </div>
    </div>
  );
}

function PanelRoles() {
  const roles = [
    { n: 'Admin', d: 'Acceso total a la configuración del tenant', perms: 27, users: 1, on: true },
    { n: 'Supervisor', d: 'Órdenes, marcaciones retroactivas, alertas', perms: 18, users: 3, on: true },
    { n: 'Operario', d: 'Marcar su propia producción en tablet', perms: 4, users: 24, on: true },
    { n: 'Analista', d: 'Lectura de reportes e inventario', perms: 6, users: 2, on: true },
    { n: 'Mecánico', d: 'Registrar tiempos improductivos de máquina', perms: 3, users: 2, on: false },
  ];
  return (
    <div>
      <div className="set-head">
        <div>
          <div className="t">Roles y permisos</div>
          <div className="s">27 permisos granulares. Al cambiar un rol se invalida la sesión y se re-evalúan los permisos al instante.</div>
        </div>
        <button className="btn btn-primary"><Icon name="plus" />Nuevo rol</button>
      </div>
      <div className="block">
        <table className="dt" style={{ minWidth: 0 }}>
          <thead><tr><th style={{ paddingLeft: 22 }}>Rol</th><th>Permisos</th><th>Usuarios</th><th>Estado</th></tr></thead>
          <tbody>
            {roles.map((r) => (
              <tr key={r.n} style={{ cursor: 'default' }}>
                <td style={{ paddingLeft: 22 }}><div className="namecell">
                  <div className="mtile cl"><Icon name="shield" style={{ width: 15, height: 15, strokeWidth: 1.8, stroke: 'var(--clay-tx)' }} /></div>
                  <span className="nm">{r.n}<small>{r.d}</small></span>
                </div></td>
                <td className="muted m">{r.perms} / 27</td>
                <td className="muted m">{r.users}</td>
                <td><Toggle on={r.on} /></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

function Settings({ onBack, onClose, embed }) {
  const [sec, setSec] = React.useState('users');
  const groups = [
    { g: 'Organización', items: [
      { id: 'plants', label: 'Plantas y módulos', icon: 'factory' },
      { id: 'shifts', label: 'Turnos', icon: 'clock' },
    ] },
    { g: 'Equipo', items: [
      { id: 'users', label: 'Usuarios', icon: 'users' },
      { id: 'roles', label: 'Roles y permisos', icon: 'shield' },
      { id: 'invites', label: 'Invitaciones', icon: 'plus' },
    ] },
    { g: 'Catálogo', items: [
      { id: 'statuses', label: 'Estados de orden', icon: 'flag' },
      { id: 'downtime', label: 'Tiempos improductivos', icon: 'pause' },
    ] },
  ];
  const panels = { users: <PanelUsers />, plants: <PanelPlants />, shifts: <PanelShifts />, roles: <PanelRoles /> };
  const canOpen = (id) => embed ? id === 'users' : !!panels[id];

  return (
    <div className="panel fade-in">
      <TopBar onBack={onBack} onClose={onClose}
        crumb={<div className="crumb"><b>{window.TENANT.name}</b><span className="sep">·</span>Configuración</div>} />
      <div className="head" style={{ paddingBottom: 14 }}>
        <div className="page-h1">Configuración de la cuenta</div>
      </div>
      <div className="set-shell">
        <div className="set-rail">
          {groups.map((grp) => (
            <div key={grp.g}>
              <div className="grp">{grp.g}</div>
              {grp.items.map((it) => (
                <a key={it.id} className={(sec === it.id ? 'on' : '') + (canOpen(it.id) ? '' : ' locked')}
                  onClick={() => canOpen(it.id) && setSec(it.id)}>
                  <Icon name={it.icon} />{it.label}
                </a>
              ))}
            </div>
          ))}
        </div>
        <div className="set-main">
          {panels[(embed && sec !== 'users') ? 'users' : sec] || <PanelUsers />}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Settings });