/* ============================================================
   VegaFácil — App root (login · shell · roles · tweaks)
   ============================================================ */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": ["#1f5c3d", "#18492f", "#5a9b78", "#e7f0ea"],
  "fonts": "bricolage-outfit",
  "radius": 16
}/*EDITMODE-END*/;

const FONT_MAP = {
  "bricolage-outfit": { head: '"Bricolage Grotesque"', body: '"Outfit"', label: "Bricolage + Outfit" },
  "bricolage-inter":  { head: '"Bricolage Grotesque"', body: '"Inter"',  label: "Bricolage + Inter" },
  "space-inter":      { head: '"Space Grotesk"',       body: '"Inter"',  label: "Space Grotesk + Inter" },
};

const ROLES = [
  { role: "comerciante", user: "rosa",   label: "Comerciante", emoji: "🧺" },
  { role: "repartidor",  user: "matías", label: "Repartidor",  emoji: "🚚" },
  { role: "dueño",       user: "carmen", label: "Dueño",       emoji: "👩‍🌾" },
];

function Login({ onLogin }) {
  const { users } = window.VEGA;
  const [u, setU] = useState(""); const [p, setP] = useState(""); const [err, setErr] = useState(false);
  const submit = (e) => {
    e && e.preventDefault();
    const found = users.find((x) => x.user.toLowerCase() === u.trim().toLowerCase() && x.pass === p);
    if (found) onLogin(found); else setErr(true);
  };
  return (
    <div className="login-wrap">
      <div className="login-bg"></div>
      <form className="login-card" onSubmit={submit}>
        <div className="login-logo">
          <div className="lm">P</div>
          <div className="lt">Pedido<em>Fácil</em></div>
        </div>
        <p className="muted" style={{ marginTop: -10, marginBottom: 20, fontSize: 14 }}>Pedidos mayoristas · La Vega Central</p>

        <div className="field">
          <label>Usuario</label>
          <div style={{ position: "relative" }}>
            <span style={{ position: "absolute", left: 13, top: "50%", transform: "translateY(-50%)", color: "var(--muted-2)" }}><Icon name="user" size={17} /></span>
            <input className="inp" style={{ paddingLeft: 40 }} value={u} placeholder="tu usuario"
              onChange={(e) => { setU(e.target.value); setErr(false); }} autoFocus />
          </div>
        </div>
        <div className="field">
          <label>Clave</label>
          <div style={{ position: "relative" }}>
            <span style={{ position: "absolute", left: 13, top: "50%", transform: "translateY(-50%)", color: "var(--muted-2)" }}><Icon name="lock" size={17} /></span>
            <input className="inp" style={{ paddingLeft: 40 }} type="password" value={p} placeholder="••••"
              onChange={(e) => { setP(e.target.value); setErr(false); }} />
          </div>
        </div>
        {err && <div style={{ color: "var(--rojo)", fontSize: 13, fontWeight: 600, marginBottom: 10 }}>Usuario o clave incorrectos.</div>}
        <Btn variant="verde" block size="lg" type="submit">Ingresar</Btn>
        <p className="muted" style={{ textAlign: "center", fontSize: 12, margin: "12px 0 0" }}>El sistema detecta tu rol automáticamente.</p>

        <div className="demo-accts">
          <div className="dh">Cuentas de demostración</div>
          <div className="demo-row">
            {ROLES.map((r) => {
              const usr = users.find((x) => x.user === r.user);
              return (
                <button type="button" className="demo-chip" key={r.role} onClick={() => onLogin(usr)}>
                  <div className="e">{r.emoji}</div>
                  <div className="n">{r.label}</div>
                </button>
              );
            })}
          </div>
        </div>
      </form>
    </div>
  );
}

function RoleFab({ current, onPick }) {
  const [open, setOpen] = useState(false);
  const items = [
    ...ROLES.map((r) => ({ key: r.role, label: r.label, emoji: r.emoji })),
    { key: "sistema", label: "Sistema de diseño", emoji: "🎨" },
  ];
  return (
    <div className="role-fab">
      <span className="rf-cap">vista demo</span>
      {open && (
        <div className="rf-menu">
          {items.map((it) => (
            <button key={it.key} className={current === it.key ? "on" : ""} onClick={() => { onPick(it.key); setOpen(false); }}>
              <span className="e">{it.emoji}</span> {it.label}
            </button>
          ))}
        </div>
      )}
      <button className="rf-toggle" onClick={() => setOpen(!open)} aria-label="Cambiar vista">
        {open ? <Icon name="close" size={18} /> : <Icon name="layers" size={18} />}
      </button>
    </div>
  );
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [auth, setAuth] = useState(null);
  const [extraView, setExtraView] = useState(null); // "sistema"
  const [orders, setOrders] = useState(() => window.VEGA.orders.map((o) => ({ ...o, items: o.items.map((i) => ({ ...i })) })));
  const [costOverrides, setCostOverrides] = useState({});
  const [toast, showToast] = useToast();
  const nextOrderId = useRef(100);

  const f = FONT_MAP[t.fonts] || FONT_MAP["bricolage-outfit"];
  const styleVars = {
    "--verde": t.palette[0], "--verde-700": t.palette[1], "--verde-300": t.palette[2], "--verde-soft": t.palette[3],
    "--font-head": f.head + ", system-ui, sans-serif", "--font-body": f.body + ", system-ui, sans-serif",
    "--r-card": t.radius + "px",
  };

  const placeOrder = (items) => {
    const id = "o" + (nextOrderId.current++);
    setOrders((prev) => [...prev, { id, merchantId: auth.merchantId, time: "11:00", status: "pendiente", items }]);
  };
  const deliver = (id) => { setOrders((prev) => prev.map((o) => o.id === id ? { ...o, status: "entregado" } : o)); showToast("Entrega registrada"); };

  const activeRole = auth ? auth.role : null;
  const currentView = extraView || activeRole;

  const switchTo = (key) => {
    if (key === "sistema") { setExtraView("sistema"); return; }
    setExtraView(null);
    const r = ROLES.find((x) => x.role === key);
    const usr = window.VEGA.users.find((x) => x.user === r.user);
    setAuth(usr);
  };

  const Panel = (
    <TweaksPanel>
      <TweakSection label="Color" />
      <TweakColor label="Verde marca" value={t.palette}
        options={[
          ["#1f5c3d", "#18492f", "#5a9b78", "#e7f0ea"],
          ["#1d6b54", "#155343", "#5aa890", "#e3f1ec"],
          ["#3d6b1f", "#2f5318", "#7ba85a", "#ecf2e3"],
          ["#16524a", "#0f3f39", "#4f968c", "#e2efed"],
        ]}
        onChange={(v) => setTweak("palette", v)} />
      <TweakSection label="Tipografía" />
      <TweakSelect label="Familia" value={t.fonts}
        options={Object.keys(FONT_MAP).map((k) => ({ value: k, label: FONT_MAP[k].label }))}
        onChange={(v) => setTweak("fonts", v)} />
      <TweakSection label="Forma" />
      <TweakSlider label="Radio de tarjetas" value={t.radius} min={6} max={24} step={1} unit="px"
        onChange={(v) => setTweak("radius", v)} />
    </TweaksPanel>
  );

  if (!auth) {
    return <div className="app-stage" style={styleVars}><Login onLogin={(usr) => { setAuth(usr); setExtraView(null); }} />{Panel}</div>;
  }

  const roleLabel = ROLES.find((r) => r.role === activeRole)?.label || "";

  return (
    <div className="app-stage" style={styleVars}>
      {/* Topbar */}
      <div className="topbar">
        <div className="brand-mark">P</div>
        <div className="who">
          <b>Pedido<span style={{ color: "var(--tomate)" }}>Fácil</span></b>
          <span>{extraView === "sistema" ? "Sistema de diseño" : `${auth.name} · ${roleLabel}`}</span>
        </div>
        <div style={{ flex: 1 }}></div>
        <button className="add-btn" style={{ background: "#fff", border: "1px solid var(--line-2)", color: "var(--muted)" }}
          onClick={() => { setAuth(null); setExtraView(null); }} title="Cerrar sesión">
          <Icon name="logout" size={17} />
        </button>
      </div>

      {/* Vista activa */}
      {currentView === "sistema"     && <DesignSystemView />}
      {currentView === "comerciante" && <MerchantView merchantId={auth.merchantId} onPlaceOrder={(items) => { placeOrder(items); showToast("Pedido enviado a bodega"); }} />}
      {currentView === "repartidor"  && <DriverView orders={orders} onDeliver={deliver} />}
      {currentView === "dueño"       && <OwnerView orders={orders} marginDefault={20} costOverrides={costOverrides} setCostOverrides={setCostOverrides} />}

      {toast}
      <RoleFab current={currentView} onPick={switchTo} />
      {Panel}
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);