// tabs.jsx — Per-tab read/edit components
// Tabs: overview, audience, action, content, behavioral, notes
const { useState: useTabState, useEffect: useTabEffect } = React;

window.TAB_DEFS = [
  { key: "overview",   label: "Översikt",       icon: "📊" },
  { key: "audience",   label: "Målgrupp",       icon: "🎯" },
  { key: "action",     label: "Action",         icon: "⚡" },
  { key: "content",    label: "Content",        icon: "✏️" },
  { key: "behavioral", label: "Beteendedesign", icon: "🧠" },
  { key: "notes",      label: "Anteckningar",   icon: "📝" },
];

// ---------------- Generic helpers ----------------

function EditToggle({ canEdit, editing, onToggle, onSave, busy }) {
  if (!canEdit) return null;
  if (editing) {
    return (
      <div className="tab-edit-actions">
        <button className="btn btn-ghost btn-sm" onClick={() => onToggle(false)} disabled={busy}>Avbryt</button>
        <button className="btn btn-primary btn-sm" onClick={onSave} disabled={busy}>
          {busy ? <span className="spinner" /> : null}
          {busy ? "Sparar…" : "Spara"}
        </button>
      </div>
    );
  }
  return (
    <div className="tab-edit-actions">
      <button className="btn btn-secondary btn-sm" onClick={() => onToggle(true)}>Redigera</button>
    </div>
  );
}

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

function TextValue({ value, placeholder, multiline }) {
  if (!value) return <span style={{color: "var(--ink-400)", fontStyle: "italic"}}>{placeholder || "Ej ifyllt"}</span>;
  if (multiline) return <div style={{whiteSpace: "pre-wrap", lineHeight: 1.55}}>{value}</div>;
  return <span>{value}</span>;
}

function useTabEditor(initial, useCaseSlug, tabKey, onSaved) {
  const [editing, setEditing] = useTabState(false);
  const [draft, setDraft] = useTabState(initial || {});
  const [busy, setBusy] = useTabState(false);

  useTabEffect(() => { setDraft(initial || {}); setEditing(false); }, [useCaseSlug, tabKey]);

  function update(field, value) {
    setDraft((d) => ({ ...d, [field]: value }));
  }

  async function save() {
    setBusy(true);
    try {
      const tq = window.__currentTenantQuery || "";
      await window.api.put(`/use-cases/${useCaseSlug}/tabs/${tabKey}${tq}`, draft);
      onSaved && onSaved(draft);
      setEditing(false);
    } catch (e) {
      alert("Kunde inte spara: " + (e.message || "okänt fel"));
    } finally {
      setBusy(false);
    }
  }

  function reset() {
    setDraft(initial || {});
    setEditing(false);
  }

  return { editing, setEditing, draft, update, busy, save, reset };
}

// ---------------- 1. Översikt ----------------

window.OverviewTab = function OverviewTab({ useCase, content, canEdit, onSaved }) {
  const ed = useTabEditor(content, useCase.slug, "overview", onSaved);

  return (
    <div className="tab-panel">
      <EditToggle canEdit={canEdit} editing={ed.editing} onToggle={ed.setEditing} onSave={ed.save} busy={ed.busy} />

      {!ed.editing ? (
        <div className="kpi-grid">
          <div className="kpi-card hypothesis">
            <div className="kpi-label">Hypotes</div>
            <div className="kpi-value">
              <TextValue value={content.hypothesis} placeholder="Beskriv hypotesen för use caset" multiline />
            </div>
          </div>
          <div className="kpi-card">
            <div className="kpi-label">Primär KPI</div>
            <div className="kpi-value" style={{fontSize: 16, lineHeight: 1.3}}>
              <TextValue value={content.primaryKpi} placeholder="t.ex. Aktivering inom 30 dagar" />
            </div>
            {content.liftEstimate && <div className="kpi-sub" style={{color: "var(--success)", marginTop: 8}}>↑ {content.liftEstimate}</div>}
          </div>
          <div className="kpi-card">
            <div className="kpi-label">Sekundär KPI</div>
            <div className="kpi-value" style={{fontSize: 16, lineHeight: 1.3}}>
              <TextValue value={content.secondaryKpi} placeholder="t.ex. ARPU-uppgång" />
            </div>
          </div>
          <div className="kpi-card">
            <div className="kpi-label">Räckvidd</div>
            <div className="kpi-value" style={{fontSize: 16, whiteSpace: "pre-line"}}>
              <TextValue value={content.reach} placeholder="t.ex. 12 000 företag i SoHo + SME" multiline />
            </div>
          </div>
          <div className="kpi-card business-case">
            <div className="kpi-label">Business case</div>
            <div className="kpi-value" style={{fontSize: 15, lineHeight: 1.5, fontWeight: 400}}>
              <TextValue value={content.businessCase} placeholder="Förväntad intäktspåverkan, kostnad, payback period" multiline />
            </div>
          </div>
        </div>
      ) : (
        <div>
          <FieldRow label="Hypotes">
            <textarea className="field" value={ed.draft.hypothesis || ""} onChange={(e) => ed.update("hypothesis", e.target.value)} rows={3} />
          </FieldRow>
          <FieldRow label="Primär KPI">
            <input className="field" value={ed.draft.primaryKpi || ""} onChange={(e) => ed.update("primaryKpi", e.target.value)} />
          </FieldRow>
          <FieldRow label="Lift-estimat (valfritt)">
            <input className="field" placeholder="t.ex. +15% take-rate" value={ed.draft.liftEstimate || ""} onChange={(e) => ed.update("liftEstimate", e.target.value)} />
          </FieldRow>
          <FieldRow label="Sekundär KPI">
            <input className="field" value={ed.draft.secondaryKpi || ""} onChange={(e) => ed.update("secondaryKpi", e.target.value)} />
          </FieldRow>
          <FieldRow label="Räckvidd">
            <textarea className="field" value={ed.draft.reach || ""} onChange={(e) => ed.update("reach", e.target.value)} rows={2} />
          </FieldRow>
          <FieldRow label="Business case">
            <textarea className="field" value={ed.draft.businessCase || ""} onChange={(e) => ed.update("businessCase", e.target.value)} rows={4} />
          </FieldRow>
        </div>
      )}
    </div>
  );
};

// ---------------- 2. Målgrupp (Data – Algo) ----------------

window.AudienceTab = function AudienceTab({ useCase, content, canEdit, onSaved }) {
  const ed = useTabEditor(content, useCase.slug, "audience", onSaved);

  return (
    <div className="tab-panel">
      <EditToggle canEdit={canEdit} editing={ed.editing} onToggle={ed.setEditing} onSave={ed.save} busy={ed.busy} />

      {!ed.editing ? (
        <div>
          <h3 className="section-title">Data — vilka signaler driver målgruppen?</h3>
          <p className="section-sub">Datakällor och beräkningar som bygger audiencen (BigQuery, GCP, etc.)</p>
          <div className="kpi-card" style={{marginBottom: 18}}>
            <TextValue value={content.dataSources} placeholder="t.ex. BigQuery: subscriber_facts, Hightouch sync från CRM…" multiline />
          </div>

          <h3 className="section-title">Algo — modell, scoring, audience-bygge</h3>
          <p className="section-sub">Hur datan blir en åtgärdbar lista (Hightouch sync, propensity-modell, tröskelvärden)</p>
          <div className="kpi-card" style={{marginBottom: 18}}>
            <TextValue value={content.algorithm} placeholder="t.ex. Propensity-score >0.65 + täckning >80%" multiline />
          </div>

          <h3 className="section-title">Audience-storlek och segmentering</h3>
          <div className="kpi-card">
            <TextValue value={content.audienceSize} placeholder="t.ex. SoHo: 8 000 / SME: 4 000 / Mid: 1 200" multiline />
          </div>
        </div>
      ) : (
        <div>
          <FieldRow label="Datakällor (BigQuery, GCP, Hightouch)">
            <textarea className="field" rows={4} value={ed.draft.dataSources || ""} onChange={(e) => ed.update("dataSources", e.target.value)} />
          </FieldRow>
          <FieldRow label="Algoritm / scoring">
            <textarea className="field" rows={4} value={ed.draft.algorithm || ""} onChange={(e) => ed.update("algorithm", e.target.value)} />
          </FieldRow>
          <FieldRow label="Audience-storlek">
            <textarea className="field" rows={3} value={ed.draft.audienceSize || ""} onChange={(e) => ed.update("audienceSize", e.target.value)} />
          </FieldRow>
        </div>
      )}
    </div>
  );
};

// ---------------- 3. Action (Omnichannel flow) ----------------

window.ActionTab = function ActionTab({ useCase, content, canEdit, onSaved }) {
  const ed = useTabEditor(content, useCase.slug, "action", onSaved);
  const steps = (ed.editing ? ed.draft.steps : content.steps) || [];

  function addStep() {
    ed.update("steps", [...(ed.draft.steps || []), { day: "", channel: "", title: "", description: "", tech: "" }]);
  }
  function updateStep(idx, field, value) {
    const copy = [...(ed.draft.steps || [])];
    copy[idx] = { ...copy[idx], [field]: value };
    ed.update("steps", copy);
  }
  function removeStep(idx) {
    const copy = [...(ed.draft.steps || [])];
    copy.splice(idx, 1);
    ed.update("steps", copy);
  }

  return (
    <div className="tab-panel">
      <EditToggle canEdit={canEdit} editing={ed.editing} onToggle={ed.setEditing} onSave={ed.save} busy={ed.busy} />

      <h3 className="section-title">Omnikanal-flöde</h3>
      <p className="section-sub">Steg för steg över alla kanaler (email, SMS, push, ABM, säljkontakt)</p>

      {steps.length === 0 && !ed.editing && (
        <div className="empty">Inga steg än. Klicka Redigera för att börja designa flödet.</div>
      )}

      <div style={{display: "flex", flexDirection: "column", gap: 10, marginTop: 8}}>
        {steps.map((s, i) => (
          <div key={i} className="kpi-card" style={{position: "relative"}}>
            {ed.editing ? (
              <div>
                <div style={{display: "grid", gridTemplateColumns: "120px 140px 1fr auto", gap: 10, alignItems: "start"}}>
                  <input className="field" placeholder="Dag (t.ex. Dag 0)" value={s.day || ""} onChange={(e) => updateStep(i, "day", e.target.value)} />
                  <input className="field" placeholder="Kanal" value={s.channel || ""} onChange={(e) => updateStep(i, "channel", e.target.value)} />
                  <input className="field" placeholder="Titel" value={s.title || ""} onChange={(e) => updateStep(i, "title", e.target.value)} />
                  <button className="btn btn-danger btn-sm" onClick={() => removeStep(i)}>Ta bort</button>
                </div>
                <textarea className="field" placeholder="Beskrivning" rows={2} style={{marginTop: 8}} value={s.description || ""} onChange={(e) => updateStep(i, "description", e.target.value)} />
                <input className="field" placeholder="Tech (t.ex. Braze, Hightouch)" style={{marginTop: 8}} value={s.tech || ""} onChange={(e) => updateStep(i, "tech", e.target.value)} />
              </div>
            ) : (
              <div>
                <div style={{display: "flex", gap: 12, alignItems: "baseline", flexWrap: "wrap", marginBottom: 6}}>
                  <span className="role-badge" style={{background: "var(--ink-50)", color: "var(--ink-700)"}}>{s.day || "—"}</span>
                  {s.channel && <span style={{fontSize: 12, fontWeight: 500, color: "var(--brand-accent)"}}>{s.channel}</span>}
                  <strong style={{fontSize: 15, color: "var(--ink-900)"}}>{s.title}</strong>
                </div>
                {s.description && <div style={{fontSize: 13, color: "var(--ink-700)", lineHeight: 1.5}}>{s.description}</div>}
                {s.tech && <div style={{fontSize: 11, color: "var(--ink-400)", marginTop: 6, textTransform: "uppercase", letterSpacing: "0.06em"}}>Tech: {s.tech}</div>}
              </div>
            )}
          </div>
        ))}
      </div>

      {ed.editing && (
        <button className="btn btn-secondary btn-sm" style={{marginTop: 12}} onClick={addStep}>+ Lägg till steg</button>
      )}
    </div>
  );
};

// ---------------- 4. Content (Creative) ----------------

window.ContentTab = function ContentTab({ useCase, content, canEdit, onSaved }) {
  const ed = useTabEditor(content, useCase.slug, "content", onSaved);
  const items = (ed.editing ? ed.draft.creatives : content.creatives) || [];

  function add() {
    ed.update("creatives", [...(ed.draft.creatives || []), { type: "Email", subject: "", body: "", cta: "" }]);
  }
  function upd(i, k, v) {
    const c = [...(ed.draft.creatives || [])];
    c[i] = { ...c[i], [k]: v };
    ed.update("creatives", c);
  }
  function del(i) {
    const c = [...(ed.draft.creatives || [])];
    c.splice(i, 1);
    ed.update("creatives", c);
  }

  return (
    <div className="tab-panel">
      <EditToggle canEdit={canEdit} editing={ed.editing} onToggle={ed.setEditing} onSave={ed.save} busy={ed.busy} />

      <h3 className="section-title">Kreativt innehåll</h3>
      <p className="section-sub">Förslag på copy och CTA per beröringspunkt</p>

      {items.length === 0 && !ed.editing && (
        <div className="empty">Inga kreativa varianter än.</div>
      )}

      <div style={{display: "flex", flexDirection: "column", gap: 12, marginTop: 8}}>
        {items.map((c, i) => (
          <div key={i} className="kpi-card">
            {ed.editing ? (
              <div>
                <div style={{display: "grid", gridTemplateColumns: "140px 1fr auto", gap: 10}}>
                  <select className="field" value={c.type || "Email"} onChange={(e) => upd(i, "type", e.target.value)}>
                    <option>Email</option>
                    <option>SMS</option>
                    <option>Push</option>
                    <option>LinkedIn Ad</option>
                    <option>Display</option>
                    <option>Säljpitch</option>
                  </select>
                  <input className="field" placeholder="Subject / headline" value={c.subject || ""} onChange={(e) => upd(i, "subject", e.target.value)} />
                  <button className="btn btn-danger btn-sm" onClick={() => del(i)}>Ta bort</button>
                </div>
                <textarea className="field" placeholder="Body / copy" rows={4} style={{marginTop: 8}} value={c.body || ""} onChange={(e) => upd(i, "body", e.target.value)} />
                <input className="field" placeholder="CTA" style={{marginTop: 8}} value={c.cta || ""} onChange={(e) => upd(i, "cta", e.target.value)} />
              </div>
            ) : (
              <div>
                <div style={{display: "flex", gap: 10, alignItems: "baseline", marginBottom: 6}}>
                  <span className="role-badge" style={{background: "var(--ink-50)", color: "var(--ink-700)"}}>{c.type}</span>
                  <strong style={{fontSize: 15, color: "var(--ink-900)"}}>{c.subject}</strong>
                </div>
                {c.body && <div style={{fontSize: 13, lineHeight: 1.55, whiteSpace: "pre-wrap", color: "var(--ink-700)"}}>{c.body}</div>}
                {c.cta && <div style={{marginTop: 10, display: "inline-block", padding: "6px 14px", background: "var(--brand-primary)", color: "var(--ink-900)", borderRadius: "var(--radius-pill)", fontSize: 12, fontWeight: 500}}>{c.cta}</div>}
              </div>
            )}
          </div>
        ))}
      </div>

      {ed.editing && (
        <button className="btn btn-secondary btn-sm" style={{marginTop: 12}} onClick={add}>+ Lägg till kreativ</button>
      )}
    </div>
  );
};

// ---------------- 5. Beteendedesign ----------------

const PRINCIPLES = [
  { key: "social",      name: "Social proof",      desc: "Kundcase, antal andra som valt detta" },
  { key: "loss",        name: "Loss aversion",     desc: "Visualisera vad kunden förlorar utan" },
  { key: "scarcity",    name: "Scarcity",          desc: "Tidsfönster, kampanj-deadline, begränsat antal" },
  { key: "anchor",      name: "Anchoring",         desc: "Jämför mot ett referenspris/-värde" },
  { key: "default",     name: "Default bias",      desc: "Förvalt alternativ minskar friktion" },
  { key: "reciprocity", name: "Reciprocity",       desc: "Ge värde först (insikt, kalkyl, gratis test)" },
  { key: "commit",      name: "Commitment",        desc: "Liten ja nu leder till större ja sen" },
  { key: "personal",    name: "Personalisering",   desc: "Adressera kundens situation specifikt" },
];

window.BehavioralTab = function BehavioralTab({ useCase, content, canEdit, onSaved }) {
  const ed = useTabEditor(content, useCase.slug, "behavioral", onSaved);
  const active = new Set((ed.editing ? ed.draft.principles : content.principles) || []);

  function toggle(key) {
    const set = new Set(ed.draft.principles || []);
    if (set.has(key)) set.delete(key); else set.add(key);
    ed.update("principles", Array.from(set));
  }

  return (
    <div className="tab-panel">
      <EditToggle canEdit={canEdit} editing={ed.editing} onToggle={ed.setEditing} onSave={ed.save} busy={ed.busy} />

      <h3 className="section-title">Beteendedesign</h3>
      <p className="section-sub">Vilka psykologiska principer som driver konvertering i flödet</p>

      <div style={{display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))", gap: 10, marginBottom: 18}}>
        {PRINCIPLES.map((p) => {
          const on = active.has(p.key);
          return (
            <div key={p.key}
              onClick={ed.editing ? () => toggle(p.key) : undefined}
              style={{
                padding: 14,
                background: on ? "var(--white)" : "var(--bg-soft)",
                border: "1px solid " + (on ? "var(--brand-primary)" : "var(--ink-100)"),
                borderRadius: "var(--radius-md)",
                opacity: !ed.editing && !on ? 0.45 : 1,
                cursor: ed.editing ? "pointer" : "default",
                transition: "all 120ms",
              }}>
              <div style={{display: "flex", alignItems: "center", gap: 8, marginBottom: 4}}>
                <span style={{
                  width: 16, height: 16, borderRadius: 4, display: "inline-block",
                  background: on ? "var(--brand-primary)" : "transparent",
                  border: "2px solid " + (on ? "var(--brand-primary)" : "var(--ink-100)"),
                }} />
                <strong style={{fontSize: 14, color: "var(--ink-900)"}}>{p.name}</strong>
              </div>
              <div style={{fontSize: 12, color: "var(--ink-500)", lineHeight: 1.45}}>{p.desc}</div>
            </div>
          );
        })}
      </div>

      <h3 className="section-title">Notering om beteendedesign i detta flöde</h3>
      <div className="kpi-card">
        {ed.editing ? (
          <textarea className="field" rows={5} value={ed.draft.notes || ""} onChange={(e) => ed.update("notes", e.target.value)} placeholder="t.ex. Anchoring i E2 mot 'om du köpte FWA på öppna marknaden'" />
        ) : (
          <TextValue value={content.notes} placeholder="Beskriv hur principerna används i flödet" multiline />
        )}
      </div>
    </div>
  );
};

// ---------------- 6. Anteckningar ----------------

window.NotesTab = function NotesTab({ useCase, notes, currentUser, onChange }) {
  const [draft, setDraft] = useTabState("");
  const [busy, setBusy] = useTabState(false);
  const [editingId, setEditingId] = useTabState(null);
  const [editDraft, setEditDraft] = useTabState("");

  async function add() {
    if (!draft.trim()) return;
    setBusy(true);
    try {
      const tq = window.__currentTenantQuery || "";
      await window.api.post(`/use-cases/${useCase.slug}/notes${tq}`, { body: draft });
      setDraft("");
      onChange && onChange();
    } catch (e) {
      alert("Kunde inte spara anteckning: " + e.message);
    } finally {
      setBusy(false);
    }
  }

  async function update(id) {
    setBusy(true);
    try {
      const tq = window.__currentTenantQuery || "";
      await window.api.patch(`/notes/${id}${tq}`, { body: editDraft });
      setEditingId(null);
      onChange && onChange();
    } finally {
      setBusy(false);
    }
  }

  async function remove(id) {
    if (!confirm("Ta bort anteckningen?")) return;
    setBusy(true);
    try {
      const tq = window.__currentTenantQuery || "";
      await window.api.delete(`/notes/${id}${tq}`);
      onChange && onChange();
    } finally {
      setBusy(false);
    }
  }

  return (
    <div className="tab-panel">
      <h3 className="section-title">Anteckningar</h3>
      <p className="section-sub">Synliga för alla i {useCase.tenantName || "ditt team"}. Författaren kan redigera och ta bort.</p>

      <div className="kpi-card" style={{marginBottom: 18}}>
        <textarea
          className="field"
          rows={3}
          value={draft}
          onChange={(e) => setDraft(e.target.value)}
          placeholder="Skriv en anteckning…"
        />
        <div style={{marginTop: 10, display: "flex", justifyContent: "flex-end"}}>
          <button className="btn btn-primary btn-sm" onClick={add} disabled={busy || !draft.trim()}>
            {busy ? <span className="spinner" /> : null}
            Lägg till
          </button>
        </div>
      </div>

      {notes.length === 0 && (
        <div className="empty"><div>Inga anteckningar än.</div></div>
      )}

      {notes.map((n) => (
        <div key={n.id} className="note">
          <div className="note-head">
            <span className="note-author">{n.author ? (n.author.name || n.author.email) : "Okänd"}</span>
            <span>·</span>
            <span>{formatDate(n.createdAt)}</span>
            {n.updatedAt && n.updatedAt !== n.createdAt && <span style={{fontStyle: "italic"}}>(redigerad)</span>}
          </div>
          {editingId === n.id ? (
            <>
              <textarea className="field" rows={3} value={editDraft} onChange={(e) => setEditDraft(e.target.value)} />
              <div className="note-actions">
                <button className="btn btn-ghost btn-sm" onClick={() => setEditingId(null)}>Avbryt</button>
                <button className="btn btn-primary btn-sm" onClick={() => update(n.id)} disabled={busy}>Spara</button>
              </div>
            </>
          ) : (
            <>
              <div className="note-body">{n.body}</div>
              {n.author && currentUser && n.author.id === currentUser.id && (
                <div className="note-actions">
                  <button className="btn btn-ghost btn-sm" onClick={() => { setEditingId(n.id); setEditDraft(n.body); }}>Redigera</button>
                  <button className="btn btn-danger btn-sm" onClick={() => remove(n.id)}>Ta bort</button>
                </div>
              )}
            </>
          )}
        </div>
      ))}
    </div>
  );
};

function formatDate(iso) {
  if (!iso) return "";
  const d = new Date(iso.replace(" ", "T") + (iso.endsWith("Z") ? "" : "Z"));
  if (Number.isNaN(d.getTime())) return iso;
  return d.toLocaleString("sv-SE", { dateStyle: "medium", timeStyle: "short" });
}