/* ===========================================================
   Reiktable — Journal, NPCs, Quests & Timeline
   Exposes (window): JournalView, NpcsView, QuestsView
   =========================================================== */
(function () {
  const { useState } = React;
  const ID = window.WFRP.ID;

  // ================= JOURNAL =================
  window.JournalView = function () {
    const [s, update] = window.useStore();
    const entries = [...(s.journal || [])].sort((a, b) => b.session - a.session);
    const [q, setQ] = useState("");
    const [edit, setEdit] = useState(null);
    const filtered = entries.filter(e => !q || (e.title + e.body + (e.tags || []).join(" ")).toLowerCase().includes(q.toLowerCase()));

    function save(e) {
      update(st => {
        if (!st.journal) st.journal = [];
        const i = st.journal.findIndex(x => x.id === e.id);
        if (i >= 0) st.journal[i] = e; else st.journal.unshift({ ...e, id: ID() });
      });
      setEdit(null); window.toast("Journal saved", "grn");
    }
    function del(id) { update(st => { st.journal = st.journal.filter(x => x.id !== id); }); }

    return (
      <div className="content narrow fade-in">
        <div className="page-h">
          <div><h1>Session Journal</h1><p>The chronicle of the campaign, session by session.</p></div>
          <div className="sp"></div>
          <Btn className="pri" icon="plus" onClick={() => setEdit({ id: null, session: (s.campaign?.session || 1), date: "", title: "", body: "", tags: [] })}>New Entry</Btn>
        </div>
        <div className="searchbar" style={{ marginBottom: 16 }}><Icon name="search" /><input placeholder="Search the chronicle…" value={q} onChange={e => setQ(e.target.value)} /></div>
        {filtered.length === 0 ? <Empty icon="journal" title="Nothing written yet">Record what happened at the table.</Empty> : (
          <div className="col g12">
            {filtered.map(e => (
              <div key={e.id} className="card">
                <div className="card-b">
                  <div className="between" style={{ alignItems: "flex-start" }}>
                    <div>
                      <div className="center g8 wrap"><span className="tag acc">Session {e.session}</span>{e.date && <span className="eyebrow">{e.date}</span>}</div>
                      <h3 style={{ fontSize: 18, marginTop: 8 }}>{e.title}</h3>
                    </div>
                    <div className="center g6">
                      <button className="btn icon sm ghost" onClick={() => setEdit(e)}><Icon name="edit" size={14} /></button>
                      <button className="btn icon sm danger" onClick={() => del(e.id)}><Icon name="trash" size={14} /></button>
                    </div>
                  </div>
                  <p className="tx2" style={{ marginTop: 10, whiteSpace: "pre-wrap", lineHeight: 1.65 }}>{e.body}</p>
                  {(e.tags || []).length > 0 && <div className="center g6 wrap mt10">{e.tags.map(t => <span key={t} className="tag">{t}</span>)}</div>}
                </div>
              </div>
            ))}
          </div>
        )}
        {edit && <EntryEdit e={edit} onSave={save} onClose={() => setEdit(null)} />}
      </div>
    );
  };

  function EntryEdit({ e, onSave, onClose }) {
    const [d, setD] = useState({ ...e, tags: e.tags || [] });
    const [tag, setTag] = useState("");
    const set = (k, v) => setD({ ...d, [k]: v });
    return (
      <Modal title={e.id ? "Edit Entry" : "New Journal Entry"} icon="journal" onClose={onClose} size="lg"
        footer={<><Btn className="ghost" onClick={onClose}>Cancel</Btn><Btn className="pri" icon="check" onClick={() => d.title.trim() && onSave(d)}>Save</Btn></>}>
        <div className="grid g2" style={{ marginBottom: 12 }}>
          <Field label="Session #"><input className="input num" value={d.session} onChange={e => set("session", parseInt(e.target.value || 1))} /></Field>
          <Field label="In-world date"><input className="input" value={d.date} onChange={e => set("date", e.target.value)} placeholder="13 Nachgeheim, 2512 IC" /></Field>
        </div>
        <Field label="Title"><input className="input" value={d.title} onChange={e => set("title", e.target.value)} /></Field>
        <div className="mt10"><Field label="What happened"><textarea className="textarea" style={{ minHeight: 180 }} value={d.body} onChange={e => set("body", e.target.value)} /></Field></div>
        <div className="mt10"><span className="lbl" style={{ display: "block", marginBottom: 5, fontFamily: "var(--mono)", fontSize: 10.5, letterSpacing: ".06em", textTransform: "uppercase", color: "var(--tx-3)" }}>Tags</span>
          <div className="center g6 wrap mb6">{d.tags.map(t => <Tag key={t} onRemove={() => set("tags", d.tags.filter(x => x !== t))}>{t}</Tag>)}</div>
          <div className="center g8"><input className="input sm" placeholder="Add tag…" value={tag} onChange={e => setTag(e.target.value)} onKeyDown={ev => { if (ev.key === "Enter" && tag.trim()) { set("tags", [...d.tags, tag.trim()]); setTag(""); } }} /></div>
        </div>
      </Modal>
    );
  }

  // ================= NPCs =================
  window.NpcsView = function () {
    const [s, update] = window.useStore();
    const list = s.npcs || [];
    const [q, setQ] = useState("");
    const [edit, setEdit] = useState(null);
    const filtered = list.filter(n => !q || (n.name + n.role + (n.tags || []).join(" ") + n.note).toLowerCase().includes(q.toLowerCase()))
      .sort((a, b) => (b.fav ? 1 : 0) - (a.fav ? 1 : 0));

    function save(n) {
      update(st => {
        if (!st.npcs) st.npcs = [];
        const i = st.npcs.findIndex(x => x.id === n.id);
        if (i >= 0) st.npcs[i] = n; else st.npcs.push({ ...n, id: ID() });
      });
      setEdit(null); window.toast("NPC saved", "grn");
    }
    function del(id) { update(st => { st.npcs = st.npcs.filter(x => x.id !== id); }); }
    function fav(id) { update(st => { const n = st.npcs.find(x => x.id === id); if (n) n.fav = !n.fav; }); }

    return (
      <div className="content fade-in">
        <div className="page-h">
          <div><h1>NPCs & Contacts</h1><p>Everyone the party has met — friend, foe, and everything between.</p></div>
          <div className="sp"></div>
          <Btn className="pri" icon="plus" onClick={() => setEdit({ id: null, name: "", role: "", tags: [], note: "", color: "#5e6878", fav: false })}>New NPC</Btn>
        </div>
        <div className="searchbar" style={{ marginBottom: 16 }}><Icon name="search" /><input placeholder="Search NPCs…" value={q} onChange={e => setQ(e.target.value)} /></div>
        {filtered.length === 0 ? <Empty icon="users" title="No NPCs">Add the people of your world.</Empty> : (
          <div className="grid g3">
            {filtered.map(n => (
              <div key={n.id} className="card">
                <div className="card-b">
                  <div className="center g10">
                    <Avatar name={n.name} color={n.color} size="md" />
                    <div className="grow"><div className="center g6"><h3 style={{ fontSize: 16 }}>{n.name}</h3>{n.fav && <Icon name="pin" size={13} style={{ color: "var(--amb)" }} />}</div><div className="tx3" style={{ fontSize: 12.5 }}>{n.role}</div></div>
                    <button className="btn icon sm ghost" onClick={() => fav(n.id)}><Icon name="star" size={14} style={{ color: n.fav ? "var(--amb)" : "var(--tx-4)" }} fill={n.fav ? "var(--amb)" : "none"} /></button>
                  </div>
                  {(n.tags || []).length > 0 && <div className="center g6 wrap mt10">{n.tags.map(t => <span key={t} className={cls("tag", /hostile|enemy/i.test(t) ? "red" : /friend|patron|contact|companion/i.test(t) ? "grn" : "")}>{t}</span>)}</div>}
                  {n.note && <p className="tx2" style={{ fontSize: 13, marginTop: 10, lineHeight: 1.55 }}>{n.note}</p>}
                  <div className="center g6 mt10" style={{ justifyContent: "flex-end" }}>
                    <button className="btn icon sm ghost" onClick={() => setEdit(n)}><Icon name="edit" size={13} /></button>
                    <button className="btn icon sm danger" onClick={() => del(n.id)}><Icon name="trash" size={13} /></button>
                  </div>
                </div>
              </div>
            ))}
          </div>
        )}
        {edit && <NpcEdit n={edit} onSave={save} onClose={() => setEdit(null)} />}
      </div>
    );
  };

  function NpcEdit({ n, onSave, onClose }) {
    const [d, setD] = useState({ ...n, tags: n.tags || [] });
    const [tag, setTag] = useState("");
    const set = (k, v) => setD({ ...d, [k]: v });
    return (
      <Modal title={n.id ? "Edit NPC" : "New NPC"} icon="users" onClose={onClose}
        footer={<><Btn className="ghost" onClick={onClose}>Cancel</Btn><Btn className="pri" icon="check" onClick={() => d.name.trim() && onSave(d)}>Save</Btn></>}>
        <div className="center g10" style={{ marginBottom: 12 }}>
          <Avatar name={d.name || "?"} color={d.color} size="lg" />
          <div className="grow">
            <Field label="Name"><input className="input" value={d.name} onChange={e => set("name", e.target.value)} /></Field>
            <div className="center g8 mt10"><Field label="Role"><input className="input sm" value={d.role} onChange={e => set("role", e.target.value)} placeholder="Burgher, Witch Hunter…" /></Field>
              <Field label="Colour"><input className="input sm" type="color" style={{ width: 46, padding: 2 }} value={d.color} onChange={e => set("color", e.target.value)} /></Field></div>
          </div>
        </div>
        <span className="lbl" style={{ display: "block", marginBottom: 5, fontFamily: "var(--mono)", fontSize: 10.5, letterSpacing: ".06em", textTransform: "uppercase", color: "var(--tx-3)" }}>Tags</span>
        <div className="center g6 wrap mb6">{d.tags.map(t => <Tag key={t} onRemove={() => set("tags", d.tags.filter(x => x !== t))}>{t}</Tag>)}</div>
        <input className="input sm" placeholder="Add tag (Friendly, Hostile, Patron…)" value={tag} onChange={e => setTag(e.target.value)} onKeyDown={ev => { if (ev.key === "Enter" && tag.trim()) { set("tags", [...d.tags, tag.trim()]); setTag(""); } }} />
        <div className="mt10"><Field label="Notes"><textarea className="textarea" value={d.note} onChange={e => set("note", e.target.value)} /></Field></div>
      </Modal>
    );
  }

  // ================= QUESTS & TIMELINE =================
  window.QuestsView = function () {
    const [s, update] = window.useStore();
    const quests = s.quests || [];
    const timeline = [...(s.timeline || [])];
    const [edit, setEdit] = useState(null);
    const groups = [["active", "Active"], ["open", "Open"], ["done", "Completed"]];

    function save(q) {
      update(st => { if (!st.quests) st.quests = []; const i = st.quests.findIndex(x => x.id === q.id); if (i >= 0) st.quests[i] = q; else st.quests.push({ ...q, id: ID() }); });
      setEdit(null); window.toast("Quest saved", "grn");
    }
    function del(id) { update(st => { st.quests = st.quests.filter(x => x.id !== id); }); }
    function cycle(id) { update(st => { const q = st.quests.find(x => x.id === id); if (q) q.status = q.status === "open" ? "active" : q.status === "active" ? "done" : "open"; }); }
    const prioClr = { high: "red", med: "amb", low: "" };

    return (
      <div className="content fade-in">
        <div className="page-h">
          <div><h1>Quests & Timeline</h1><p>Open threads, active goals, and the road already travelled.</p></div>
          <div className="sp"></div>
          <Btn className="pri" icon="plus" onClick={() => setEdit({ id: null, title: "", desc: "", status: "open", priority: "med" })}>New Quest</Btn>
        </div>
        <div className="cols s">
          <div className="col g16">
            {groups.map(([k, lbl]) => {
              const items = quests.filter(q => q.status === k);
              return (
                <div key={k}>
                  <div className="eyebrow" style={{ marginBottom: 8 }}>{lbl} · {items.length}</div>
                  <div className="col g8">
                    {items.length === 0 && <div className="tx3" style={{ fontSize: 13, padding: "4px 2px" }}>None.</div>}
                    {items.map(q => (
                      <div key={q.id} className="card"><div className="card-b" style={{ padding: 13 }}>
                        <div className="center g10">
                          <button className="btn icon sm" onClick={() => cycle(q.id)} title="Cycle status">
                            <Icon name={q.status === "done" ? "check" : "flag"} size={14} style={{ color: q.status === "done" ? "var(--grn)" : "var(--tx-3)" }} />
                          </button>
                          <div className="grow">
                            <div className="center g8 wrap"><span style={{ fontWeight: 600, textDecoration: q.status === "done" ? "line-through" : "none", color: q.status === "done" ? "var(--tx-3)" : "var(--tx)" }}>{q.title}</span>{q.priority && q.status !== "done" && <span className={cls("tag", prioClr[q.priority])}>{q.priority}</span>}</div>
                            {q.desc && <div className="tx3" style={{ fontSize: 13, marginTop: 3 }}>{q.desc}</div>}
                          </div>
                          <button className="btn icon sm ghost" onClick={() => setEdit(q)}><Icon name="edit" size={13} /></button>
                          <button className="btn icon sm danger" onClick={() => del(q.id)}><Icon name="trash" size={13} /></button>
                        </div>
                      </div></div>
                    ))}
                  </div>
                </div>
              );
            })}
          </div>
          <div className="card" style={{ alignSelf: "start" }}>
            <div className="card-h"><Icon name="map" /><h3>Campaign Timeline</h3></div>
            <div className="card-b">
              <div className="tl">
                {timeline.map(t => (
                  <div key={t.id} className={cls("tl-item", t.done && "done")}>
                    <div className="tl-date">{t.date}</div>
                    <div style={{ fontWeight: 600, marginTop: 1 }}>{t.title}</div>
                    {t.note && <div className="tx3" style={{ fontSize: 12.5, marginTop: 2 }}>{t.note}</div>}
                  </div>
                ))}
                {timeline.length === 0 && <div className="tx3">No milestones yet.</div>}
              </div>
            </div>
          </div>
        </div>
        {edit && <QuestEdit q={edit} onSave={save} onClose={() => setEdit(null)} />}
      </div>
    );
  };

  function QuestEdit({ q, onSave, onClose }) {
    const [d, setD] = useState(q);
    const set = (k, v) => setD({ ...d, [k]: v });
    return (
      <Modal title={q.id ? "Edit Quest" : "New Quest"} icon="flag" onClose={onClose}
        footer={<><Btn className="ghost" onClick={onClose}>Cancel</Btn><Btn className="pri" icon="check" onClick={() => d.title.trim() && onSave(d)}>Save</Btn></>}>
        <Field label="Title"><input className="input" value={d.title} onChange={e => set("title", e.target.value)} /></Field>
        <div className="grid g2 mt10">
          <Field label="Status"><select className="input" value={d.status} onChange={e => set("status", e.target.value)}><option value="open">Open</option><option value="active">Active</option><option value="done">Completed</option></select></Field>
          <Field label="Priority"><select className="input" value={d.priority} onChange={e => set("priority", e.target.value)}><option value="high">High</option><option value="med">Medium</option><option value="low">Low</option></select></Field>
        </div>
        <div className="mt10"><Field label="Description"><textarea className="textarea" value={d.desc} onChange={e => set("desc", e.target.value)} /></Field></div>
      </Modal>
    );
  }
})();