// portal.jsx — main portal shell (sidebar + detail) for tenant_admin / member / super_admin
const { useState: usePortalState, useEffect: usePortalEffect, useMemo: usePortalMemo } = React;

window.PortalShell = function PortalShell({ user, onLogout, onOpenAdmin, onSwitchTenant }) {
  const [tenant, setTenant] = usePortalState(null);
  const [categories, setCategories] = usePortalState([]);
  const [useCases, setUseCases] = usePortalState([]);
  const [activeSlug, setActiveSlug] = usePortalState(null);
  const [showNew, setShowNew] = usePortalState(false);
  const [tenantSlugFilter, setTenantSlugFilter] = usePortalState(
    user.role === "super_admin" ? (user.tenant ? user.tenant.slug : null) : (user.tenant ? user.tenant.slug : null)
  );

  const tenantQuery = tenantSlugFilter ? `?tenant=${encodeURIComponent(tenantSlugFilter)}` : "";

  function loadAll() {
    if (user.role === "super_admin" && !tenantSlugFilter) {
      setTenant(null); setCategories([]); setUseCases([]);
      return;
    }
    Promise.all([
      window.api.get("/me" + tenantQuery).catch(() => ({ tenant: user.tenant })),
      window.api.get("/categories" + tenantQuery),
      window.api.get("/use-cases" + tenantQuery),
    ]).then(([m, c, u]) => {
      const t = m.tenant || user.tenant;
      setTenant(t);
      window.applyBrand(t);
      setCategories(c.categories || []);
      setUseCases(u.useCases || []);
      if (!activeSlug && u.useCases && u.useCases.length) {
        setActiveSlug(u.useCases[0].slug);
      } else if (activeSlug && !(u.useCases || []).some((x) => x.slug === activeSlug)) {
        setActiveSlug(u.useCases && u.useCases.length ? u.useCases[0].slug : null);
      }
    });
  }

  usePortalEffect(loadAll, [tenantSlugFilter]);

  function handleSelect(slug) { setActiveSlug(slug); }
  function handleChanged() { loadAll(); }
  function handleDeleted() {
    setActiveSlug(null);
    loadAll();
  }
  function handleNew() { setShowNew(true); }

  return (
    <>
      {user.role === "super_admin" && (
        <SuperAdminTenantBar
          currentSlug={tenantSlugFilter}
          onChange={(s) => setTenantSlugFilter(s)}
          onOpenAdmin={onOpenAdmin}
        />
      )}
      <div className={"app-shell " + (user.role === "super_admin" ? "with-superbar" : "")}
           style={user.role === "super_admin" ? {height: "calc(100vh - 44px)"} : {}}>
        <window.Sidebar
          user={user}
          tenant={tenant}
          useCases={useCases}
          categories={categories}
          activeSlug={activeSlug}
          onSelect={handleSelect}
          onNew={handleNew}
          onOpenAdmin={onOpenAdmin}
          onLogout={onLogout}
        />
        {tenant && activeSlug ? (
          <window.UseCaseDetail
            user={user}
            slug={activeSlug}
            tenantSlug={tenantSlugFilter}
            categories={categories}
            onChanged={handleChanged}
            onDeleted={handleDeleted}
          />
        ) : (
          <div className="empty">
            <div>
              <div className="big">{tenant ? "Välj ett use case" : "Välj en tenant"}</div>
              <div>{tenant ? "Klicka på ett use case i sidofältet för att se detaljer." : "Som super-admin: välj en tenant att jobba i."}</div>
              {tenant && (user.role === "super_admin" || user.role === "tenant_admin") && (
                <button className="btn btn-primary btn-sm" style={{marginTop: 16}} onClick={handleNew}>+ Skapa use case</button>
              )}
            </div>
          </div>
        )}
      </div>

      {showNew && (
        <NewUseCaseModal
          tenantQuery={tenantQuery}
          categories={categories}
          onClose={() => setShowNew(false)}
          onCreated={(slug) => {
            setShowNew(false);
            setActiveSlug(slug);
            loadAll();
          }}
        />
      )}
    </>
  );
};

function SuperAdminTenantBar({ currentSlug, onChange, onOpenAdmin }) {
  const [tenants, setTenants] = usePortalState([]);
  usePortalEffect(() => {
    window.api.get("/admin/tenants").then((d) => setTenants(d.tenants || []));
  }, []);

  return (
    <div style={{
      background: "var(--ink-900)",
      color: "var(--white)",
      padding: "10px 18px",
      display: "flex",
      gap: 12,
      alignItems: "center",
      fontSize: 13,
      flexShrink: 0,
    }}>
      <span style={{opacity: 0.6, fontSize: 11, textTransform: "uppercase", letterSpacing: "0.06em"}}>Super admin</span>
      <span>Tenant:</span>
      <select
        value={currentSlug || ""}
        onChange={(e) => onChange(e.target.value || null)}
        style={{
          background: "rgba(255,255,255,0.08)",
          color: "var(--white)",
          border: "1px solid rgba(255,255,255,0.16)",
          borderRadius: 6,
          padding: "4px 10px",
          fontSize: 13,
        }}>
        <option value="">— välj —</option>
        {tenants.map((t) => (
          <option key={t.slug} value={t.slug}>{t.name} ({t.useCaseCount} cases)</option>
        ))}
      </select>
      <button onClick={onOpenAdmin} style={{
        marginLeft: "auto",
        background: "rgba(255,255,255,0.12)",
        color: "var(--white)",
        padding: "5px 14px",
        borderRadius: "var(--radius-pill)",
        fontSize: 12,
        fontWeight: 500,
      }}>Admin →</button>
    </div>
  );
}

function NewUseCaseModal({ tenantQuery, categories, onClose, onCreated }) {
  const [title, setTitle] = usePortalState("");
  const [slug, setSlug] = usePortalState("");
  const [audience, setAudience] = usePortalState("");
  const [categoryId, setCategoryId] = usePortalState(categories[0] ? categories[0].id : "");
  const [subcategory, setSubcategory] = usePortalState("");
  const [priorityName, setPriorityName] = usePortalState("");
  const [status, setStatus] = usePortalState("Draft");
  const [season, setSeason] = usePortalState("");
  const [busy, setBusy] = usePortalState(false);
  const [err, setErr] = usePortalState(null);

  function autoSlug(t) {
    return t.toLowerCase()
      .normalize("NFD").replace(/[̀-ͯ]/g, "")
      .replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "").slice(0, 60);
  }

  async function submit(e) {
    e.preventDefault();
    setErr(null);
    setBusy(true);
    try {
      const finalSlug = slug || autoSlug(title);
      const prioOpt = window.PRIO_CATEGORIES.find((p) => p.label === priorityName);
      const { useCase } = await window.api.post("/use-cases" + tenantQuery, {
        title,
        slug: finalSlug,
        audience,
        categoryId: categoryId || null,
        subcategory: subcategory || null,
        priority: prioOpt ? prioOpt.priority : null,
        priorityName: priorityName || null,
        status: status || "Draft",
        season: season || null,
      });
      onCreated(useCase.slug);
    } catch (e) {
      setErr(
        e.data && e.data.error === "slug_already_exists" ? "Slug finns redan — välj en annan." :
        e.message || "Något gick fel"
      );
    } finally { setBusy(false); }
  }

  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <h3>Nytt use case</h3>
        <p className="lead">Skapa skalet — du fyller i tab-innehåll efter.</p>
        {err && <div className="err">{err}</div>}
        <form onSubmit={submit}>
          <div className="field-row">
            <label className="field-label">Titel</label>
            <input className="field" value={title} onChange={(e) => { setTitle(e.target.value); if (!slug) setSlug(autoSlug(e.target.value)); }} required autoFocus />
          </div>
          <div className="field-row">
            <label className="field-label">Slug (URL)</label>
            <input className="field" value={slug} onChange={(e) => setSlug(e.target.value)} placeholder={autoSlug(title) || "auto-genereras"} />
          </div>
          <div className="field-row">
            <label className="field-label">Målgrupp</label>
            <input className="field" value={audience} onChange={(e) => setAudience(e.target.value)} />
          </div>
          <div style={{display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12}}>
            <div className="field-row">
              <label className="field-label">Kundlivscykelfas</label>
              <select className="field" value={categoryId || ""} onChange={(e) => { setCategoryId(e.target.value ? parseInt(e.target.value, 10) : ""); setSubcategory(""); }}>
                <option value="">— välj —</option>
                {categories.map((c) => <option key={c.id} value={c.id}>{c.code}. {c.name}</option>)}
              </select>
            </div>
            <div className="field-row">
              <label className="field-label">Underkategori</label>
              {(() => {
                const lc = (categories || []).find((c) => c.id === categoryId);
                const code = lc ? lc.code : null;
                return (
                  <select
                    className="field"
                    value={subcategory}
                    onChange={(e) => setSubcategory(e.target.value)}>
                    <option value="">— välj —</option>
                    {code && (window.SUBCATEGORIES[code] || []).map((s) => (
                      <option key={s.code} value={s.code}>{s.code} — {s.name}</option>
                    ))}
                    {!code && Object.entries(window.SUBCATEGORIES).map(([lcCode, list]) => (
                      <optgroup key={lcCode} label={lcCode + ". " + ((categories || []).find((c) => c.code === lcCode)?.name || lcCode)}>
                        {list.map((s) => (
                          <option key={s.code} value={s.code}>{s.code} — {s.name}</option>
                        ))}
                      </optgroup>
                    ))}
                  </select>
                );
              })()}
            </div>
          </div>
          <div style={{display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12}}>
            <div className="field-row">
              <label className="field-label">Prio-kategori</label>
              <select className="field" value={priorityName} onChange={(e) => setPriorityName(e.target.value)}>
                <option value="">— välj —</option>
                {window.PRIO_CATEGORIES.map((p) => (
                  <option key={p.label} value={p.label}>{p.label}</option>
                ))}
              </select>
            </div>
            <div className="field-row">
              <label className="field-label">Status</label>
              <select className="field" value={status} onChange={(e) => setStatus(e.target.value)}>
                {window.STATUSES.map((s) => (
                  <option key={s.value} value={s.value}>{s.value}</option>
                ))}
              </select>
            </div>
          </div>
          <div className="field-row">
            <label className="field-label">Utvecklingssäsong</label>
            <input
              className="field"
              placeholder="t.ex. Q3 2026"
              value={season}
              onChange={(e) => setSeason(e.target.value)}
            />
          </div>
          <div className="modal-foot">
            <button type="button" className="btn btn-ghost btn-sm" onClick={onClose}>Avbryt</button>
            <button className="btn btn-primary btn-sm" type="submit" disabled={busy || !title}>
              {busy && <span className="spinner" />} Skapa
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}