// QRUZH — Códigos de barras, Exportaciones, Multimedia, Usuarios v2
const { useState: useStateC, useMemo: useMemoC, useEffect: useEffectC } = React;
const { PRODUCTS: PC, PERMISSIONS: PERMC } = window.QRUZH_DATA;
const { fmtMXN: fmtC, Barcode: BCC } = window.QRUZH_HELPERS;
const getApi = () => window.QRUZH_API;

// ==================== CÓDIGOS DE BARRAS ====================
const Codigos = () => {
  const [selected, setSelected] = useStateC([PC[0], PC[2], PC[5]]);
  const [perRow, setPerRow] = useStateC(3);
  const [copies, setCopies] = useStateC(8);
  return (
    <div className="page">
      <div className="page-head">
        <div><div className="page-title">Generar códigos de barras</div><div className="page-sub">Selecciona productos, define la cantidad de etiquetas y exporta a PDF o imprime directo desde admin.qruzh.com.mx.</div></div>
        <div className="row">
          <button className="btn"><Icon name="download" size={14}/> CSV</button>
          <button className="btn"><Icon name="download" size={14}/> PDF</button>
          <button className="btn primary"><Icon name="barcode" size={14}/> Imprimir lote</button>
        </div>
      </div>
      <div className="split">
        <div className="card">
          <div className="card-head"><div><div className="card-title">Productos seleccionados</div><div className="card-sub">{selected.length} productos · {selected.length * copies} etiquetas en total</div></div><button className="btn sm"><Icon name="plus" size={12}/> Agregar</button></div>
          <div className="card-pad">
            {selected.map(p => (
              <div key={p.sku} className="row" style={{ padding: "12px 0", borderBottom: "1px solid var(--line-1)", gap: 14 }}>
                <div className="img-ph" style={{ width: 44, height: 44 }}>IMG</div>
                <div style={{ flex: 1, minWidth: 0 }}><div style={{ fontSize: 13.5, fontWeight: 500 }}>{p.short}</div><div className="mono" style={{ fontSize: 10.5, color: "var(--ink-4)", marginTop: 2 }}>{p.barcode} · {p.sku.slice(0, 32)}…</div></div>
                <div className="row" style={{ gap: 6 }}><button className="btn-icon">−</button><input className="input mono" style={{ width: 56, textAlign: "center", padding: "5px 8px" }} defaultValue={copies}/><button className="btn-icon">+</button></div>
                <button className="btn-icon" onClick={() => setSelected(selected.filter(x => x.sku !== p.sku))}><Icon name="close" size={12}/></button>
              </div>
            ))}
            <div className="row" style={{ marginTop: 16, gap: 14, padding: "14px 16px", background: "var(--bg-sunken)", borderRadius: 10 }}>
              <div className="field" style={{ flex: 1 }}><label>Tamaño etiqueta</label><select className="select"><option>40 × 25 mm (estándar)</option><option>50 × 30 mm</option></select></div>
              <div className="field" style={{ flex: 1 }}><label>Etiquetas por fila</label><select className="select" value={perRow} onChange={e => setPerRow(+e.target.value)}><option value={2}>2 columnas</option><option value={3}>3 columnas</option><option value={4}>4 columnas</option></select></div>
              <div className="field" style={{ flex: 1 }}><label>Incluir</label><select className="select"><option>Código + SKU + precio</option><option>Sólo código</option><option>Código + descripción</option></select></div>
            </div>
          </div>
        </div>
        <div className="card">
          <div className="card-head"><div className="card-title">Vista previa de hoja</div><span className="pill outline mono">A4 · {selected.length * copies} etiquetas</span></div>
          <div style={{ background: "var(--bg-sunken)", padding: 24, display: "flex", justifyContent: "center" }}>
            <div style={{ background: "#fff", padding: 18, borderRadius: 4, boxShadow: "var(--shadow-1)", width: "100%", maxWidth: 360 }}>
              <div style={{ display: "grid", gridTemplateColumns: `repeat(${perRow}, 1fr)`, gap: 6 }}>
                {Array.from({ length: perRow * 4 }).map((_, i) => { const p = selected[i % selected.length] || PC[0]; return (<div key={i} className="label-preview" style={{ width: "100%", padding: "6px 8px" }}><div className="label-row"><span className="label-brand" style={{ fontSize: 7 }}>QRUZH</span></div><BCC code={p.barcode} height={24}/><div className="label-name" style={{ fontSize: 7.5, lineHeight: 1.15 }}>{p.short.slice(0, 28)}</div><div className="label-row"><span className="label-sku" style={{ fontSize: 6 }}>{p.barcode}</span><span className="label-price" style={{ fontSize: 9 }}>{fmtC(p.menudeo)}</span></div></div>); })}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

// ==================== EXPORTACIONES ====================
const Exportaciones = () => {
  const channels = [
    { id: "shopify", name: "Shopify", desc: "Catálogo + variantes + stock por sucursal", count: 1842, status: "synced", lastSync: "Hace 2 min", color: "oklch(60% 0.13 155)" },
    { id: "ml", name: "Mercado Libre", desc: "Listings activos · MLM-México", count: 412, status: "synced", lastSync: "Hace 14 min", color: "oklch(72% 0.14 75)" },
    { id: "amazon", name: "Amazon MX", desc: "FBA + FBM combinado", count: 87, status: "pending", lastSync: "Hace 2 h", color: "oklch(58% 0.19 254)" },
    { id: "tiendanube", name: "Tiendanube", desc: "Solo distribuidores LATAM", count: 0, status: "disabled", lastSync: "—", color: "oklch(60% 0.18 305)" },
  ];
  const exports = [
    { id: "csv-gen", name: "CSV general", icon: "download", desc: "Catálogo completo con todos los campos", rows: 2384 },
    { id: "xlsx", name: "Excel completo", icon: "download", desc: "Workbook con productos, inventario y precios", rows: 2384 },
    { id: "inv-tienda", name: "Inventario por tienda", icon: "box", desc: "Stock desglosado por sucursal", rows: 5128 },
    { id: "vendedores", name: "Catálogo vendedores", icon: "user", desc: "Sin costos, con precio menudeo y stock", rows: 1842 },
    { id: "mayoristas", name: "Catálogo mayoristas", icon: "tag", desc: "Con precio mayoreo + cantidad mínima", rows: 1842 },
  ];
  return (
    <div className="page">
      <div className="page-head"><div><div className="page-title">Exportaciones & canales</div><div className="page-sub">Prepara catálogos para Shopify, Mercado Libre, Amazon, Tiendanube o descarga archivos genéricos.</div></div><button className="btn"><Icon name="history" size={14}/> Historial</button></div>
      <div className="card" style={{ marginBottom: 18 }}>
        <div className="card-head"><div><div className="card-title">Canales conectados</div><div className="card-sub">Sincronización bidireccional · stock físico = stock online</div></div><button className="btn sm"><Icon name="plus" size={12}/> Conectar canal</button></div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 1, background: "var(--line-1)" }}>
          {channels.map(c => (
            <div key={c.id} style={{ background: "var(--bg-elev)", padding: 20 }}>
              <div className="row" style={{ marginBottom: 10 }}>
                <div style={{ width: 32, height: 32, borderRadius: 8, background: c.color, color: "#fff", display: "grid", placeItems: "center", fontFamily: "var(--font-mono)", fontWeight: 700, fontSize: 12 }}>{c.name.slice(0, 1)}</div>
                <div style={{ flex: 1 }}><div style={{ fontSize: 14, fontWeight: 600 }}>{c.name}</div><div style={{ fontSize: 11.5, color: "var(--ink-4)" }}>{c.desc}</div></div>
                {c.status === "synced" && <span className="pill ok"><Icon name="sync" size={10}/> Sincronizado</span>}
                {c.status === "pending" && <span className="pill warn"><span className="dot"/>Pendiente</span>}
                {c.status === "disabled" && <span className="pill outline">Desactivado</span>}
              </div>
              <div className="row" style={{ marginTop: 14, fontSize: 12, color: "var(--ink-4)" }}>
                <span><span className="mono" style={{ color: "var(--ink-1)", fontWeight: 600 }}>{c.count.toLocaleString()}</span> productos</span>
                <span style={{ marginLeft: 16 }}>Última sync: {c.lastSync}</span>
                <div className="spacer"/><button className="btn sm">Validar</button><button className="btn sm" style={{ marginLeft: 6 }}>Sincronizar</button>
              </div>
            </div>
          ))}
        </div>
      </div>
      <div className="card">
        <div className="card-head"><div className="card-title">Exportadores genéricos</div><span className="pill outline">Admin / Supervisor</span></div>
        <div className="tbl-wrap">
          <table className="tbl">
            <thead><tr><th></th><th>Exportación</th><th>Descripción</th><th className="num">Filas</th><th>Vista previa</th><th>Validación</th><th></th></tr></thead>
            <tbody>{exports.map(e => (<tr key={e.id}><td style={{ width: 36 }}><Icon name={e.icon} size={16}/></td><td className="cell-strong">{e.name}</td><td className="muted">{e.desc}</td><td className="num mono">{e.rows.toLocaleString()}</td><td><button className="btn ghost sm"><Icon name="eye" size={12}/> Ver</button></td><td><span className="pill ok"><Icon name="check" size={10}/> OK</span></td><td><button className="btn primary sm"><Icon name="download" size={12}/> Descargar</button></td></tr>))}</tbody>
          </table>
        </div>
      </div>
    </div>
  );
};

// ==================== MULTIMEDIA ====================
const Multimedia = () => {
  const items = PC.slice(0, 12);
  return (
    <div className="page">
      <div className="page-head"><div><div className="page-title">Multimedia</div><div className="page-sub">Gestiona imágenes, videos y URLs externas. <strong>Las imágenes nunca se guardan en VPS</strong> — sólo links a Shopify, Cloudflare R2 o Drive.</div></div><div className="row"><span className="pill warn">38 productos sin imagen</span><button className="btn primary"><Icon name="link" size={14}/> Vincular URL</button></div></div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 14 }}>
        {items.map(p => (
          <div key={p.sku} className="card" style={{ overflow: "hidden" }}>
            <div className="img-ph" style={{ borderRadius: 0, height: 180, fontSize: 10 }}>{p.imagen ? `IMG · ${p.color}` : "PENDIENTE DE IMAGEN"}</div>
            <div style={{ padding: 12 }}>
              <div style={{ fontSize: 12.5, fontWeight: 500, marginBottom: 6, lineHeight: 1.3 }}>{p.short}</div>
              <div className="mono" style={{ fontSize: 9.5, color: "var(--ink-4)", marginBottom: 10 }}>{p.sku.slice(0, 30)}…</div>
              <div style={{ display: "flex", flexDirection: "column", gap: 4, fontSize: 11 }}>
                <div className="row" style={{ justifyContent: "space-between" }}><span style={{ color: "var(--ink-4)" }}>Imagen principal</span>{p.imagen ? <span className="pill ok"><Icon name="check" size={9}/></span> : <span className="pill warn"><span className="dot"/></span>}</div>
                <div className="row" style={{ justifyContent: "space-between" }}><span style={{ color: "var(--ink-4)" }}>Video</span><span className="pill outline">—</span></div>
                <div className="row" style={{ justifyContent: "space-between" }}><span style={{ color: "var(--ink-4)" }}>Shopify Media</span>{p.canales.includes("shopify") ? <span className="pill ok"><Icon name="link" size={9}/></span> : <span className="pill outline">—</span>}</div>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

// ==================== USUARIOS (CRUD REAL) ====================
const ROLE_OPTS = ["ADMIN", "SUPERVISOR", "ALMACEN", "VENDEDOR", "DISTRIBUIDOR"];
const STORE_OPTS = ["Todas", "Almacén", "Chedraui", "Outlet", "Externo"];
const ROLE_COLOR = { ADMIN: "", SUPERVISOR: "accent", ALMACEN: "ok", VENDEDOR: "warn", DISTRIBUIDOR: "outline" };
const ROLE_LABEL = { ADMIN: "Admin", SUPERVISOR: "Supervisor", ALMACEN: "Almacén", VENDEDOR: "Vendedor", DISTRIBUIDOR: "Distribuidor" };

const Usuarios = ({ user }) => {
  const [users, setUsers] = useStateC([]);
  const [loading, setLoading] = useStateC(true);
  const [showModal, setShowModal] = useStateC(false);
  const [deleting, setDeleting] = useStateC(null);
  const [form, setForm] = useStateC({ name: "", email: "", password: "", role: "VENDEDOR", store: "Outlet" });
  const [formErr, setFormErr] = useStateC("");
  const [saving, setSaving] = useStateC(false);
  const [showModalPass, setShowModalPass] = useStateC(false);
  const isAdmin = user && user.role === "ADMIN";

  const loadUsers = async () => {
    setLoading(true);
    const { ok, data } = await getApi().get("/api/users");
    if (ok) setUsers(data);
    setLoading(false);
  };

  useEffectC(() => { if (isAdmin) loadUsers(); }, []);

  const handleAdd = async () => {
    // C4: Validación de contraseña mínima (defensa en profundidad — backend también valida)
    if (!form.name || !form.email || !form.password) { setFormErr("Nombre, correo y contraseña son obligatorios"); return; }
    if (form.password.length < 8) { setFormErr("La contraseña debe tener al menos 8 caracteres"); return; }
    if (!/[A-Z]/.test(form.password)) { setFormErr("La contraseña debe incluir al menos una mayúscula"); return; }
    if (!/[0-9]/.test(form.password)) { setFormErr("La contraseña debe incluir al menos un número"); return; }
    // C4: Verificar que quien crea es ADMIN según JWT (no sessionStorage)
    const _token = getApi().token();
    if (_token && window.QRUZH_SECURITY) {
      const _p = window.QRUZH_SECURITY.decodeJWT(_token);
      if (!_p || (_p.role !== "ADMIN" && _p.role !== "SUPERVISOR")) {
        setFormErr("No tienes permisos para crear usuarios"); return;
      }
    }
    setSaving(true); setFormErr("");
    try {
      const { ok, data } = await getApi().post("/api/users", form);
      setSaving(false);
      if (!ok) { setFormErr(data.error || "Error al crear usuario"); return; }
      setShowModal(false);
      setForm({ name: "", email: "", password: "", role: "VENDEDOR", store: "Outlet" });
      loadUsers();
    } catch(e) {
      setSaving(false);
      setFormErr("Error: " + (e.message || "fallo inesperado"));
    }
  };

  const handleDelete = async (email) => {
    if (!window.confirm(`¿Eliminar a ${email}? Esta acción no se puede deshacer.`)) return;
    setDeleting(email);
    await getApi().del(`/api/users/${encodeURIComponent(email)}`);
    setDeleting(null);
    loadUsers();
  };

  const renderPerm = (v) => v === 1 ? <span className="perm-yes"><Icon name="check" size={14}/></span> : v === 0 ? <span className="perm-no">—</span> : <span className="perm-partial">parcial</span>;

  return (
    <div className="page">
      <div className="page-head">
        <div><div className="page-title">Usuarios y permisos</div><div className="page-sub">Gestiona accesos al nucleus · {users.length} usuario{users.length !== 1 ? "s" : ""} activo{users.length !== 1 ? "s" : ""}</div></div>
        {isAdmin && <button className="btn primary" onClick={() => setShowModal(true)}><Icon name="plus" size={14}/> Nuevo usuario</button>}
      </div>

      <div className="card" style={{ marginBottom: 18 }}>
        <div className="card-head"><div className="card-title">Equipo activo</div><span className="pill outline">{users.length} usuarios</span></div>
        {loading ? (
          <div style={{ padding: 32, textAlign: "center", color: "var(--ink-4)", fontSize: 13 }}>Cargando usuarios…</div>
        ) : (
          <div className="tbl-wrap">
            <table className="tbl">
              <thead><tr><th>Usuario</th><th>Rol</th><th>Tienda asignada</th><th>Nivel MLM</th>{isAdmin && <th></th>}</tr></thead>
              <tbody>
                {users.map(u => (
                  <tr key={u.email}>
                    <td>
                      <div className="row" style={{ gap: 10 }}>
                        <div className="avatar" style={{ width: 30, height: 30, fontSize: 11 }}>{u.name.split(" ").map(n => n[0]).slice(0,2).join("")}</div>
                        <div>
                          <div className="cell-strong">{u.name}</div>
                          <div className="muted" style={{ fontSize: 11 }}>{u.email}</div>
                        </div>
                      </div>
                    </td>
                    <td><span className={`pill ${ROLE_COLOR[u.role] || ""}`} style={!ROLE_COLOR[u.role] ? { background: "var(--ink-1)", color: "#fff" } : {}}>{ROLE_LABEL[u.role] || u.role}</span></td>
                    <td>{u.store}</td>
                    <td className="mono">N{u.level}</td>
                    {isAdmin && (
                      <td>
                        {u.email !== user.email && (
                          <button
                            className="btn ghost sm"
                            style={{ color: "var(--crit)" }}
                            onClick={() => handleDelete(u.email)}
                            disabled={deleting === u.email}
                          >
                            {deleting === u.email ? "Eliminando…" : <><Icon name="close" size={12}/> Eliminar</>}
                          </button>
                        )}
                      </td>
                    )}
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
      </div>

      <div className="card">
        <div className="card-head"><div><div className="card-title">Matriz de permisos</div><div className="card-sub">Permisos por rol · ✓ permitido · — denegado · parcial = requiere autorización</div></div></div>
        <div style={{ padding: 22 }}>
          <div className="perm-grid">
            <div className="perm-head">Permiso</div>
            <div className="perm-head" style={{ textAlign: "center" }}>Admin</div>
            <div className="perm-head" style={{ textAlign: "center" }}>Supervisor</div>
            <div className="perm-head" style={{ textAlign: "center" }}>Almacén</div>
            <div className="perm-head" style={{ textAlign: "center" }}>Vendedor</div>
            <div className="perm-head" style={{ textAlign: "center" }}>Distribuidor</div>
            {PERMC.map(p => (
              <React.Fragment key={p.name}>
                <div className="perm-name">{p.name}</div>
                <div style={{ textAlign: "center" }}>{renderPerm(p.a)}</div>
                <div style={{ textAlign: "center" }}>{renderPerm(p.s)}</div>
                <div style={{ textAlign: "center" }}>{renderPerm(p.w)}</div>
                <div style={{ textAlign: "center" }}>{renderPerm(p.v)}</div>
                <div style={{ textAlign: "center" }}>{renderPerm(p.d)}</div>
              </React.Fragment>
            ))}
          </div>
        </div>
      </div>

      {showModal && (
        <div className="modal-overlay" onClick={e => e.target === e.currentTarget && setShowModal(false)}>
          <div className="modal-card">
            <div className="modal-title">Nuevo usuario</div>
            <div className="modal-sub">Agrega un miembro al equipo QRUZH Master Raw</div>
            {formErr && <div className="login-error" style={{ marginBottom: 16 }}><span>⚠</span> {formErr}</div>}
            <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
              <div className="field">
                <label>Nombre completo</label>
                <input className="input" type="text" value={form.name} onChange={e => setForm(f => ({...f, name: e.target.value}))} placeholder="Ej. Fanny Ramos García"/>
              </div>
              <div className="field">
                <label>Correo electrónico</label>
                <input className="input" type="email" value={form.email} onChange={e => setForm(f => ({...f, email: e.target.value}))} placeholder="fanny@qruzh.com.mx"/>
              </div>
              <div className="field">
                <label>Contraseña inicial</label>
                <div style={{ position: "relative" }}>
                  <input className="input" type={showModalPass ? "text" : "password"} value={form.password} onChange={e => setForm(f => ({...f, password: e.target.value}))} placeholder="Mínimo 8 caracteres" style={{ paddingRight: 44 }}/>
                  <button className="pass-toggle" onClick={() => setShowModalPass(s => !s)} tabIndex={-1} style={{ position:"absolute", right:10, top:"50%", transform:"translateY(-50%)", background:"none", border:"none", cursor:"pointer", color:"var(--ink-3)", padding:4 }}><Icon name={showModalPass ? "eyeoff" : "eye"} size={16}/></button>
                </div>
              </div>
              <div className="row" style={{ gap: 12 }}>
                <div className="field" style={{ flex: 1 }}>
                  <label>Rol</label>
                  <select className="select" value={form.role} onChange={e => setForm(f => ({...f, role: e.target.value}))}>
                    {ROLE_OPTS.map(r => <option key={r} value={r}>{ROLE_LABEL[r] || r}</option>)}
                  </select>
                </div>
                <div className="field" style={{ flex: 1 }}>
                  <label>Tienda</label>
                  <select className="select" value={form.store} onChange={e => setForm(f => ({...f, store: e.target.value}))}>
                    {STORE_OPTS.map(s => <option key={s} value={s}>{s}</option>)}
                  </select>
                </div>
              </div>
            </div>
            <div className="row" style={{ gap: 10, marginTop: 24, justifyContent: "flex-end" }}>
              <button className="btn" onClick={() => { setShowModal(false); setFormErr(""); }}>Cancelar</button>
              <button className="btn primary" onClick={handleAdd} disabled={saving}>
                {saving ? "Guardando…" : <><Icon name="plus" size={14}/> Crear usuario</>}
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

window.QRUZH_SCREENS.Codigos = Codigos;
window.QRUZH_SCREENS.Exportaciones = Exportaciones;
window.QRUZH_SCREENS.Multimedia = Multimedia;
window.QRUZH_SCREENS.Usuarios = Usuarios;