// detail.jsx — right-side use case view with 6 tabs
const { useState: useDetState, useEffect: useDetEffect } = React;

window.UseCaseDetail = function UseCaseDetail({ user, slug, tenantSlug, categories, onChanged, onDeleted }) {
  const [data, setData] = useDetState(null);
  const [tab, setTab] = useDetState("overview");
  const [err, setErr] = useDetState(null);
  const [editMeta, setEditMeta] = useDetState(false);

  const canEdit = user.role === "super_admin" || user.role === "tenant_admin" || user.role === "member";
  const canDelete = user.role === "super_admin" || user.role === "tenant_admin";

  // For super_admin, append ?tenant=<slug> to all calls so they hit the right tenant.
  const tq = tenantSlug ? `?tenant=${encodeURIComponent(tenantSlug)}` : "";
  // Make tenantQuery available to child tabs that POST/PUT to use-case sub-paths.
  window.__currentTenantQuery = tq;

  function load() {
    setErr(null);
    window.api.get(`/use-cases/${slug}${tq}`)
      .then(setData)
      .catch((e) => setErr(e.message));
  }

  useDetEffect(() => { load(); setTab("overview"); setEditMeta(false); }, [slug, tenantSlug]);

  if (err) {
    return (
      <div className="detail">
        <div className="detail-inner">
          <div className="empty"><div>Kunde inte ladda use case: {err}</div></div>
        </div>
      </div>
    );
  }

  if (!data) {
    return (
      <div className="detail">
        <div className="detail-inner"><div className="loading-page"><div className="spinner" /></div></div>
      </div>
    );
  }

  const uc = data.useCase;
  const tabContent = data.tabs || {};
  const notes = data.notes || [];

  function onTabSaved() { load(); onChanged && onChanged(); }
  function onNotesChanged() { load(); }

  return (
    <div className="detail">
      <div className="detail-inner">
        <Header
          uc={uc}
          editMeta={editMeta}
          setEditMeta={setEditMeta}
          canEdit={canEdit}
          canDelete={canDelete}
          categories={categories || []}
          onSaved={() => { load(); onChanged && onChanged(); }}
          onDeleted={onDeleted}
        />

        <div className="tabs-bar">
          {window.TAB_DEFS.map((t, i) => (
            <button
              key={t.key}
              className={"tab-btn " + (tab === t.key ? "active" : "")}
              onClick={() => setTab(t.key)}>
              <span className="tab-num">{i + 1}</span>
              {t.label}
            </button>
          ))}
        </div>

        {tab === "overview"   && <window.OverviewTab   useCase={uc} content={tabContent.overview   || {}} canEdit={canEdit} onSaved={onTabSaved} />}
        {tab === "audience"   && <window.AudienceTab   useCase={uc} content={tabContent.audience   || {}} canEdit={canEdit} onSaved={onTabSaved} />}
        {tab === "action"     && <window.ActionTab     useCase={uc} content={tabContent.action     || {}} canEdit={canEdit} onSaved={onTabSaved} />}
        {tab === "content"    && <window.ContentTab    useCase={uc} content={tabContent.content    || {}} canEdit={canEdit} onSaved={onTabSaved} />}
        {tab === "behavioral" && <window.BehavioralTab useCase={uc} content={tabContent.behavioral || {}} canEdit={canEdit} onSaved={onTabSaved} />}
        {tab === "notes"      && <window.NotesTab      useCase={uc} notes={notes} currentUser={user} onChange={onNotesChanged} />}
      </div>
    </div>
  );
};

function Header({ uc, editMeta, setEditMeta, canEdit, canDelete, categories, onSaved, onDeleted }) {
  const [draft, setDraft] = useDetState(toDraft(uc));
  const [busy, setBusy] = useDetState(false);

  useDetEffect(() => { setDraft(toDraft(uc)); }, [uc.slug]);

  // Underkategori options depend on selected Kundlivscykel.
  // If no lifecycle selected → show all subcategories grouped.
  const selectedLifecycle = (categories || []).find((c) => c.id === draft.categoryId);
  const lifecycleCode = selectedLifecycle ? selectedLifecycle.code : null;

  const tq = window.__currentTenantQuery || "";

  async function save() {
    setBusy(true);
    try {
      await window.api.patch(`/use-cases/${uc.slug}${tq}`, draft);
      setEditMeta(false);
      onSaved && onSaved();
    } catch (e) {
      alert("Kunde inte spara: " + e.message);
    } finally { setBusy(false); }
  }

  async function del() {
    if (!confirm(`Ta bort "${uc.title}"? Detta går inte att ångra.`)) return;
    try {
      await window.api.delete(`/use-cases/${uc.slug}${tq}`);
      onDeleted && onDeleted();
    } catch (e) {
      alert("Kunde inte ta bort: " + e.message);
    }
  }

  if (editMeta) {
    return (
      <div className="kpi-card" style={{marginBottom: 24}}>
        <h3 className="section-title">Redigera use case</h3>
        <FieldRow label="Titel">
          <input className="field" value={draft.title} onChange={(e) => setDraft({...draft, title: e.target.value})} />
        </FieldRow>
        <FieldRow label="Målgrupp">
          <input className="field" value={draft.audience || ""} onChange={(e) => setDraft({...draft, audience: e.target.value})} />
        </FieldRow>
        <FieldRow label="Produkt">
          <input className="field" value={draft.product || ""} onChange={(e) => setDraft({...draft, product: e.target.value})} />
        </FieldRow>
        <FieldRow label="Trigger / signal">
          <textarea className="field" rows={2} value={draft.triggerSignal || ""} onChange={(e) => setDraft({...draft, triggerSignal: e.target.value})} />
        </FieldRow>

        <div style={{display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12}}>
          <FieldRow label="Kundlivscykelfas">
            <select
              className="field"
              value={draft.categoryId || ""}
              onChange={(e) => setDraft({...draft, categoryId: e.target.value ? parseInt(e.target.value, 10) : null})}>
              <option value="">— välj —</option>
              {(categories || []).map((c) => (
                <option key={c.id} value={c.id}>{c.code}. {c.name}</option>
              ))}
            </select>
          </FieldRow>
          <FieldRow label="Underkategori">
            <select
              className="field"
              value={draft.subcategory || ""}
              onChange={(e) => setDraft({...draft, subcategory: e.target.value || null})}>
              <option value="">— välj —</option>
              {lifecycleCode && (window.SUBCATEGORIES[lifecycleCode] || []).map((s) => (
                <option key={s.code} value={s.code}>{s.code} — {s.name}</option>
              ))}
              {!lifecycleCode && Object.entries(window.SUBCATEGORIES).map(([lc, list]) => (
                <optgroup key={lc} label={`${lc}. ${(categories || []).find((c) => c.code === lc)?.name || lc}`}>
                  {list.map((s) => (
                    <option key={s.code} value={s.code}>{s.code} — {s.name}</option>
                  ))}
                </optgroup>
              ))}
            </select>
          </FieldRow>
        </div>

        <div style={{display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12}}>
          <FieldRow label="Prio-kategori">
            <select
              className="field"
              value={draft.priorityName || ""}
              onChange={(e) => {
                const label = e.target.value;
                const opt = window.PRIO_CATEGORIES.find((p) => p.label === label);
                setDraft({...draft, priorityName: label || null, priority: opt ? opt.priority : null});
              }}>
              <option value="">— välj —</option>
              {window.PRIO_CATEGORIES.map((p) => (
                <option key={p.label} value={p.label}>{p.label}</option>
              ))}
            </select>
          </FieldRow>
          <FieldRow label="Status">
            <select
              className="field"
              value={draft.status || "Draft"}
              onChange={(e) => setDraft({...draft, status: e.target.value})}>
              {window.STATUSES.map((s) => (
                <option key={s.value} value={s.value}>{s.value}</option>
              ))}
            </select>
          </FieldRow>
        </div>

        <FieldRow label="Utvecklingssäsong">
          <input
            className="field"
            placeholder="t.ex. Q3 2026 / Summer 2026"
            value={draft.season || ""}
            onChange={(e) => setDraft({...draft, season: e.target.value})}
          />
        </FieldRow>

        <div style={{display: "flex", justifyContent: "space-between", marginTop: 16, gap: 8, flexWrap: "wrap"}}>
          {canDelete && <button className="btn btn-danger btn-sm" onClick={del}>Ta bort use case</button>}
          <div style={{display: "flex", gap: 8, marginLeft: "auto"}}>
            <button className="btn btn-ghost btn-sm" onClick={() => setEditMeta(false)}>Avbryt</button>
            <button className="btn btn-primary btn-sm" onClick={save} disabled={busy}>
              {busy && <span className="spinner" />} Spara
            </button>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="detail-head">
      <div className="detail-crumbs">
        <span>{uc.category ? `${uc.category.code}. ${uc.category.name}` : "Ej kategoriserad"}</span>
        <span className="sep">/</span>
        <span style={{color: "var(--ink-700)"}}>{uc.title}</span>
        {canEdit && (
          <button className="btn btn-ghost btn-sm" style={{marginLeft: "auto"}} onClick={() => setEditMeta(true)}>
            Redigera meta
          </button>
        )}
      </div>

      <h1 className="detail-title">{uc.title}</h1>
      <p className="detail-subtitle">
        {uc.audience}{uc.product ? ". Produkt: " : ""}<b style={{color: "var(--ink-900)", fontWeight: 500}}>{uc.product}</b>
      </p>

      <div className="detail-meta-row">
        {uc.status && <StatusPill status={uc.status} />}
        {uc.priorityName && <Pill label="Prio" value={uc.priorityName} className={uc.priority ? "priority-" + uc.priority : ""} />}
        {uc.season && <Pill label="Säsong" value={uc.season} />}
        {uc.subcategory && <Pill label="Typ" value={uc.subcategory} />}
      </div>

      {uc.triggerSignal && (
        <div className="trigger-box">
          <span style={{fontSize: 16, color: "var(--brand-primary)"}}>⚡</span>
          <div>
            <b>Trigger / signal</b>
            <span>{uc.triggerSignal}</span>
          </div>
        </div>
      )}
    </div>
  );
}

function Pill({ label, value, className }) {
  return (
    <span className={"meta-pill " + (className || "")}>
      <span className="label">{label}</span>
      <span>{value}</span>
    </span>
  );
}

function StatusPill({ status }) {
  const def = (window.STATUSES || []).find((s) => s.value === status);
  const color = def ? def.color : "#94A3B8";
  return (
    <span className="meta-pill" style={{borderColor: color, background: color + "12"}}>
      <span style={{
        width: 8, height: 8, borderRadius: "50%",
        background: color, display: "inline-block",
      }} />
      <span style={{color: "var(--ink-900)", fontWeight: 500}}>{status}</span>
    </span>
  );
}

function FieldRow({ label, children }) {
  return (
    <div className="field-row">
      <label className="field-label">{label}</label>
      {children}
    </div>
  );
}

function toDraft(uc) {
  return {
    title: uc.title,
    audience: uc.audience,
    product: uc.product,
    triggerSignal: uc.triggerSignal,
    subcategory: uc.subcategory,
    priority: uc.priority,
    priorityName: uc.priorityName,
    status: uc.status || "Draft",
    season: uc.season,
    categoryId: uc.category && uc.category.id ? uc.category.id : null,
  };
}