/* ============================================================
   lifestyle.jsx — Energie, Slaap, Lichaam & Training,
                   Tijdsbesteding, Identiteit & Missie
   ============================================================ */

/* ── Seed data ─────────────────────────────────────────────── */
const ENERGIE_SEED = {
  today: { energie: 7, mentaal: 7, fysiek: 7, lek: "Veel kleine beslissingen", gever: "Vroeg opstaan en trainen" },
  history: [6,7,5,8,7,6,7],
};

const SLAAP_SEED = {
  history: [
    { uren: 7.5, kwaliteit: 4 }, { uren: 6.0, kwaliteit: 3 },
    { uren: 8.0, kwaliteit: 5 }, { uren: 7.0, kwaliteit: 4 },
    { uren: 6.5, kwaliteit: 3 }, { uren: 7.5, kwaliteit: 4 },
    { uren: 8.5, kwaliteit: 5 },
  ],
};

const TRAINING_SEED = [
  { id: "tr1", datum: "Ma", type: "Krachttraining", duur: 62, notes: "Deadlift PR" },
  { id: "tr2", datum: "Wo", type: "Hardlopen",     duur: 48, notes: "8 km" },
  { id: "tr3", datum: "Vr", type: "HYROX",         duur: 55, notes: "Goede tijd" },
  { id: "tr4", datum: "Zo", type: "Lange duurloop", duur: 90, notes: "15 km Amstel" },
];

const TIJDS_SEED = [
  { id: "td1", naam: "Werk aan bedrijf",         uren: 12, kleur: "var(--blue)",   icon: "trend" },
  { id: "td2", naam: "Werk in bedrijf",          uren: 18, kleur: "var(--lilac)",  icon: "wallet" },
  { id: "td3", naam: "Sport & training",         uren: 6,  kleur: "var(--accent)", icon: "dumbbell" },
  { id: "td4", naam: "Slaap",                    uren: 49, kleur: "var(--teal)",   icon: "moon" },
  { id: "td5", naam: "Familie, relatie & vrienden", uren: 10, kleur: "var(--rose)", icon: "heart" },
  { id: "td6", naam: "Ontspanning",              uren: 8,  kleur: "var(--amber)",  icon: "coffee" },
  { id: "td7", naam: "Creatie",                  uren: 5,  kleur: "var(--sage)",   icon: "sparkle" },
  { id: "td8", naam: "Leren & groei",            uren: 4,  kleur: "var(--lilac)",  icon: "book" },
  { id: "td9", naam: "Afleiding",                uren: 6,  kleur: "var(--text-3)", icon: "minus" },
];

const IDENTITEIT_SEED = {
  identiteit: "Sportschool eigenaar",
  missie: "Vrijheid en impact creëren",
  waarden: [
    { id: "w1", tekst: "Discipline boven motivatie" },
    { id: "w2", tekst: "Gezondheid als fundament" },
    { id: "w3", tekst: "Eerlijkheid in alles" },
    { id: "w4", tekst: "Continu groeien" },
  ],
  keuzes: [
    { id: "k1", tekst: "Elke dag trainen, ook als het moeilijk is" },
    { id: "k2", tekst: "Geen alcohol tijdens trainingsblokken" },
    { id: "k3", tekst: "Dagelijks 30 min leren over ondernemen" },
    { id: "k4", tekst: "Omgeven met mensen die je optillen" },
  ],
};

/* ════════════════════════════════════════════════════════════
   1. ENERGIE WIDGET
   ════════════════════════════════════════════════════════════ */
function EnergieWidget() {
  const [data, setData] = useLocalState("energie", ENERGIE_SEED);
  const [editLek, setEditLek] = useState(false);
  const [editGever, setEditGever] = useState(false);
  const [draftLek, setDraftLek] = useState("");
  const [draftGever, setDraftGever] = useState("");

  const setScore = (key, val) => setData(d => ({ ...d, today: { ...d.today, [key]: val } }));

  const gem = Math.round((data.today.energie + data.today.mentaal + data.today.fysiek) / 3);

  const ScoreRow = ({ label, sleutel, kleur }) => {
    const val = data.today[sleutel];
    return (
      <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 8 }}>
        <div style={{ fontSize: 12, fontWeight: 700, color: "var(--text-2)", width: 110, flexShrink: 0 }}>{label}</div>
        <div style={{ display: "flex", gap: 3, flex: 1 }}>
          {Array.from({ length: 10 }).map((_, i) => (
            <button key={i} onClick={() => setScore(sleutel, i + 1)} style={{
              flex: 1, height: 18, borderRadius: 4, border: "none", cursor: "pointer",
              background: i < val ? kleur : "var(--surface-3)",
              transition: "all 0.15s", opacity: i < val ? 1 : 0.4,
            }} />
          ))}
        </div>
        <div className="mono" style={{ fontSize: 13, fontWeight: 800, color: kleur, width: 20, textAlign: "right" }}>{val}</div>
      </div>
    );
  };

  return (
    <div className="card fade-in" style={{ animationDelay: "0.1s" }}>
      <WHead icon="sun" title="Energie" sub={`Vandaag gemiddeld ${gem}/10`} accent />

      <ScoreRow label="Energielevel"      sleutel="energie" kleur="var(--amber)" />
      <ScoreRow label="Mentale helderheid" sleutel="mentaal"  kleur="var(--blue)" />
      <ScoreRow label="Fysieke energie"   sleutel="fysiek"  kleur="var(--accent)" />

      <div className="divider" />

      {/* Energielek */}
      <div style={{ marginBottom: 8 }}>
        <div style={{ fontSize: 11, fontWeight: 700, color: "var(--bad)", marginBottom: 4, display: "flex", alignItems: "center", gap: 4 }}>
          ⚡ Grootste energielek
        </div>
        {editLek ? (
          <div style={{ display: "flex", gap: 6 }}>
            <input autoFocus value={draftLek} onChange={e => setDraftLek(e.target.value)}
              onKeyDown={e => { if (e.key === "Enter") { setData(d => ({ ...d, today: { ...d.today, lek: draftLek } })); setEditLek(false); }}}
              style={{ flex: 1, height: 32, border: "1px solid var(--border)", background: "var(--surface-2)", borderRadius: 8, padding: "0 10px", fontSize: 12.5, outline: "none", color: "var(--text)" }} />
            <button onClick={() => { setData(d => ({ ...d, today: { ...d.today, lek: draftLek } })); setEditLek(false); }}
              style={{ height: 32, padding: "0 12px", borderRadius: 8, background: "var(--accent)", color: "#fff", border: "none", fontWeight: 700, cursor: "pointer", fontSize: 12 }}>✓</button>
          </div>
        ) : (
          <div onClick={() => { setDraftLek(data.today.lek); setEditLek(true); }}
            style={{ fontSize: 13, fontWeight: 600, color: "var(--text)", padding: "6px 10px", borderRadius: 8, background: "var(--surface-2)", cursor: "pointer", border: "1px solid var(--border)" }}>
            {data.today.lek || "Klik om in te vullen…"}
          </div>
        )}
      </div>

      {/* Energiegever */}
      <div>
        <div style={{ fontSize: 11, fontWeight: 700, color: "var(--good)", marginBottom: 4 }}>
          ✨ Grootste energiegever
        </div>
        {editGever ? (
          <div style={{ display: "flex", gap: 6 }}>
            <input autoFocus value={draftGever} onChange={e => setDraftGever(e.target.value)}
              onKeyDown={e => { if (e.key === "Enter") { setData(d => ({ ...d, today: { ...d.today, gever: draftGever } })); setEditGever(false); }}}
              style={{ flex: 1, height: 32, border: "1px solid var(--border)", background: "var(--surface-2)", borderRadius: 8, padding: "0 10px", fontSize: 12.5, outline: "none", color: "var(--text)" }} />
            <button onClick={() => { setData(d => ({ ...d, today: { ...d.today, gever: draftGever } })); setEditGever(false); }}
              style={{ height: 32, padding: "0 12px", borderRadius: 8, background: "var(--accent)", color: "#fff", border: "none", fontWeight: 700, cursor: "pointer", fontSize: 12 }}>✓</button>
          </div>
        ) : (
          <div onClick={() => { setDraftGever(data.today.gever); setEditGever(true); }}
            style={{ fontSize: 13, fontWeight: 600, color: "var(--text)", padding: "6px 10px", borderRadius: 8, background: "var(--surface-2)", cursor: "pointer", border: "1px solid var(--border)" }}>
            {data.today.gever || "Klik om in te vullen…"}
          </div>
        )}
      </div>

      <div className="divider" />

      {/* 7-daags historiek */}
      <div>
        <div className="lbl" style={{ marginBottom: 6 }}>Afgelopen 7 dagen</div>
        <div style={{ display: "flex", alignItems: "flex-end", gap: 4, height: 36 }}>
          {data.history.map((v, i) => (
            <div key={i} style={{ flex: 1, height: `${(v / 10) * 100}%`, background: i === data.history.length - 1 ? "var(--amber)" : "var(--surface-3)", borderRadius: 3, transition: "all 0.3s", minHeight: 4 }} />
          ))}
        </div>
      </div>
    </div>
  );
}

/* ════════════════════════════════════════════════════════════
   2. SLAAP & HERSTEL WIDGET
   ════════════════════════════════════════════════════════════ */
function SlaapWidget() {
  const [data, setData] = useLocalState("slaap", SLAAP_SEED);
  const [editMode, setEditMode] = useState(false);
  const [draftUren, setDraftUren] = useState("");
  const [draftKwal, setDraftKwal] = useState(4);

  const vandaag = data.history[data.history.length - 1];
  const gemUren = (data.history.reduce((s, d) => s + d.uren, 0) / data.history.length).toFixed(1);
  const gemKwal = (data.history.reduce((s, d) => s + d.kwaliteit, 0) / data.history.length).toFixed(1);

  function logSlaap() {
    const uren = parseFloat(draftUren) || 7;
    const entry = { uren, kwaliteit: draftKwal };
    setData(d => ({ history: [...d.history.slice(-6), entry] }));
    setEditMode(false);
  }

  const kwalLabel = ["", "Slecht", "Matig", "Oké", "Goed", "Top"];
  const kwalKleur = ["", "var(--bad)", "var(--amber)", "var(--blue)", "var(--sage)", "var(--good)"];

  return (
    <div className="card fade-in" style={{ animationDelay: "0.12s" }}>
      <WHead icon="moon" title="Slaap & Herstel" sub={`Gem. ${gemUren}u · kwaliteit ${gemKwal}/5`} accent
        action="+ Log" onAction={() => { setDraftUren(""); setDraftKwal(4); setEditMode(v => !v); }} />

      {editMode && (
        <div style={{ padding: 12, background: "var(--surface-2)", borderRadius: 10, border: "1px solid var(--border)", marginBottom: 12, display: "flex", flexDirection: "column", gap: 10 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
            <span style={{ fontSize: 12.5, fontWeight: 700, color: "var(--text-2)", width: 100 }}>Uren geslapen</span>
            <input type="number" step="0.5" min="0" max="12" value={draftUren} onChange={e => setDraftUren(e.target.value)}
              placeholder="7.5"
              style={{ flex: 1, height: 34, border: "1px solid var(--border)", background: "var(--surface)", borderRadius: 8, padding: "0 10px", fontSize: 13, outline: "none", color: "var(--text)" }} />
          </div>
          <div>
            <div style={{ fontSize: 12.5, fontWeight: 700, color: "var(--text-2)", marginBottom: 6 }}>Kwaliteit</div>
            <div style={{ display: "flex", gap: 6 }}>
              {[1,2,3,4,5].map(k => (
                <button key={k} onClick={() => setDraftKwal(k)} style={{
                  flex: 1, height: 32, borderRadius: 8, border: "1.5px solid " + (draftKwal === k ? kwalKleur[k] : "var(--border)"),
                  background: draftKwal === k ? kwalKleur[k] : "var(--surface)", color: draftKwal === k ? "#fff" : "var(--text-3)",
                  fontWeight: 700, fontSize: 12, cursor: "pointer", transition: "all 0.15s",
                }}>{kwalLabel[k]}</button>
              ))}
            </div>
          </div>
          <button onClick={logSlaap} style={{ height: 34, borderRadius: 8, background: "var(--accent)", color: "#fff", border: "none", fontWeight: 700, cursor: "pointer", fontSize: 13 }}>
            Opslaan
          </button>
        </div>
      )}

      {/* Vandaag */}
      <div style={{ display: "flex", gap: 12, marginBottom: 14 }}>
        <div style={{ flex: 1, padding: 12, borderRadius: 12, background: "var(--surface-2)", border: "1px solid var(--border)", textAlign: "center" }}>
          <div style={{ fontSize: 28, fontWeight: 800, color: "var(--teal)", letterSpacing: "-0.03em" }}>{vandaag.uren}<span style={{ fontSize: 14, fontWeight: 600 }}>u</span></div>
          <div style={{ fontSize: 11, color: "var(--text-3)", fontWeight: 600 }}>Afgelopen nacht</div>
        </div>
        <div style={{ flex: 1, padding: 12, borderRadius: 12, background: "var(--surface-2)", border: "1px solid var(--border)", textAlign: "center" }}>
          <div style={{ fontSize: 28, fontWeight: 800, color: kwalKleur[vandaag.kwaliteit], letterSpacing: "-0.03em" }}>{vandaag.kwaliteit}<span style={{ fontSize: 14, fontWeight: 600 }}>/5</span></div>
          <div style={{ fontSize: 11, color: "var(--text-3)", fontWeight: 600 }}>{kwalLabel[vandaag.kwaliteit]}</div>
        </div>
      </div>

      {/* Historiek grafiek */}
      <div className="lbl" style={{ marginBottom: 6 }}>Afgelopen week</div>
      <div style={{ display: "flex", alignItems: "flex-end", gap: 4, height: 52 }}>
        {data.history.map((d, i) => {
          const isToday = i === data.history.length - 1;
          const h = Math.min((d.uren / 10) * 100, 100);
          return (
            <div key={i} style={{ flex: 1, display: "flex", flexDirection: "column", alignItems: "center", gap: 3 }}>
              <div style={{ width: "100%", height: 44, display: "flex", alignItems: "flex-end" }}>
                <div title={`${d.uren}u · ${kwalLabel[d.kwaliteit]}`} style={{
                  width: "100%", height: `${h}%`, minHeight: 4,
                  background: isToday ? "var(--teal)" : kwalKleur[d.kwaliteit],
                  borderRadius: 4, opacity: isToday ? 1 : 0.6, transition: "all 0.3s",
                }} />
              </div>
              <span style={{ fontSize: 9, color: "var(--text-3)", fontWeight: 700 }}>{["Ma","Di","Wo","Do","Vr","Za","Zo"][i]}</span>
            </div>
          );
        })}
      </div>
    </div>
  );
}

/* ════════════════════════════════════════════════════════════
   3. LICHAAM & TRAINING WIDGET
   ════════════════════════════════════════════════════════════ */
const TRAINING_TYPES = ["Krachttraining", "Hardlopen", "HYROX", "Yoga", "Zwemmen", "Fietsen", "Overig"];

function LichaamWidget() {
  const [sessies, setSessies] = useLocalState("training", TRAINING_SEED);
  const [adding, setAdding] = useState(false);
  const [draft, setDraft] = useState({ type: "Krachttraining", duur: "", notes: "" });

  const weekTotaal = sessies.reduce((s, t) => s + (t.duur || 0), 0);
  const aantalSessies = sessies.length;

  function addSessie() {
    if (!draft.duur) return;
    const dagen = ["Zo","Ma","Di","Wo","Do","Vr","Za"];
    setSessies(s => [{ id: "tr" + Date.now(), datum: dagen[new Date().getDay()], ...draft, duur: parseInt(draft.duur) || 0 }, ...s].slice(0, 10));
    setDraft({ type: "Krachttraining", duur: "", notes: "" });
    setAdding(false);
  }

  return (
    <div className="card fade-in" style={{ animationDelay: "0.14s" }}>
      <WHead icon="dumbbell" title="Lichaam & Training" sub={`${aantalSessies} sessies · ${weekTotaal} min`} accent
        action={<Icon name="plus" style={{ transform: adding ? "rotate(45deg)" : "none", transition: "transform 0.2s" }} />}
        onAction={() => setAdding(v => !v)} />

      {adding && (
        <div style={{ padding: 12, background: "var(--surface-2)", borderRadius: 10, border: "1px solid var(--border)", marginBottom: 12, display: "flex", flexDirection: "column", gap: 8 }}>
          <div style={{ display: "flex", gap: 8 }}>
            <select value={draft.type} onChange={e => setDraft(d => ({ ...d, type: e.target.value }))}
              style={{ flex: 1, height: 34, border: "1px solid var(--border)", background: "var(--surface)", borderRadius: 8, padding: "0 10px", fontSize: 12.5, outline: "none", color: "var(--text)" }}>
              {TRAINING_TYPES.map(t => <option key={t}>{t}</option>)}
            </select>
            <input type="number" placeholder="Min" value={draft.duur} onChange={e => setDraft(d => ({ ...d, duur: e.target.value }))}
              style={{ width: 70, height: 34, border: "1px solid var(--border)", background: "var(--surface)", borderRadius: 8, padding: "0 10px", fontSize: 12.5, outline: "none", color: "var(--text)" }} />
          </div>
          <input placeholder="Notitie (optioneel)" value={draft.notes} onChange={e => setDraft(d => ({ ...d, notes: e.target.value }))}
            onKeyDown={e => e.key === "Enter" && addSessie()}
            style={{ height: 34, border: "1px solid var(--border)", background: "var(--surface)", borderRadius: 8, padding: "0 10px", fontSize: 12.5, outline: "none", color: "var(--text)" }} />
          <button onClick={addSessie} style={{ height: 34, borderRadius: 8, background: "var(--accent)", color: "#fff", border: "none", fontWeight: 700, cursor: "pointer", fontSize: 13 }}>
            Toevoegen
          </button>
        </div>
      )}

      <div style={{ display: "grid", gap: 7, flex: 1, overflowY: "auto" }}>
        {sessies.slice(0, 5).map(s => (
          <div key={s.id} style={{ display: "flex", alignItems: "center", gap: 10, padding: "8px 10px", borderRadius: 10, background: "var(--surface-2)", border: "1px solid var(--border)" }}>
            <div style={{ width: 32, height: 32, borderRadius: 9, background: "var(--accent-weak)", color: "var(--accent)", display: "grid", placeItems: "center", flexShrink: 0 }}>
              <Icon name="dumbbell" width="15" height="15" />
            </div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 13, fontWeight: 700 }}>{s.type}</div>
              {s.notes && <div style={{ fontSize: 11, color: "var(--text-3)", fontWeight: 600 }}>{s.notes}</div>}
            </div>
            <div style={{ textAlign: "right", flexShrink: 0 }}>
              <div className="mono" style={{ fontSize: 13, fontWeight: 700, color: "var(--accent)" }}>{s.duur}m</div>
              <div style={{ fontSize: 10.5, color: "var(--text-3)", fontWeight: 600 }}>{s.datum}</div>
            </div>
            <button onClick={() => setSessies(ss => ss.filter(x => x.id !== s.id))}
              style={{ width: 24, height: 24, borderRadius: 7, border: "1px solid var(--border)", background: "none", cursor: "pointer", color: "var(--text-3)", display: "grid", placeItems: "center", flexShrink: 0 }}>
              <Icon name="minus" width="13" height="13" />
            </button>
          </div>
        ))}
        {sessies.length === 0 && <div style={{ textAlign: "center", color: "var(--text-3)", fontSize: 13, padding: "16px 0", fontWeight: 600 }}>Nog geen sessies — voeg er een toe ✦</div>}
      </div>
    </div>
  );
}

/* ════════════════════════════════════════════════════════════
   4. TIJDSBESTEDING WIDGET
   ════════════════════════════════════════════════════════════ */
function TijdsbestedingWidget() {
  const [cats, setCats] = useLocalState("tijdbesteding", TIJDS_SEED);
  const [editing, setEditing] = useState(null); // id van categorie in bewerking
  const [draftUren, setDraftUren] = useState("");

  const totaal = cats.reduce((s, c) => s + c.uren, 0);
  const maxUren = Math.max(...cats.map(c => c.uren), 1);

  function saveUren(id) {
    const u = parseFloat(draftUren);
    if (!isNaN(u) && u >= 0) setCats(cs => cs.map(c => c.id === id ? { ...c, uren: u } : c));
    setEditing(null);
  }

  return (
    <div className="card fade-in" style={{ animationDelay: "0.1s" }}>
      <WHead icon="clock" title="Tijdsbesteding" sub={`${totaal}u geteld deze week`} accent />
      <div style={{ display: "grid", gap: 7, flex: 1 }}>
        {cats.map(cat => {
          const pct = Math.round((cat.uren / 168) * 100); // 168u per week
          const barPct = Math.round((cat.uren / maxUren) * 100);
          const isEditing = editing === cat.id;
          return (
            <div key={cat.id} style={{ display: "flex", alignItems: "center", gap: 8 }}>
              <div style={{ width: 26, height: 26, borderRadius: 8, background: `color-mix(in srgb, ${cat.kleur} 15%, var(--surface-2))`, color: cat.kleur, display: "grid", placeItems: "center", flexShrink: 0 }}>
                <Icon name={cat.icon} width="13" height="13" />
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 3 }}>
                  <span style={{ fontSize: 12, fontWeight: 700, color: "var(--text)" }}>{cat.naam}</span>
                  <span style={{ fontSize: 11, fontWeight: 700, color: "var(--text-3)" }}>{pct}%</span>
                </div>
                <div className="bar" style={{ height: 6 }}>
                  <i style={{ width: `${barPct}%`, background: cat.kleur }} />
                </div>
              </div>
              {isEditing ? (
                <div style={{ display: "flex", gap: 4, alignItems: "center", flexShrink: 0 }}>
                  <input autoFocus type="number" value={draftUren} onChange={e => setDraftUren(e.target.value)}
                    onKeyDown={e => { if (e.key === "Enter") saveUren(cat.id); if (e.key === "Escape") setEditing(null); }}
                    style={{ width: 48, height: 26, border: "1px solid var(--accent)", borderRadius: 6, padding: "0 6px", fontSize: 12, outline: "none", background: "var(--surface)", color: "var(--text)", textAlign: "center" }} />
                  <button onClick={() => saveUren(cat.id)} style={{ height: 26, padding: "0 8px", borderRadius: 6, background: "var(--accent)", color: "#fff", border: "none", fontWeight: 700, cursor: "pointer", fontSize: 11 }}>✓</button>
                </div>
              ) : (
                <div onClick={() => { setDraftUren(String(cat.uren)); setEditing(cat.id); }}
                  className="mono" style={{ fontSize: 12.5, fontWeight: 800, color: cat.kleur, width: 36, textAlign: "right", cursor: "pointer", flexShrink: 0 }}>
                  {cat.uren}u
                </div>
              )}
            </div>
          );
        })}
      </div>
      <div className="divider" />
      <div style={{ fontSize: 11.5, color: "var(--text-3)", fontWeight: 600, textAlign: "center" }}>
        Klik op een getal om uren aan te passen · 168u per week
      </div>
    </div>
  );
}

/* ════════════════════════════════════════════════════════════
   5. IDENTITEIT & MISSIE WIDGET
   ════════════════════════════════════════════════════════════ */
function IdentiteitWidget() {
  const [data, setData] = useLocalState("identiteit", IDENTITEIT_SEED);
  const [editField, setEditField] = useState(null);
  const [draftText, setDraftText] = useState("");
  const [newWaarde, setNewWaarde] = useState("");
  const [newKeuze, setNewKeuze] = useState("");
  const [tab, setTab] = useState("waarden"); // waarden | keuzes

  function saveField(field) {
    setData(d => ({ ...d, [field]: draftText }));
    setEditField(null);
  }
  function addWaarde() {
    if (!newWaarde.trim()) return;
    setData(d => ({ ...d, waarden: [...d.waarden, { id: "w" + Date.now(), tekst: newWaarde.trim() }] }));
    setNewWaarde("");
  }
  function addKeuze() {
    if (!newKeuze.trim()) return;
    setData(d => ({ ...d, keuzes: [...d.keuzes, { id: "k" + Date.now(), tekst: newKeuze.trim() }] }));
    setNewKeuze("");
  }

  const EditableField = ({ field, label, groot }) => {
    const isEditing = editField === field;
    return (
      <div style={{ marginBottom: 10 }}>
        <div style={{ fontSize: 10.5, fontWeight: 700, color: "var(--text-3)", textTransform: "uppercase", letterSpacing: "0.06em", marginBottom: 4 }}>{label}</div>
        {isEditing ? (
          <div style={{ display: "flex", gap: 6 }}>
            <input autoFocus value={draftText} onChange={e => setDraftText(e.target.value)}
              onKeyDown={e => { if (e.key === "Enter") saveField(field); if (e.key === "Escape") setEditField(null); }}
              style={{ flex: 1, height: 36, border: "1px solid var(--accent)", background: "var(--surface-2)", borderRadius: 8, padding: "0 10px", fontSize: groot ? 15 : 13, fontWeight: groot ? 800 : 600, outline: "none", color: "var(--text)" }} />
            <button onClick={() => saveField(field)} style={{ height: 36, padding: "0 12px", borderRadius: 8, background: "var(--accent)", color: "#fff", border: "none", fontWeight: 700, cursor: "pointer" }}>✓</button>
          </div>
        ) : (
          <div onClick={() => { setDraftText(data[field]); setEditField(field); }}
            style={{ fontSize: groot ? 16 : 13.5, fontWeight: groot ? 800 : 600, color: groot ? "var(--text)" : "var(--text-2)", cursor: "pointer", padding: "6px 10px", borderRadius: 8, background: "var(--surface-2)", border: "1px solid var(--border)", lineHeight: 1.3 }}>
            {data[field]}
          </div>
        )}
      </div>
    );
  };

  return (
    <div className="card fade-in" style={{ animationDelay: "0.12s" }}>
      <WHead icon="compass" title="Identiteit & Missie" sub="Wie ben je op weg te worden" accent />

      <EditableField field="identiteit" label="Ik ben een" groot />
      <EditableField field="missie" label="Mijn missie" />

      <div className="divider" />

      {/* Tabs */}
      <div style={{ display: "flex", gap: 6, marginBottom: 12 }}>
        {[["waarden", "Kernwaarden"], ["keuzes", "Mijn keuzes"]].map(([key, lbl]) => (
          <button key={key} onClick={() => setTab(key)} style={{
            flex: 1, height: 30, borderRadius: 8, fontSize: 12, fontWeight: 700, cursor: "pointer",
            background: tab === key ? "var(--accent)" : "var(--surface-2)",
            color: tab === key ? "#fff" : "var(--text-3)",
            border: "1px solid " + (tab === key ? "var(--accent)" : "var(--border)"),
          }}>{lbl}</button>
        ))}
      </div>

      {/* Waarden */}
      {tab === "waarden" && (
        <div style={{ display: "grid", gap: 6, flex: 1 }}>
          {data.waarden.map(w => (
            <div key={w.id} style={{ display: "flex", alignItems: "center", gap: 8, padding: "7px 10px", borderRadius: 9, background: "var(--surface-2)", border: "1px solid var(--border)" }}>
              <div style={{ width: 6, height: 6, borderRadius: 99, background: "var(--accent)", flexShrink: 0 }} />
              <div style={{ flex: 1, fontSize: 13, fontWeight: 600 }}>{w.tekst}</div>
              <button onClick={() => setData(d => ({ ...d, waarden: d.waarden.filter(x => x.id !== w.id) }))}
                style={{ width: 22, height: 22, borderRadius: 6, border: "1px solid var(--border)", background: "none", cursor: "pointer", color: "var(--text-3)", display: "grid", placeItems: "center" }}>
                <Icon name="minus" width="12" height="12" />
              </button>
            </div>
          ))}
          <div style={{ display: "flex", gap: 6, marginTop: 4 }}>
            <input value={newWaarde} onChange={e => setNewWaarde(e.target.value)}
              onKeyDown={e => e.key === "Enter" && addWaarde()}
              placeholder="Nieuwe waarde…"
              style={{ flex: 1, height: 32, border: "1px solid var(--border)", background: "var(--surface-2)", borderRadius: 8, padding: "0 10px", fontSize: 12.5, outline: "none", color: "var(--text)" }} />
            <button onClick={addWaarde} style={{ width: 32, height: 32, borderRadius: 8, background: "var(--accent)", color: "#fff", border: "none", fontWeight: 700, cursor: "pointer", fontSize: 16 }}>+</button>
          </div>
        </div>
      )}

      {/* Keuzes */}
      {tab === "keuzes" && (
        <div style={{ display: "grid", gap: 6, flex: 1 }}>
          {data.keuzes.map(k => (
            <div key={k.id} style={{ display: "flex", alignItems: "center", gap: 8, padding: "7px 10px", borderRadius: 9, background: "var(--surface-2)", border: "1px solid var(--border)" }}>
              <div style={{ fontSize: 14, flexShrink: 0 }}>→</div>
              <div style={{ flex: 1, fontSize: 13, fontWeight: 600, lineHeight: 1.3 }}>{k.tekst}</div>
              <button onClick={() => setData(d => ({ ...d, keuzes: d.keuzes.filter(x => x.id !== k.id) }))}
                style={{ width: 22, height: 22, borderRadius: 6, border: "1px solid var(--border)", background: "none", cursor: "pointer", color: "var(--text-3)", display: "grid", placeItems: "center", flexShrink: 0 }}>
                <Icon name="minus" width="12" height="12" />
              </button>
            </div>
          ))}
          <div style={{ display: "flex", gap: 6, marginTop: 4 }}>
            <input value={newKeuze} onChange={e => setNewKeuze(e.target.value)}
              onKeyDown={e => e.key === "Enter" && addKeuze()}
              placeholder="Nieuwe keuze…"
              style={{ flex: 1, height: 32, border: "1px solid var(--border)", background: "var(--surface-2)", borderRadius: 8, padding: "0 10px", fontSize: 12.5, outline: "none", color: "var(--text)" }} />
            <button onClick={addKeuze} style={{ width: 32, height: 32, borderRadius: 8, background: "var(--accent)", color: "#fff", border: "none", fontWeight: 700, cursor: "pointer", fontSize: 16 }}>+</button>
          </div>
        </div>
      )}
    </div>
  );
}

Object.assign(window, { EnergieWidget, SlaapWidget, LichaamWidget, TijdsbestedingWidget, IdentiteitWidget });