// 主 App
const { useState: useState_, useEffect: useEffect_, useMemo: useMemo_ } = React;
// TimelineCard / DayTimeline / DetailPanel / getTodayDayId 在 timeline.jsx 全域已定義
// EmergencySheet / PackingSheet / WeatherSheet / MapSheet / SettingsSheet 在 sheets.jsx 全域已定義


function Sheet({ open, onClose, children }) {
  if (!open) return null;
  return (
    <div className="sheet-backdrop" onClick={onClose}>
      <div className="sheet" onClick={e => e.stopPropagation()}>
        <div className="sheet-handle" onClick={onClose}></div>
        {children}
      </div>
    </div>
  );
}

function App() {
  const days = window.TRIP_DATA.days;
  const meta = window.TRIP_DATA.meta;

  const [style, setStyle] = useState_(() => localStorage.getItem("hkd-style") || "zasshi");
  const [fontSize, setFontSize] = useState_(() => localStorage.getItem("hkd-fontsize") || "normal");
  const [activeDayId, setActiveDayId] = useState_(() => {
    const saved = localStorage.getItem("hkd-day");
    return saved ? Number(saved) : (window.TripUI.getTodayDayId(days) ?? days[0].id);
  });
  const [activeBlockIdx, setActiveBlockIdx] = useState_(0);
  const [openSheet, setOpenSheet] = useState_(null);
  const [nowTick, setNowTick] = useState_(0);
  useEffect_(() => {
    const id = setInterval(() => setNowTick(t => t + 1), 60000);
    return () => clearInterval(id);
  }, []);

  useEffect_(() => {
    document.documentElement.dataset.style = style;
    localStorage.setItem("hkd-style", style);
  }, [style]);
  useEffect_(() => {
    document.documentElement.dataset.fontsize = fontSize;
    localStorage.setItem("hkd-fontsize", fontSize);
  }, [fontSize]);
  useEffect_(() => {
    localStorage.setItem("hkd-day", String(activeDayId));
    setActiveBlockIdx(0);
  }, [activeDayId]);

  const todayId = useMemo_(() => window.TripUI.getTodayDayId(days), [days, nowTick]);
  const day = days.find(d => d.id === activeDayId) || days[0];
  const isToday = day.id === todayId;
  const nowBlockIdx = useMemo_(() => isToday ? window.TripUI.getCurrentBlockIdx(day) : -1, [day, isToday, nowTick]);
  // 切換到「今天」這天時，自動帶到目前時段
  useEffect_(() => {
    if (isToday && nowBlockIdx >= 0) setActiveBlockIdx(nowBlockIdx);
  }, [isToday, nowBlockIdx, day.id]);
  const activeBlock = day.blocks[activeBlockIdx];
  const activeRefs = useMemo_(() => window.TripUI.computeRefs(day), [day]);
  const activeRefNo = activeRefs[activeBlockIdx];

  return (
    <div className="app-shell">
      <header className="app-header">
        <h1>{meta.title}</h1>
        <div className="meta">
          <span>{meta.dateRange}</span>
          <span className="jp">9日8泊 · 北海道</span>
          <span>{meta.party}</span>
        </div>
        <div className="controls">
          <button className="icon-btn" title="設定" onClick={() => setOpenSheet("settings")}>⚙️</button>
        </div>
      </header>

      <nav className="day-tabs" aria-label="日程切換">
        {days.map(d => (
          <button key={d.id}
            className={`day-tab ${d.id === activeDayId ? "is-active" : ""} ${d.id === todayId ? "is-today" : ""}`}
            onClick={() => setActiveDayId(d.id)}>
            <span>{d.label}</span>
            <span style={{opacity:0.7}}>{d.date.slice(5).replace("-","/")}</span>
            {d.id === todayId && <span className="badge">今</span>}
          </button>
        ))}
      </nav>

      <main className="app-main layout-two">
        <section>
          <DayTimeline day={day} activeBlockIdx={activeBlockIdx} onSelectBlock={setActiveBlockIdx} nowBlockIdx={nowBlockIdx} />
        </section>
        <aside>
          <DetailPanel block={activeBlock} refNo={activeRefNo} />
        </aside>
      </main>

      <nav className="bottom-nav" aria-label="主功能">
        <button className="nav-btn is-active" onClick={() => setOpenSheet(null)}>
          <span className="icon">📅</span><span>行程</span>
        </button>
        <button className="nav-btn" onClick={() => setOpenSheet("map")}>
          <span className="icon">🗺️</span><span>地圖</span>
        </button>
        <button className="nav-btn" onClick={() => setOpenSheet("weather")}>
          <span className="icon">☁️</span><span>天氣</span>
        </button>
        <button className="nav-btn" onClick={() => setOpenSheet("packing")}>
          <span className="icon">🎒</span><span>打包</span>
        </button>
        <button className="nav-btn" onClick={() => setOpenSheet("phrases")}>
          <span className="icon">🗣️</span><span>日語</span>
        </button>
        <button className="nav-btn" onClick={() => setOpenSheet("emergency")}>
          <span className="icon">🆘</span><span>緊急</span>
        </button>
      </nav>

      <Sheet open={openSheet === "settings"} onClose={() => setOpenSheet(null)}>
        <SettingsSheet style={style} setStyle={setStyle} fontSize={fontSize} setFontSize={setFontSize} />
      </Sheet>
      <Sheet open={openSheet === "map"} onClose={() => setOpenSheet(null)}>
        <MapSheet />
      </Sheet>
      <Sheet open={openSheet === "weather"} onClose={() => setOpenSheet(null)}>
        <WeatherSheet />
      </Sheet>
      <Sheet open={openSheet === "packing"} onClose={() => setOpenSheet(null)}>
        <PackingSheet />
      </Sheet>
      <Sheet open={openSheet === "phrases"} onClose={() => setOpenSheet(null)}>
        <PhrasesSheet />
      </Sheet>
      <Sheet open={openSheet === "emergency"} onClose={() => setOpenSheet(null)}>
        <EmergencySheet />
      </Sheet>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);