// Journal - list + detail
const SAMPLE_JOURNAL = [
  { id: 1, date: "May 2, 2026", time: "07:32", question: "What should I focus on today?", mode: "Daily Rune", drawn: [{ ...window.RUNES[3], reversed: false }], pinned: true, note: "I felt guided. I will pay closer attention to the messages around me." },
  { id: 2, date: "April 29, 2026", time: "21:15", question: "Where should this relationship go?", mode: "Three Rune Spread", drawn: [{ ...window.RUNES[6], reversed: false }, { ...window.RUNES[18], reversed: false }, { ...window.RUNES[7], reversed: false }], pinned: false, note: "" },
  { id: 3, date: "April 26, 2026", time: "06:50", question: "", mode: "Daily Rune", drawn: [{ ...window.RUNES[15], reversed: false }], pinned: false, note: "A day with a lot of light." },
  { id: 4, date: "April 22, 2026", time: "23:04", question: "Should I start the new project?", mode: "Five Rune Spread", drawn: [{ ...window.RUNES[0], reversed: false }, { ...window.RUNES[5], reversed: false }, { ...window.RUNES[9], reversed: true }, { ...window.RUNES[14], reversed: false }, { ...window.RUNES[22], reversed: false }], pinned: true, note: "" },
  { id: 5, date: "April 18, 2026", time: "14:22", question: "What does my mental health need?", mode: "Three Rune Spread", drawn: [{ ...window.RUNES[10], reversed: false }, { ...window.RUNES[20], reversed: false }, { ...window.RUNES[7], reversed: false }], pinned: false, note: "" }
];

const Journal = ({ skin, onNav, onPickEntry }) => {
  return (
    <div className="screen wood-grain" style={{ width: "100%", height: "100%", position: "relative", display: "flex", flexDirection: "column" }}>
      <div className="noise"/>
      <StatusBar/>
      <TopBar title="Journal" subtitle="Journal of readings" onBack={() => onNav("home")}/>

      <div style={{ margin: "0 20px 16px", padding: "16px", background: "rgba(26,22,18,0.6)", border: "1px solid rgba(201,168,76,0.15)" }}>
        <div className="font-display" style={{ fontSize: 10, letterSpacing: "0.2em", color: "var(--gold)", textTransform: "uppercase", marginBottom: 12 }}>This Month</div>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
          <Stat n="12" label="Readings"/>
          <Divider/>
          <Stat n="ᚷ" label="Most Seen" rune/>
          <Divider/>
          <Stat n="7" label="Day Streak"/>
        </div>
        <div style={{ marginTop: 14, display: "flex", alignItems: "flex-end", gap: 4, height: 28 }}>
          {[2,3,1,4,2,3,5,3,2,4,3,2,5,3].map((v, i) => (
            <div key={i} style={{ flex: 1, height: `${v * 18}%`, background: "linear-gradient(180deg, var(--gold) 0%, var(--gold-soft) 100%)", opacity: 0.6 + (v / 10), borderRadius: "1px 1px 0 0" }}/>
          ))}
        </div>
      </div>

      <div style={{ flex: 1, overflowY: "auto", padding: "0 20px 110px" }}>
        {SAMPLE_JOURNAL.map(e => (
          <div key={e.id} onClick={() => onPickEntry(e)} style={{ marginBottom: 12, padding: "14px 16px", background: "rgba(26,22,18,0.5)", border: "1px solid rgba(201,168,76,0.1)", cursor: "pointer", position: "relative" }}>
            {e.pinned && <div style={{ position: "absolute", top: 10, right: 10, color: "var(--gold)" }}><Icon.Pin size={14}/></div>}
            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 8 }}>
              <div className="font-display" style={{ fontSize: 10, letterSpacing: "0.18em", color: "var(--gold)", textTransform: "uppercase" }}>{e.mode}</div>
              <div style={{ fontSize: 11, color: "var(--ash)", fontStyle: "italic" }}>{e.date} - {e.time}</div>
            </div>
            {e.question && (
              <div style={{ fontSize: 13, color: "var(--ivory)", fontStyle: "italic", marginBottom: 10, opacity: 0.85 }}>"{e.question}"</div>
            )}
            <div style={{ display: "flex", gap: 6 }}>
              {e.drawn.map((r, i) => (
                <RuneTile key={i} rune={r} skin={skin} reversed={r.reversed} size={36}/>
              ))}
            </div>
            {e.note && <div style={{ marginTop: 8, fontSize: 12, color: "var(--ash)" }}>- {e.note}</div>}
          </div>
        ))}
      </div>

      <BottomNav active="journal" onNav={onNav}/>
    </div>
  );
};

const Stat = ({ n, label, rune }) => (
  <div style={{ flex: 1, textAlign: "center" }}>
    <div className={rune ? "rune-glyph" : "font-display"} style={{ fontSize: rune ? 26 : 22, color: "var(--ivory)", lineHeight: 1 }}>{n}</div>
    <div style={{ fontSize: 9, color: "var(--ash)", letterSpacing: "0.1em", textTransform: "uppercase", marginTop: 4 }}>{label}</div>
  </div>
);
const Divider = () => <div style={{ width: 1, height: 30, background: "rgba(201,168,76,0.15)" }}/>;

const JournalDetail = ({ entry, skin, onNav }) => {
  const [note, setNote] = React.useState(entry.note || "");
  return (
    <div className="screen wood-grain" style={{ width: "100%", height: "100%", position: "relative", overflowY: "auto" }}>
      <div className="noise"/>
      <StatusBar/>
      <TopBar title={entry.mode} subtitle={entry.date + " - " + entry.time} onBack={() => onNav("journal")} right={<Icon.More color="var(--gold)" size={20}/>}/>

      {entry.question && (
        <div style={{ margin: "0 20px 16px", padding: "12px 16px", borderLeft: "1px solid var(--gold)", fontSize: 14, color: "var(--ivory)", fontStyle: "italic", background: "rgba(201,168,76,0.04)" }}>
          "{entry.question}"
        </div>
      )}

      <div style={{ display: "flex", justifyContent: "center", gap: 12, padding: "12px 20px 20px", flexWrap: "wrap" }}>
        {entry.drawn.map((r, i) => (
          <div key={i} style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 6 }}>
            <RuneTile rune={r} skin={skin} reversed={r.reversed} size={64}/>
            <div className="font-display" style={{ fontSize: 11, color: "var(--ivory)" }}>{r.name}</div>
          </div>
        ))}
      </div>

      <Ornament width={220} opacity={0.4}/>

      <div style={{ padding: "20px 20px 0" }}>
        <div className="font-display" style={{ fontSize: 10, letterSpacing: "0.2em", color: "var(--gold)", textTransform: "uppercase", marginBottom: 10 }}>Personal Notes</div>
        <textarea value={note} onChange={e => setNote(e.target.value)} placeholder="Your reflection on this reading..." style={{ width: "100%", minHeight: 100, padding: 14, background: "rgba(13,13,13,0.5)", border: "1px solid rgba(201,168,76,0.15)", color: "var(--ivory)", fontFamily: "Cormorant Garamond, serif", fontSize: 14, outline: "none", resize: "vertical", fontStyle: note ? "normal" : "italic" }}/>
      </div>

      <div style={{ padding: "16px 20px 0" }}>
        <div className="font-display" style={{ fontSize: 10, letterSpacing: "0.2em", color: "var(--gold)", textTransform: "uppercase", marginBottom: 10 }}>Oracle's Words</div>
        <div style={{ padding: "14px 16px", background: "rgba(26,22,18,0.6)", borderLeft: "2px solid var(--gold)", fontSize: 14, color: "var(--ivory)", lineHeight: 1.6 }}>
          {entry.drawn.map(r => (r.reversed ? r.reversed : r.upright).split('.')[0]).join(". ")}.
        </div>
      </div>

      <div style={{ padding: "20px 20px 40px", display: "flex", gap: 10 }}>
        <button className="btn-ghost" style={{ flex: 1 }}>{entry.pinned ? "Unpin" : "Pin"}</button>
        <button className="btn-ghost" style={{ flex: 1 }}><Icon.Share color="var(--gold)" size={14}/> &nbsp; Share</button>
      </div>
    </div>
  );
};

window.Journal = Journal;
window.JournalDetail = JournalDetail;