// KOL App — three phones with shared theme + availability + booking sheet state.
// KOLs are mostly Mainland-Chinese (default), but the directory includes overseas
// Chinese (e.g. CN-resident in Bangkok) and Thai KOLs (per master spec §3.8).
// Tap the avatar in the topbar to switch between three sample KOLs.

const KOL_DIRECTORY = [
  // Mainland Chinese — majority case
  { id: "liwei", initial: "李", name: "李伟 · Li Wei",     agency: "北京签约 · 顶级直播",  location: { city: "Beijing",  country: "CN", flag: "🇨🇳", label: "北京 · 中国" } },
  // Chinese based in Thailand — bridges THB/CNY ops
  { id: "linxia", initial: "林", name: "林霞 · Lin Xia",   agency: "曼谷自由签约 · 跨境直播", location: { city: "Bangkok",  country: "TH", flag: "🇹🇭", label: "曼谷 · 泰国" } },
  // Thai KOL — Thai-first locale, sells in CN markets via translation
  { id: "ploy",   initial: "พ", name: "Ploy Saisuda",    agency: "ThaiHao 自由签约 · 双语",  location: { city: "Bangkok",  country: "TH", flag: "🇹🇭", label: "曼谷 · 泰国" } },
];

function KolApp() {
  const [meIdx, setMeIdx] = React.useState(0);
  const me = KOL_DIRECTORY[meIdx];
  const cycleMe = () => setMeIdx(i => (i + 1) % KOL_DIRECTORY.length);

  const [theme, setTheme] = React.useState(() => {
    try { return localStorage.getItem("thaihao-kol-theme") || "light"; } catch { return "light"; }
  });
  React.useEffect(() => { try { localStorage.setItem("thaihao-kol-theme", theme); } catch {} }, [theme]);
  const toggleTheme = () => setTheme(t => t === "dark" ? "light" : "dark");

  // Booking-availability state — open / limited / closed (per KOL)
  const [bookingStatus, setBookingStatus] = React.useState("open");
  // Calendar slot-level blocks — set of "dayIdx-hour" keys
  const [blockedSlots, setBlockedSlots] = React.useState(new Set());
  const onToggleBlock = (key) => {
    if (key === "_clear") { setBlockedSlots(new Set()); return; }
    setBlockedSlots(s => {
      const n = new Set(s);
      if (n.has(key)) n.delete(key); else n.add(key);
      return n;
    });
  };
  // If KOL closes bookings entirely, surface a soft note on calendar header copy.

  const [tab1, setTab1] = React.useState("home");
  const [tab2, setTab2] = React.useState("calendar");
  const [tab3, setTab3] = React.useState("earnings");
  const [bookingSheet, setBookingSheet] = React.useState(null);
  const [sheetOwner, setSheetOwner] = React.useState(null);
  const open = (owner) => (b) => { setBookingSheet(b); setSheetOwner(owner); };
  const close = () => { setBookingSheet(null); setSheetOwner(null); };

  return (
    <div className="stage">
      <div className="kit-header">
        <h1>ThaiHao · KOL 工作台 (KOL portal)</h1>
        <p>zh-CN 默认 · 大多 KOL 在中国大陆 · 部分驻泰中国人 · 少数泰国 KOL · 点击头像切换样例</p>
      </div>

      <KolShell title="首页 · Home" tab={tab1} setTab={setTab1} me={me} onCycleMe={cycleMe} theme={theme} onToggleTheme={toggleTheme}
                bookingSheet={sheetOwner==="home" ? bookingSheet : null} onCloseBookingSheet={close}>
        <KolHome onOpenBooking={open("home")} bookingStatus={bookingStatus} onChangeBookingStatus={setBookingStatus} />
      </KolShell>

      <KolShell title="日程 · Calendar" tab={tab2} setTab={setTab2} me={me} onCycleMe={cycleMe} theme={theme} onToggleTheme={toggleTheme}
                bookingSheet={sheetOwner==="cal" ? bookingSheet : null} onCloseBookingSheet={close}>
        <KolCalendar onOpenBooking={open("cal")} blockedSlots={blockedSlots} onToggleBlock={onToggleBlock} />
      </KolShell>

      <KolShell title="收益 · Earnings" tab={tab3} setTab={setTab3} me={me} onCycleMe={cycleMe} theme={theme} onToggleTheme={toggleTheme}
                bookingSheet={null} onCloseBookingSheet={close}>
        <KolEarnings />
      </KolShell>
    </div>
  );
}

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