/* ============================================================
   INside Cotizador Pro — Historial (Módulo F) + Settings (Módulo C)
   ============================================================ */

function QuotesView() {
  const { quotes, goTo, updateQuote, removeQuote, duplicateQuote, newQuote } = React.useContext(window.AppCtx);
  const [status, setStatus] = React.useState("ALL");
  const [confirm, setConfirm] = React.useState(null);

  const filtered = quotes.filter((q) => status === "ALL" || q.status === status);
  const monthTotal = quotes.reduce((s, q) => s + q.total, 0);
  const closed = quotes.filter((q) => q.status === "accepted").length;
  const decided = quotes.filter((q) => q.status === "accepted" || q.status === "rejected").length;
  const closeRate = decided ? (closed / decided) * 100 : 0;
  const avgMargin = quotes.length ? quotes.reduce((s, q) => s + q.margin_pct, 0) / quotes.length : 0;

  const STATUS_OPTS = [
    { value: "draft", label: "Borrador" }, { value: "sent", label: "Enviada" },
    { value: "accepted", label: "Ganada" }, { value: "rejected", label: "Perdida" },
  ];

  return (
    <div style={{ padding: "28px 36px 80px", maxWidth: 1400, margin: "0 auto" }}>
      <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", marginBottom: 24, gap: 20, flexWrap: "wrap" }}>
        <div>
          <div className="eyebrow">Módulo · Historial</div>
          <h1 className="page-title">Cotizaciones</h1>
          <p className="page-sub">{quotes.length} cotizaciones emitidas · cambia el estado directamente en la tabla</p>
        </div>
        <window.Btn variant="gold" icon="plus" onClick={newQuote}>Nueva cotización</window.Btn>
      </div>

      {/* KPIs */}
      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))", gap: 14, marginBottom: 24 }}>
        <Kpi label="Total cotizado · mes" value={window.fmtMoney(monthTotal)} accent />
        <Kpi label="Tasa de cierre" value={window.fmtPct(closeRate)} sub={`${closed} ganadas / ${decided} decididas`} />
        <Kpi label="Margen promedio" value={window.fmtPct(avgMargin)} sub={`ponderado sobre ${quotes.length} cotizaciones`} tier={avgMargin} />
        <Kpi label="En borrador" value={quotes.filter((q) => q.status === "draft").length} sub="pendientes de enviar" />
      </div>

      {/* filters */}
      <div className="seg sm" style={{ marginBottom: 14, width: "fit-content" }}>
        {[["ALL", "Todas"], ["draft", "Borrador"], ["sent", "Enviadas"], ["accepted", "Ganadas"], ["rejected", "Perdidas"]].map(([k, l]) => (
          <button key={k} className={status === k ? "on" : ""} onClick={() => setStatus(k)}>{l}</button>
        ))}
      </div>

      {/* table */}
      <window.Card pad={0} style={{ overflow: "hidden" }}>
        <table className="hist-table">
          <thead>
            <tr>
              <th>N.º</th><th>Proyecto</th><th>Cliente</th><th>Fecha</th>
              <th style={{ textAlign: "right" }}>Total</th><th style={{ textAlign: "right" }}>Margen</th>
              <th>Estado</th><th style={{ textAlign: "right" }}>Acciones</th>
            </tr>
          </thead>
          <tbody>
            {filtered.map((q) => (
              <tr key={q.id} className="hist-row">
                <td style={{ fontFamily: "var(--mono)", fontWeight: 600, color: "var(--gold)" }}>{q.quote_number}</td>
                <td style={{ fontWeight: 600, maxWidth: 240 }}>{q.project_name}</td>
                <td><div>{q.client_name}</div><div style={{ fontSize: 11, color: "var(--muted)" }}>{q.client_company}</div></td>
                <td style={{ fontFamily: "var(--mono)", fontSize: 12, color: "var(--muted)" }}>{new Date(q.date + "T00:00").toLocaleDateString("es-PA", { day: "2-digit", month: "short" })}</td>
                <td style={{ textAlign: "right", fontFamily: "var(--mono)", fontWeight: 600 }}>{window.fmtMoney(q.total)}</td>
                <td style={{ textAlign: "right" }}><window.MarginPill pct={q.margin_pct} /></td>
                <td>
                  <window.Select value={q.status} onChange={(v) => updateQuote(q.id, { status: v })} options={STATUS_OPTS}
                    style={{ minWidth: 116 }} title="Cambiar estado" />
                </td>
                <td>
                  <div style={{ display: "flex", gap: 4, justifyContent: "flex-end" }}>
                    <button className="iconbtn" title="Ver / editar" onClick={() => goTo("builder")}><window.Icon name="edit" size={15} /></button>
                    <button className="iconbtn" title="Ver PDF" onClick={() => goTo("pdf")}><window.Icon name="doc" size={15} /></button>
                    <button className="iconbtn" title="Duplicar" onClick={() => duplicateQuote(q.id)}><window.Icon name="copy" size={15} /></button>
                    <button className="iconbtn danger" title="Eliminar"
                      onClick={() => setConfirm({ title: "Eliminar cotización", message: `Se eliminará la cotización ${q.quote_number} — «${q.project_name}». Esta acción no se puede deshacer.`, onConfirm: () => removeQuote(q.id) })}>
                      <window.Icon name="trash" size={15} /></button>
                  </div>
                </td>
              </tr>
            ))}
            {filtered.length === 0 && (
              <tr><td colSpan={8} style={{ textAlign: "center", color: "var(--muted)", padding: 30 }}>No hay cotizaciones en este estado.</td></tr>
            )}
          </tbody>
        </table>
      </window.Card>

      <window.ConfirmModal open={!!confirm} title={confirm && confirm.title} message={confirm && confirm.message}
        onConfirm={() => confirm && confirm.onConfirm()} onClose={() => setConfirm(null)} />
    </div>
  );
}

function Kpi({ label, value, sub, accent, tier }) {
  const color = tier != null ? window.marginTier(tier).color : (accent ? "var(--gold)" : "var(--text)");
  return (
    <window.Card pad={17}>
      <div className="lbl">{label}</div>
      <div style={{ display: "flex", alignItems: "center", gap: 10, marginTop: 7 }}>
        <span style={{ fontFamily: "var(--mono)", fontSize: 24, fontWeight: 700, letterSpacing: "-.02em", color }}>{value}</span>
      </div>
      {sub && <div style={{ fontSize: 11.5, color: "var(--muted)", marginTop: 4 }}>{sub}</div>}
    </window.Card>
  );
}

// ============================================================
function SettingsView() {
  const { settings, setSettings, auth } = React.useContext(window.AppCtx);
  const cats = window.AppData.CATEGORIES;
  const isAdmin = auth && auth.session && auth.session.role === "admin";

  return (
    <div style={{ padding: "28px 36px 80px", maxWidth: 920, margin: "0 auto" }}>
      <div className="eyebrow">Módulo · Configuración</div>
      <h1 className="page-title">Configuración</h1>
      <p className="page-sub">Márgenes, impuestos y datos de la empresa</p>

      {/* margins */}
      <window.Card pad={22} style={{ marginTop: 22 }}>
        <h3 className="sect-title">Precios y márgenes</h3>
        <p className="sect-sub">Jerarquía: Global → Por categoría → Por producto → Override manual en cotización.</p>

        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "14px 0", borderBottom: "1px solid var(--border)" }}>
          <div>
            <div style={{ fontSize: 14, fontWeight: 600 }}>Margen global por defecto</div>
            <div style={{ fontSize: 12, color: "var(--muted)", marginTop: 2 }}>Se aplica si el producto no tiene margen propio ni de categoría.</div>
          </div>
          <PctInput value={settings.global_margin} onChange={(v) => setSettings({ global_margin: v })} />
        </div>

        <div style={{ marginTop: 16 }}>
          <div className="lbl" style={{ marginBottom: 10 }}>Margen por categoría (override)</div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(200px,1fr))", gap: 12 }}>
            {Object.keys(cats).map((c) => (
              <div key={c} style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "12px 14px",
                background: "var(--bg)", border: "1px solid var(--border)", borderRadius: 9 }}>
                <window.CatBadge cat={c} size="lg" />
                <PctInput value={settings.category_margin[c]} onChange={(v) => setSettings({ category_margin: { ...settings.category_margin, [c]: v } })} />
              </div>
            ))}
          </div>
        </div>

        <div style={{ display: "flex", gap: 20, marginTop: 20, flexWrap: "wrap" }}>
          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16, flex: "1 1 200px", padding: "12px 14px", background: "var(--bg)", border: "1px solid var(--border)", borderRadius: 9 }}>
            <div style={{ fontSize: 13.5, fontWeight: 600 }}>ITBMS</div>
            <PctInput value={settings.itbms_rate} onChange={(v) => setSettings({ itbms_rate: v })} />
          </div>
          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16, flex: "1 1 200px", padding: "12px 14px", background: "var(--bg)", border: "1px solid var(--border)", borderRadius: 9 }}>
            <div style={{ fontSize: 13.5, fontWeight: 600 }}>Validez por defecto</div>
            <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
              <input className="pct-inp" value={settings.valid_days} onChange={(e) => setSettings({ valid_days: parseInt(e.target.value) || 0 })} />
              <span style={{ color: "var(--muted)", fontSize: 13, fontFamily: "var(--mono)" }}>días</span>
            </div>
          </div>
        </div>
      </window.Card>

      {/* semáforo legend */}
      <window.Card pad={22} style={{ marginTop: 16 }}>
        <h3 className="sect-title">Indicadores de margen</h3>
        <p className="sect-sub">Código de color semafórico aplicado en todo el constructor.</p>
        <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
          {[["Bajo", "< 15%", 10], ["Aceptable", "15 – 25%", 20], ["Óptimo", "> 25%", 32]].map(([l, r, v]) => (
            <div key={l} style={{ flex: "1 1 180px", padding: "14px 16px", background: "var(--bg)", border: "1px solid var(--border)", borderRadius: 9 }}>
              <window.MarginPill pct={v} showLabel />
              <div style={{ fontSize: 12, color: "var(--muted)", marginTop: 8 }}>{l} · {r}</div>
            </div>
          ))}
        </div>
      </window.Card>

      {/* company */}
      <window.Card pad={22} style={{ marginTop: 16 }}>
        <h3 className="sect-title">Datos de la empresa</h3>
        <p className="sect-sub">Aparecen en el encabezado y pie del PDF exportado.</p>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
          <SField label="Nombre" value={settings.company_name} onChange={(v) => setSettings({ company_name: v })} />
          <SField label="RUC" value={settings.company_ruc} onChange={(v) => setSettings({ company_ruc: v })} mono />
          <SField label="Dirección" value={settings.company_address} onChange={(v) => setSettings({ company_address: v })} />
          <SField label="Teléfono" value={settings.company_phone} onChange={(v) => setSettings({ company_phone: v })} mono />
          <SField label="Web" value={settings.company_web} onChange={(v) => setSettings({ company_web: v })} mono />
          <SField label="Info bancaria" value={settings.bank_info} onChange={(v) => setSettings({ bank_info: v })} />
        </div>
        <div style={{ marginTop: 14 }}>
          <SField label="Lema (pie del PDF)" value={settings.tagline} onChange={(v) => setSettings({ tagline: v })} />
        </div>
      </window.Card>

      {/* usuarios y acceso */}
      <UsersCard auth={auth} isAdmin={isAdmin} />
    </div>
  );
}

// ---------- Usuarios y acceso ----------
function UsersCard({ auth, isAdmin }) {
  const { users, session, addUser, updateUser, removeUser } = auth;
  const [editing, setEditing] = React.useState(null); // user obj or "new"
  const [confirm, setConfirm] = React.useState(null);

  return (
    <window.Card pad={22} style={{ marginTop: 16 }}>
      <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: 16, flexWrap: "wrap" }}>
        <div>
          <h3 className="sect-title"><window.Icon name="lock" size={15} style={{ verticalAlign: "-2px", marginRight: 7 }} />Usuarios y acceso</h3>
          <p className="sect-sub" style={{ marginBottom: 0 }}>Quién puede entrar a la herramienta. Cada persona inicia sesión con su correo y contraseña.</p>
        </div>
        {isAdmin && <window.Btn variant="gold" icon="plus" size="sm" onClick={() => setEditing("new")}>Agregar usuario</window.Btn>}
      </div>

      {!isAdmin && (
        <div style={{ marginTop: 14, padding: "12px 14px", background: "var(--bg)", border: "1px solid var(--border)", borderRadius: 9,
          fontSize: 12.5, color: "var(--muted)", lineHeight: 1.5 }}>
          Solo el Administrador puede gestionar usuarios. Puedes cambiar tu propia contraseña abajo.
        </div>
      )}

      <div style={{ marginTop: 16, display: "flex", flexDirection: "column", gap: 8 }}>
        {users.map((u) => {
          const isMe = session && u.id === session.id;
          const canEdit = isAdmin || isMe;
          return (
            <div key={u.id} style={{ display: "flex", alignItems: "center", gap: 14, padding: "12px 14px",
              background: "var(--bg)", border: "1px solid var(--border)", borderRadius: 10 }}>
              <div className="user-avatar" style={{ width: 34, height: 34, fontSize: 13 }}>
                {(u.name || "?").split(" ").map((w) => w[0]).slice(0, 2).join("").toUpperCase()}
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 14, fontWeight: 600, display: "flex", alignItems: "center", gap: 8 }}>
                  {u.name}{isMe && <span style={{ fontSize: 10, fontWeight: 600, color: "var(--gold)", border: "1px solid var(--border-strong)", borderRadius: 5, padding: "1px 6px" }}>TÚ</span>}
                </div>
                <div style={{ fontSize: 12, color: "var(--muted)", fontFamily: "var(--mono)" }}>{u.email}</div>
              </div>
              <span style={{ fontSize: 10.5, fontWeight: 600, letterSpacing: ".06em", textTransform: "uppercase",
                color: u.role === "admin" ? "var(--gold)" : "var(--muted)",
                border: "1px solid var(--border)", borderRadius: 6, padding: "4px 9px" }}>
                {u.role === "admin" ? "Administrador" : "Asesor"}
              </span>
              {canEdit && (
                <button className="iconbtn" title="Editar" onClick={() => setEditing(u)}><window.Icon name="edit" size={15} /></button>
              )}
              {isAdmin && !isMe && (
                <button className="iconbtn danger" title="Eliminar acceso"
                  onClick={() => setConfirm({ title: "Eliminar acceso", message: `${u.name} (${u.email}) ya no podrá iniciar sesión. ¿Continuar?`, onConfirm: () => removeUser(u.id) })}>
                  <window.Icon name="trash" size={15} /></button>
              )}
            </div>
          );
        })}
      </div>

      <div style={{ marginTop: 14, fontSize: 11.5, color: "var(--faint)", lineHeight: 1.5, display: "flex", gap: 7 }}>
        <window.Icon name="lock" size={13} style={{ flexShrink: 0, marginTop: 1 }} />
        <span>Esta es una barrera de acceso del lado del navegador, apta para uso interno. Para seguridad de nivel producción (validación en servidor) se conecta un backend en la versión final.</span>
      </div>

      {editing && (
        <UserModal user={editing === "new" ? null : editing} isAdmin={isAdmin} session={session}
          onClose={() => setEditing(null)}
          onSave={(data) => { if (editing === "new") addUser(data); else updateUser(editing.id, data); setEditing(null); }} />
      )}
      <window.ConfirmModal open={!!confirm} title={confirm && confirm.title} message={confirm && confirm.message}
        confirmLabel="Eliminar" onConfirm={() => confirm && confirm.onConfirm()} onClose={() => setConfirm(null)} />
    </window.Card>
  );
}

function UserModal({ user, isAdmin, session, onClose, onSave }) {
  const isMe = session && user && user.id === session.id;
  const [f, setF] = React.useState({
    name: user ? user.name : "", email: user ? user.email : "",
    role: user ? user.role : "asesor", password: user ? user.password : "",
  });
  const set = (patch) => setF((s) => ({ ...s, ...patch }));
  const [showPass, setShowPass] = React.useState(!user);
  const valid = f.name.trim() && /\S+@\S+\.\S+/.test(f.email) && f.password.length >= 4;
  // role can only be changed by an admin (and not your own role)
  const roleLocked = !isAdmin || isMe;

  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()} style={{ width: 440 }}>
        <div className="modal-head">
          <div>
            <div className="eyebrow">Usuarios y acceso</div>
            <h3 style={{ margin: "3px 0 0", fontFamily: "var(--display)", fontSize: 19, fontWeight: 600 }}>{user ? "Editar usuario" : "Nuevo usuario"}</h3>
          </div>
          <button className="iconbtn" onClick={onClose}><window.Icon name="x" size={18} /></button>
        </div>
        <div style={{ padding: "6px 22px 4px", display: "flex", flexDirection: "column", gap: 12 }}>
          <div>
            <label className="field-lbl">Nombre completo</label>
            <input className="inp" autoFocus value={f.name} onChange={(e) => set({ name: e.target.value })} placeholder="Nombre del asesor" />
          </div>
          <div>
            <label className="field-lbl">Correo (usuario para entrar)</label>
            <input className="inp" type="email" value={f.email} onChange={(e) => set({ email: e.target.value })}
              placeholder="asesor@insideelementos.com" style={{ fontFamily: "var(--mono)" }} disabled={isMe && !isAdmin} />
          </div>
          <div>
            <label className="field-lbl">{user ? "Contraseña (edítala para cambiarla)" : "Contraseña"} <span style={{ color: "var(--muted)", fontWeight: 400, textTransform: "none" }}>· mín. 4 caracteres</span></label>
            <div style={{ position: "relative", display: "flex", alignItems: "center" }}>
              <input className="inp" type={showPass ? "text" : "password"} value={f.password} onChange={(e) => set({ password: e.target.value })}
                placeholder="••••••••" style={{ fontFamily: "var(--mono)", paddingRight: 38 }} />
              <button className="iconbtn" style={{ position: "absolute", right: 4 }} onClick={() => setShowPass((s) => !s)} title={showPass ? "Ocultar" : "Mostrar"}>
                <window.Icon name={showPass ? "eyeoff" : "eye"} size={16} /></button>
            </div>
          </div>
          <div>
            <label className="field-lbl">Rol</label>
            <window.Select value={f.role} onChange={(v) => set({ role: v })} style={{ width: "100%" }}
              options={[{ value: "asesor", label: "Asesor — cotiza y consulta" }, { value: "admin", label: "Administrador — gestiona todo" }]} />
            {roleLocked && <div style={{ fontSize: 11, color: "var(--muted)", marginTop: 5 }}>{isMe ? "No puedes cambiar tu propio rol." : "Solo un administrador puede cambiar roles."}</div>}
          </div>
        </div>
        <div className="modal-foot">
          <div style={{ flex: 1 }} />
          <window.Btn variant="outline" onClick={onClose}>Cancelar</window.Btn>
          <window.Btn variant="gold" icon="check" onClick={() => onSave(roleLocked && user ? { name: f.name.trim(), email: f.email.trim(), password: f.password } : { name: f.name.trim(), email: f.email.trim(), password: f.password, role: f.role })} disabled={!valid}>
            {user ? "Guardar" : "Crear usuario"}
          </window.Btn>
        </div>
      </div>
    </div>
  );
}

function PctInput({ value, onChange }) {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 4 }}>
      <input className="pct-inp" value={value} onChange={(e) => onChange(parseFloat(e.target.value) || 0)} />
      <span style={{ color: "var(--gold)", fontSize: 14, fontFamily: "var(--mono)", fontWeight: 600 }}>%</span>
    </div>
  );
}
function SField({ label, value, onChange, mono }) {
  return (
    <div>
      <label className="field-lbl">{label}</label>
      <input className="inp" value={value} onChange={(e) => onChange(e.target.value)} style={{ fontFamily: mono ? "var(--mono)" : "var(--body)" }} />
    </div>
  );
}

window.QuotesView = QuotesView;
window.SettingsView = SettingsView;