/* Saints Calendar — Home + Calendar views */

const HomeView = ({ onOpenSaint, onNavigate, onSearch, query, setQuery }) => {
  const _now = new Date();
  const _todayM = _now.getMonth() + 1;
  const _todayD = _now.getDate();
  const today = window.getSaintsForDay(_todayM, _todayD);
  const todaySaint = today.primary;
  const [hover, setHover] = React.useState(null);

  // Upcoming feast days (next 21 days from today)
  const upcoming = [];
  for (let i = 1; i <= 21; i++) {
    const d = new Date(_now.getFullYear(), _now.getMonth(), _todayD + i);
    const m = d.getMonth() + 1; const day = d.getDate();
    const entry = window.getSaintsForDay(m, day);
    if (entry.primary) upcoming.push({ saint: entry.primary, date: { m, d: day } });
    if (upcoming.length >= 5) break;
  }

  const handleHover = (saint, e) => {
    const r = e.currentTarget.getBoundingClientRect();
    setHover({ saint, position: { x: Math.min(r.right + 12, window.innerWidth - 340), y: r.top } });
  };

  return (
    <div className="view-enter">
      {/* Hero */}
      <section style={{ padding: "72px 0 48px" }}>
        <div className="container-narrow text-center">
          <div className="t-rubric mb-3">
            <span style={{ color: "var(--rubric)" }}>●</span>&nbsp;&nbsp;{_now.toLocaleDateString('en-US', { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' })}
          </div>
          <h1 className="t-display" style={{ fontSize: "clamp(44px, 6vw, 76px)", marginBottom: 18 }}>
            Saints <span style={{ fontStyle: "italic", color: "var(--gilt-deep)" }}>&</span> their lives,<br/>
            day by day.
          </h1>
          <p style={{ fontSize: 19, color: "var(--ink-soft)", maxWidth: 580, margin: "0 auto 36px", lineHeight: 1.55 }}>
            A research calendar of the holy men and women honoured by the Church across two millennia —
            their lives, their writings, their relics, their feasts.
          </p>

          <div style={{ maxWidth: 620, margin: "0 auto" }}>
            <Autocomplete
              value={query}
              onChange={setQuery}
              onSubmit={(q) => onSearch(q)}
              onSelectSaint={(id) => onOpenSaint(id)}
              placeholder="Search saints, patronages, places, eras…"
              autoFocus
              large
            />
          </div>

          <div className="flex gap-2 mt-3" style={{ justifyContent: "center", flexWrap: "wrap" }}>
            <button className="chip" onClick={() => { setQuery("Doctor of the Church"); onSearch("Doctor of the Church"); }}>Doctors of the Church</button>
            <button className="chip" onClick={() => { setQuery("martyr"); onSearch("martyr"); }}>Martyrs</button>
            <button className="chip" onClick={() => { setQuery("Franciscan"); onSearch("Franciscan"); }}>Franciscans</button>
            <button className="chip" onClick={() => { setQuery("Italy"); onSearch("Italy"); }}>Italian saints</button>
            <button className="chip" onClick={() => { setQuery("13th century"); onSearch("13th century"); }}>13th century</button>
          </div>
        </div>
      </section>

      <Fleuron />

      {/* Today's Feast */}
      <section style={{ padding: "56px 0" }}>
        <div className="container">
          <div className="flex items-baseline justify-between mb-4">
            <div>
              <div className="t-rubric mb-1">Today's Principal Feast</div>
              <h2 className="t-display" style={{ fontSize: 36 }}>{_now.toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' })}</h2>
            </div>
            <button className="btn btn-ghost" onClick={() => onNavigate("calendar")}>
              See full calendar <IconArrowR />
            </button>
          </div>

          {todaySaint && (
            <div style={{ display: "grid", gridTemplateColumns: "minmax(260px, 1fr) 1.6fr", gap: 48, alignItems: "start" }}>
              <div>
                <PortraitPlaceholder name={todaySaint.name} ratio="4/5" caption="Sacred Portrait" />
                <div className="t-meta mt-2" style={{ textAlign: "center" }}>
                  Image: place a 4:5 sacred portrait
                </div>
              </div>
              <div>
                <div className="t-rubric mb-2" style={{ color: "var(--rubric)" }}>
                  {todaySaint.rank} · Roman Calendar
                </div>
                <h3 className="t-display dropcap" style={{ fontSize: 60, marginBottom: 18 }}>
                  {todaySaint.honorific} {todaySaint.name}
                </h3>
                <div style={{ fontSize: 18, fontStyle: "italic", color: "var(--ink-mute)", marginBottom: 24 }}>
                  {todaySaint.epithet} · {yearLabel(todaySaint.dates.born)} – {yearLabel(todaySaint.dates.died)}
                </div>
                <p style={{ fontSize: 18, color: "var(--ink-soft)", lineHeight: 1.6, marginBottom: 24 }}>
                  {todaySaint.summary}
                </p>
                <div className="flex gap-2" style={{ flexWrap: "wrap" }}>
                  {todaySaint.patronage.slice(0, 4).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(todaySaint.id)}>
                    Read full life <IconArrowR />
                  </button>
                  <a className="btn" href={`https://nov3na.com/${todaySaint.novenaSlug}`} target="_blank" rel="noopener">
                    Pray novena <IconExternal />
                  </a>
                </div>

                {/* Other feasts today */}
                <div className="mt-6 hairline" style={{ paddingTop: 24 }}>
                  <div className="t-eyebrow mb-2">Also on {_now.toLocaleDateString('en-US', { month: 'long', day: 'numeric' })}</div>
                  <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
                    {today.extras.map(e => (
                      <div key={e.name} style={{ display: "flex", justifyContent: "space-between", fontSize: 15 }}>
                        <span style={{ fontStyle: "italic" }}>{e.name}</span>
                        <span className="t-meta" style={{ marginLeft: 16 }}>{e.note}</span>
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            </div>
          )}
        </div>
      </section>

      <div className="container"><div className="hairline-gilt" style={{borderTopWidth: 1}}></div></div>

      {/* This Week + Browse */}
      <section style={{ padding: "56px 0", display: "grid", gridTemplateColumns: "1fr", gap: 0 }}>
        <div className="container" style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 64 }}>
          <div>
            <div className="t-rubric mb-2">Upcoming Feasts</div>
            <h2 className="t-display mb-4" style={{ fontSize: 32 }}>This week & next</h2>
            <div>
              {upcoming.map(({ saint, date }) => (
                <button
                  key={saint.id + date.m + date.d}
                  className="cal-cell"
                  onClick={() => onOpenSaint(saint.id)}
                  onMouseEnter={(e) => handleHover(saint, e)}
                  onMouseLeave={() => setHover(null)}
                  style={{
                    display: "flex", flexDirection: "row", alignItems: "baseline", gap: 24,
                    width: "100%", textAlign: "left", padding: "20px 0",
                    minHeight: "auto",
                    border: "0", borderBottom: "1px solid var(--hairline-soft)",
                  }}
                >
                  <div style={{ width: 80, flexShrink: 0 }}>
                    <div className="t-meta" style={{ textTransform: "uppercase" }}>{MONTHS[date.m-1].slice(0,3)}</div>
                    <div style={{ fontFamily: "var(--font-display)", fontSize: 36, lineHeight: 1, color: "var(--gilt-deep)" }}>{date.d}</div>
                  </div>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontFamily: "var(--font-display)", fontSize: 22, marginBottom: 2 }}>
                      {saint.honorific} {saint.name}
                    </div>
                    <div style={{ color: "var(--ink-mute)", fontSize: 14, fontStyle: "italic" }}>
                      {saint.epithet} · {saint.rank}
                    </div>
                  </div>
                  <IconArrowR />
                </button>
              ))}
            </div>
          </div>

          <div>
            <div className="t-rubric mb-2">Begin Your Research</div>
            <h2 className="t-display mb-4" style={{ fontSize: 32 }}>Browse the corpus</h2>
            <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
              <BrowseTile icon={<IconCalendar size={18}/>} title="The Calendar" desc="Wander the year, day by day" onClick={() => onNavigate("calendar")} />
              <BrowseTile icon={<IconTimeline size={18}/>} title="Timeline" desc="Twenty centuries of holiness" onClick={() => onNavigate("timeline")} />
              <BrowseTile icon={<IconMap size={18}/>} title="Map" desc="Birthplaces, sees, shrines, relics" onClick={() => onNavigate("map")} />
              <BrowseTile icon={<IconList size={18}/>} title="By Patronage" desc="Vocations, illnesses, places" onClick={() => onNavigate("patronage")} />
              <BrowseTile icon={<IconList size={18}/>} title="By Religious Order" desc="Benedictine, Franciscan, Dominican…" onClick={() => onNavigate("orders")} />
              <BrowseTile icon={<IconRandom size={18}/>} title="Random Saint" desc="Be surprised by holiness" onClick={() => {
                const r = window.SAINTS[Math.floor(Math.random() * window.SAINTS.length)];
                onOpenSaint(r.id);
              }} />
            </div>
          </div>
        </div>
      </section>

      <HoverPreview data={hover ? { saint: hover.saint } : null} position={hover?.position} />
    </div>
  );
};

const BrowseTile = ({ icon, title, desc, onClick }) => (
  <button onClick={onClick} style={{
    display: "flex", alignItems: "center", gap: 16,
    padding: "18px 20px",
    border: "1px solid var(--hairline-soft)",
    background: "color-mix(in oklab, var(--parchment) 90%, var(--parchment-deep))",
    textAlign: "left",
    transition: "all 0.18s",
  }}
  onMouseEnter={(e) => { e.currentTarget.style.borderColor = "var(--gilt)"; e.currentTarget.style.transform = "translateX(2px)"; }}
  onMouseLeave={(e) => { e.currentTarget.style.borderColor = "var(--hairline-soft)"; e.currentTarget.style.transform = "translateX(0)"; }}
  >
    <div style={{ color: "var(--gilt-deep)", display: "grid", placeItems: "center", width: 40, height: 40, border: "1px solid var(--hairline)", borderRadius: 2 }}>
      {icon}
    </div>
    <div style={{ flex: 1 }}>
      <div style={{ fontFamily: "var(--font-display)", fontSize: 19 }}>{title}</div>
      <div className="t-meta">{desc}</div>
    </div>
    <IconArrowR />
  </button>
);

// ---- Calendar view ----
const CalendarView = ({ year, month, setYearMonth, onSelectDay, selectedKey }) => {
  const firstDay = new Date(year, month - 1, 1);
  const startWeekday = firstDay.getDay();
  const daysInMonth = new Date(year, month, 0).getDate();
  const cells = [];
  for (let i = 0; i < startWeekday; i++) cells.push(null);
  for (let d = 1; d <= daysInMonth; d++) cells.push(d);
  while (cells.length % 7 !== 0) cells.push(null);

  const _realNow = new Date();
  const _realYear = _realNow.getFullYear();
  const _realMonth = _realNow.getMonth() + 1;
  const _realDay = _realNow.getDate();
  const today = (year === _realYear && month === _realMonth);

  const [hover, setHover] = React.useState(null);
  const handleHover = (saint, e) => {
    const r = e.currentTarget.getBoundingClientRect();
    setHover({ saint, position: { x: Math.min(r.right + 8, window.innerWidth - 340), y: Math.min(r.top, window.innerHeight - 240) } });
  };

  const navMonth = (delta) => {
    let m = month + delta, y = year;
    if (m > 12) { m = 1; y++; } else if (m < 1) { m = 12; y--; }
    setYearMonth(y, m);
  };

  return (
    <div className="view-enter">
      <section style={{ padding: "48px 0 28px" }}>
        <div className="container">
          <div className="flex items-baseline justify-between mb-4" style={{ flexWrap: "wrap", gap: 16 }}>
            <div>
              <div className="t-rubric mb-1">Liturgical Year · Roman Calendar</div>
              <h1 className="t-display" style={{ fontSize: 56 }}>
                {MONTHS[month-1]} <span style={{ color: "var(--ink-mute)", fontStyle: "italic" }}>{year}</span>
              </h1>
            </div>
            <div className="flex gap-2 items-center">
              <button className="btn btn-sm" onClick={() => navMonth(-1)}><IconArrowL /> Prev</button>
              <button className="btn btn-sm" onClick={() => setYearMonth(_realYear, _realMonth)}>Today</button>
              <button className="btn btn-sm" onClick={() => navMonth(1)}>Next <IconArrowR /></button>
              <div style={{ width: 16 }} />
              <span className="t-meta">Use <span className="kbd">←</span> <span className="kbd">→</span> to scrub days</span>
            </div>
          </div>

          <div className="cal-grid">
            {DAYS_SHORT.map(d => (
              <div key={d} className="cal-head t-rubric" style={{ color: "var(--gilt-deep)" }}>{d}</div>
            ))}
            {cells.map((d, i) => {
              if (d === null) return <div key={i} className="cal-cell is-empty"></div>;
              const dayData = window.getSaintsForDay(month, d);
              const allSaints = [
                ...dayData.saints.map(s => ({ id: s.id, name: `${s.honorific} ${s.name}`, primary: s.id === dayData.primary?.id, saint: s })),
                ...dayData.extras.map(e => ({ id: null, name: e.name, primary: false }))
              ];
              const isToday = today && d === _realDay;
              const key = `${month}-${d}`;
              const isSelected = selectedKey === key;
              return (
                <div
                  key={i}
                  className={`cal-cell ${isToday ? "is-today" : ""} ${isSelected ? "is-selected" : ""}`}
                  onClick={() => onSelectDay(month, d)}
                >
                  <div className={`cal-day-num ${isToday ? "is-today" : ""}`}>
                    <span>{d}</span>
                    {isToday && <span className="t-rubric" style={{ fontSize: 9 }}>Today</span>}
                  </div>
                  {allSaints.slice(0, 5).map((s, idx) => (
                    <div
                      key={idx}
                      className={`cal-saint ${s.primary ? "is-primary" : ""}`}
                      onMouseEnter={s.saint ? (e) => { e.stopPropagation(); handleHover(s.saint, e); } : undefined}
                      onMouseLeave={() => setHover(null)}
                    >
                      {s.name}
                    </div>
                  ))}
                  {allSaints.length > 5 && (
                    <div className="cal-more">+{allSaints.length - 5} more</div>
                  )}
                </div>
              );
            })}
          </div>

          <div className="t-meta mt-4" style={{ display: "flex", gap: 24, flexWrap: "wrap" }}>
            <span><span style={{ color: "var(--rubric)" }}>●</span> Solemnity / Feast</span>
            <span><span style={{ color: "var(--gilt)" }}>●</span> Memorial</span>
            <span style={{ fontStyle: "italic" }}>Italic — principal saint of the day</span>
            <span style={{ marginLeft: "auto" }}>Click a day for full feast list · Click a saint to read</span>
          </div>
        </div>
      </section>

      <HoverPreview data={hover ? { saint: hover.saint } : null} position={hover?.position} />
    </div>
  );
};

Object.assign(window, { HomeView, CalendarView });