/* Saints Calendar — Saint detail view (full-page editorial) + Drawer (quick view) */

const SaintDrawer = ({ dayKey, onClose, onOpenSaint, onSelectDay }) => {
  if (!dayKey) return null;
  const [m, d] = dayKey.split("-").map(Number);
  const data = window.getSaintsForDay(m, d);
  const allSaints = [
    ...data.saints,
    ...data.extras.map(e => ({ id: null, name: e.name, _note: e.note, _placeholder: true }))
  ];
  const [activeId, setActiveId] = React.useState(data.primary?.id || data.saints[0]?.id);
  const active = data.saints.find(s => s.id === activeId);

  React.useEffect(() => {
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [onClose]);

  return (
    <>
      <div className="drawer-backdrop" onClick={onClose}></div>
      <aside className="drawer">
        <div style={{ padding: "24px 28px 16px", display: "flex", alignItems: "baseline", justifyContent: "space-between", borderBottom: "1px solid var(--hairline-soft)" }}>
          <div>
            <div className="t-rubric" style={{ marginBottom: 4 }}>{MONTHS[m-1]} {d}</div>
            <h2 className="t-display" style={{ fontSize: 28 }}>Feasts of the day</h2>
          </div>
          <button className="btn btn-ghost btn-sm" onClick={onClose}><IconClose /></button>
        </div>

        <div style={{ padding: "0 28px", borderBottom: "1px solid var(--hairline-soft)" }}>
          {allSaints.map((s, i) => {
            const isActive = s.id === activeId;
            const isPrimary = s.id === data.primary?.id;
            return (
              <button
                key={i}
                onClick={() => s.id && setActiveId(s.id)}
                disabled={!s.id}
                style={{
                  display: "block", width: "100%", textAlign: "left",
                  padding: "14px 0", borderBottom: i < allSaints.length - 1 ? "1px solid var(--hairline-soft)" : "none",
                  cursor: s.id ? "pointer" : "default",
                  opacity: s.id ? 1 : 0.7,
                }}
              >
                <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 12 }}>
                  <div style={{
                    fontFamily: "var(--font-display)", fontSize: 19,
                    fontStyle: isPrimary ? "italic" : "normal",
                    color: isActive ? "var(--gilt-deep)" : "var(--ink)",
                  }}>
                    {s.honorific ? `${s.honorific} ` : ""}{s.name}
                    {isPrimary && <span className="t-rubric" style={{ marginLeft: 10, color: "var(--rubric)" }}>Principal</span>}
                  </div>
                  {s._note && <span className="t-meta" style={{ flexShrink: 0, fontStyle: "italic" }}>{s._note}</span>}
                </div>
              </button>
            );
          })}
        </div>

        {active && (
          <div style={{ padding: "24px 28px", flex: 1 }}>
            <div className="t-rubric mb-2" style={{ color: "var(--rubric)" }}>{active.rank}</div>
            <h3 className="t-display" style={{ fontSize: 32, marginBottom: 6 }}>{active.honorific} {active.name}</h3>
            <div style={{ fontStyle: "italic", color: "var(--ink-mute)", marginBottom: 16 }}>
              {active.epithet} · {yearLabel(active.dates.born)}–{yearLabel(active.dates.died)}
            </div>
            <PortraitPlaceholder name={active.name} ratio="3/2" caption="Portrait Placeholder" />
            <p style={{ fontSize: 16, color: "var(--ink-soft)", lineHeight: 1.6, marginTop: 18 }}>
              {active.summary}
            </p>
            <div className="flex gap-2 mt-3" style={{ flexWrap: "wrap" }}>
              {active.patronage.slice(0, 3).map(p => <span key={p} className="chip"><span className="chip-dot"></span>{p}</span>)}
            </div>
            <div className="flex gap-2 mt-4">
              <button className="btn btn-primary" onClick={() => onOpenSaint(active.id)}>Read full life <IconArrowR /></button>
              <a className="btn" href={`https://nov3na.com/${active.novenaSlug}`} target="_blank" rel="noopener">Novena <IconExternal /></a>
            </div>
          </div>
        )}
      </aside>
    </>
  );
};

// ---- Full saint detail ----
const SaintDetail = ({ saintId, onBack, onOpenSaint }) => {
  const saint = window.getSaintById(saintId);
  const [bookmarked, setBookmarked] = React.useState(() => {
    try { return JSON.parse(localStorage.getItem("sc_bookmarks") || "[]").includes(saintId); } catch { return false; }
  });
  const toggleBookmark = () => {
    let bm = []; try { bm = JSON.parse(localStorage.getItem("sc_bookmarks") || "[]"); } catch {}
    if (bm.includes(saintId)) bm = bm.filter(x => x !== saintId); else bm.push(saintId);
    localStorage.setItem("sc_bookmarks", JSON.stringify(bm));
    // mirror into the new key the workspace bookmarks tab reads
    localStorage.setItem("sc.bookmarks", JSON.stringify(bm));
    setBookmarked(bm.includes(saintId));
  };

  if (!saint) return <div className="container" style={{padding: 80}}>Saint not found.</div>;

  const related = (saint.related || []).map(id => window.getSaintById(id)).filter(Boolean);

  return (
    <div className="view-enter">
      {/* Header strip */}
      <div className="container" style={{ paddingTop: 24, paddingBottom: 16 }}>
        <div className="flex items-center justify-between">
          <button className="btn btn-ghost btn-sm" onClick={onBack}><IconArrowL /> Back</button>
          <div className="flex gap-2">
            <PinButton saintId={saintId} />
            <button className="btn btn-sm" onClick={toggleBookmark}>
              <IconBookmark filled={bookmarked} /> {bookmarked ? "Saved" : "Save"}
            </button>
            <a className="btn btn-sm" href={`https://nov3na.com/${saint.novenaSlug}`} target="_blank" rel="noopener">
              Pray novena on Nov3na <IconExternal />
            </a>
          </div>
        </div>
      </div>

      {/* Hero */}
      <section style={{ padding: "32px 0 64px" }}>
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "minmax(280px, 380px) 1fr", gap: 56, alignItems: "start" }}>
            <div>
              <PortraitPlaceholder name={saint.name} ratio="3/4" caption="Sacred Portrait" />
              <div style={{ marginTop: 16, fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--ink-mute)", lineHeight: 1.7 }}>
                <div style={{ display: "flex", justifyContent: "space-between" }}><span>BORN</span><span>{yearLabel(saint.dates.born)}</span></div>
                <div style={{ display: "flex", justifyContent: "space-between" }}><span>·</span><span>{saint.dates.bornPlace}</span></div>
                <div style={{ display: "flex", justifyContent: "space-between", marginTop: 8 }}><span>DIED</span><span>{yearLabel(saint.dates.died)}</span></div>
                <div style={{ display: "flex", justifyContent: "space-between" }}><span>·</span><span>{saint.dates.diedPlace}</span></div>
                <div style={{ display: "flex", justifyContent: "space-between", marginTop: 8 }}><span>FEAST</span><span>{formatDate(saint.feast.month, saint.feast.day)}</span></div>
                <div style={{ display: "flex", justifyContent: "space-between" }}><span>RANK</span><span style={{ color: "var(--rubric)" }}>{saint.rank}</span></div>
                {saint.order && <div style={{ display: "flex", justifyContent: "space-between", marginTop: 8 }}><span>ORDER</span><span>{saint.order}</span></div>}
              </div>
            </div>
            <div>
              <div className="t-rubric mb-2" style={{ color: "var(--rubric)" }}>
                {saint.rank} · Feast {formatDate(saint.feast.month, saint.feast.day)}
              </div>
              <h1 className="t-display" style={{ fontSize: "clamp(48px, 7vw, 88px)", lineHeight: 1, marginBottom: 16 }}>
                <span style={{ color: "var(--ink-mute)", fontStyle: "italic", fontSize: "0.5em" }}>{saint.honorific}</span><br/>
                {saint.name}
              </h1>
              <div style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 24, color: "var(--gilt-deep)", marginBottom: 28 }}>
                {saint.epithet}
              </div>
              <p className="dropcap" style={{ fontSize: 20, lineHeight: 1.55, color: "var(--ink-soft)" }}>
                {saint.summary}
              </p>
              <div className="flex gap-2 mt-4" style={{ flexWrap: "wrap" }}>
                {saint.titles.map(t => <span key={t} className="chip chip-rubric"><span className="chip-dot"></span>{t}</span>)}
                {saint.tradition.slice(0, 3).map(t => <span key={t} className="chip"><span className="chip-dot"></span>{t}</span>)}
              </div>
            </div>
          </div>
        </div>
      </section>

      <Fleuron />

      {/* Biography */}
      <section style={{ padding: "56px 0" }}>
        <div className="container-narrow">
          <div className="t-rubric mb-2 text-center">Vita</div>
          <h2 className="t-display text-center mb-6" style={{ fontSize: 44 }}>The life</h2>

          <BioBlock title="Early Life" body={saint.bio.earlyLife} />
          <BioBlock title="Conversion" body={saint.bio.conversion} />
          <BioBlock title="Ministry" body={saint.bio.ministry} />
          <BioBlock title="Death" body={saint.bio.death} />
          <BioBlock title="Legacy" body={saint.bio.legacy} />
        </div>
      </section>

      <Fleuron />

      {/* Quotes & Prayer */}
      <section style={{ padding: "56px 0" }}>
        <div className="container-narrow">
          <div style={{ display: "grid", gridTemplateColumns: "1fr", gap: 40 }}>
            {saint.quotes.length > 0 && saint.quotes[0].source !== "—" && (
              <div>
                <div className="t-rubric text-center mb-3">In Their Own Words</div>
                {saint.quotes.map((q, i) => (
                  <blockquote key={i} style={{
                    fontFamily: "var(--font-display)", fontStyle: "italic",
                    fontSize: 26, lineHeight: 1.35,
                    margin: "28px 0",
                    paddingLeft: 24, borderLeft: "2px solid var(--gilt)",
                    color: "var(--ink)",
                  }}>
                    <span style={{ color: "var(--gilt)", fontSize: 36 }}>“</span>{q.text}<span style={{ color: "var(--gilt)", fontSize: 36 }}>”</span>
                    <footer className="t-meta" style={{ marginTop: 10, fontStyle: "normal" }}>— {q.source}</footer>
                  </blockquote>
                ))}
              </div>
            )}

            <div className="card" style={{ background: "color-mix(in oklab, var(--gilt) 6%, var(--parchment))", borderColor: "var(--gilt)", padding: 36 }}>
              <div className="t-rubric mb-2" style={{ color: "var(--gilt-deep)" }}>A Prayer to {saint.honorific} {saint.name}</div>
              <p style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 19, lineHeight: 1.6, color: "var(--ink)" }}>
                {saint.prayer}
              </p>
              <div className="hairline-gilt mt-3" style={{ paddingTop: 16, marginTop: 16 }}>
                <a className="btn btn-sm" href={`https://nov3na.com/${saint.novenaSlug}`} target="_blank" rel="noopener">
                  Pray a full novena on Nov3na <IconExternal />
                </a>
              </div>
            </div>
          </div>
        </div>
      </section>

      <Fleuron />

      {/* Patronage + Attributes + Order */}
      <section style={{ padding: "56px 0" }}>
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(260px, 1fr))", gap: 28 }}>
            <DetailBlock title="Patronage">
              <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 8 }}>
                {saint.patronage.map(p => <li key={p} style={{ fontFamily: "var(--font-display)", fontSize: 18 }}>· {p}</li>)}
              </ul>
            </DetailBlock>
            <DetailBlock title="Attributes & Iconography">
              <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 8 }}>
                {saint.attributes.map(a => <li key={a} style={{ fontFamily: "var(--font-display)", fontSize: 18, fontStyle: "italic" }}>{a}</li>)}
              </ul>
            </DetailBlock>
            <DetailBlock title="Relics & Pilgrimage">
              <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 14 }}>
                {saint.relics.map((r, i) => (
                  <li key={i}>
                    <div style={{ fontFamily: "var(--font-display)", fontSize: 17 }}>{r.place}</div>
                    <div className="t-meta">{r.city}{r.note ? ` — ${r.note}` : ""}</div>
                  </li>
                ))}
              </ul>
            </DetailBlock>
          </div>
        </div>
      </section>

      {/* Related saints */}
      {related.length > 0 && (
        <section style={{ padding: "56px 0", background: "color-mix(in oklab, var(--parchment) 88%, var(--parchment-deep))" }}>
          <div className="container">
            <div className="t-rubric mb-2">Contemporaries & Companions</div>
            <h2 className="t-display mb-4" style={{ fontSize: 32 }}>Related saints</h2>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))", gap: 18 }}>
              {related.map(r => (
                <button key={r.id} onClick={() => onOpenSaint(r.id)} className="card" style={{ textAlign: "left", cursor: "pointer", transition: "all 0.18s" }}
                  onMouseEnter={(e) => e.currentTarget.style.borderColor = "var(--gilt)"}
                  onMouseLeave={(e) => e.currentTarget.style.borderColor = "var(--hairline-soft)"}
                >
                  <div className="t-rubric mb-1">{formatDate(r.feast.month, r.feast.day)}</div>
                  <div style={{ fontFamily: "var(--font-display)", fontSize: 22, marginBottom: 4 }}>{r.honorific} {r.name}</div>
                  <div className="t-meta" style={{ fontStyle: "italic" }}>{r.epithet}</div>
                </button>
              ))}
            </div>
          </div>
        </section>
      )}

      {/* Sources */}
      <section style={{ padding: "56px 0" }}>
        <div className="container-narrow">
          <div className="t-rubric mb-2">Sources & Further Reading</div>
          <h2 className="t-display mb-4" style={{ fontSize: 28 }}>Bibliography</h2>
          <ol style={{ paddingLeft: 0, listStyle: "none", margin: 0 }}>
            {saint.sources.map((s, i) => (
              <li key={i} style={{ display: "flex", gap: 16, padding: "12px 0", borderBottom: "1px solid var(--hairline-soft)" }}>
                <span style={{ fontFamily: "var(--font-mono)", color: "var(--gilt-deep)", fontSize: 12, marginTop: 4 }}>{String(i+1).padStart(2, "0")}</span>
                <span style={{ fontSize: 16, lineHeight: 1.5 }}>{s}</span>
              </li>
            ))}
          </ol>
        </div>
      </section>
    </div>
  );
};

const BioBlock = ({ title, body }) => (
  <div style={{ marginBottom: 32 }}>
    <h3 style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--rubric)", marginBottom: 10 }}>
      {title}
    </h3>
    <p style={{ fontSize: 18, lineHeight: 1.65, color: "var(--ink)" }}>{body}</p>
  </div>
);

const DetailBlock = ({ title, children }) => (
  <div className="card">
    <div className="t-rubric mb-3">{title}</div>
    {children}
  </div>
);

Object.assign(window, { SaintDrawer, SaintDetail });