// KOL Calendar — week view; the primary navigation metaphor for KOLs per digest §14.

function KolCalendar({ onOpenBooking, blockedSlots, onToggleBlock }) {
  const days = [
    { d: 17, lbl: "周一" },
    { d: 18, lbl: "周二", today: true },
    { d: 19, lbl: "周三" },
    { d: 20, lbl: "周四" },
    { d: 21, lbl: "周五" },
    { d: 22, lbl: "周六" },
    { d: 23, lbl: "周日" },
  ];
  const hours = [18, 19, 20, 21, 22, 23];

  const bookings = [
    { day: 3, hour: 19, span: 1.5, state: "confirmed", title: "Khao Hom Thai", time: "3月20日 · 19:00 BJT", brand: "Khao Hom Thai", duration: "90 分钟", fee: 85000 },
    { day: 5, hour: 20, span: 1.5, state: "confirmed", title: "香米专场", time: "3月22日 · 20:00 BJT", brand: "Khao Hom Thai", duration: "90 分钟", fee: 85000 },
    { day: 0, hour: 20, span: 1, state: "pending",   title: "Siam Cosmetic", time: "3月17日 · 20:00 BJT", brand: "Siam Cosmetic", duration: "60 分钟", fee: 62000 },
  ];

  return (
    <React.Fragment>
      <div>
        <h1 className="page-title">日程</h1>
        <div className="page-sub">3月17日 – 3月23日 · 本周 4 场已确认 · 点击空白时段可设为不接单</div>
      </div>

      <div className="perf-grid">
        <div className="perf">
          <div className="lbl">本周直播</div>
          <div className="val" style={{fontFamily:"var(--font-display)"}}>4</div>
          <div className="delta" style={{color:"var(--on-surface-variant)"}}>已确认 2 · 待回复 2</div>
        </div>
        <div className="perf">
          <div className="lbl">可预约时段</div>
          <div className="val" style={{fontFamily:"var(--font-display)"}}>12</div>
          <div className="delta" style={{color:"var(--on-surface-variant)"}}>本周剩余</div>
        </div>
      </div>

      <div className="list" style={{padding:0, overflow:"hidden"}}>
        <div className="cal-head">
          <div className="col"></div>
          {days.map(d => (
            <div key={d.d} className={"col" + (d.today?" today":"")}>
              <div style={{fontSize:10}}>{d.lbl}</div>
              <div className="d">{d.d}</div>
            </div>
          ))}
        </div>
        <div className="cal-grid">
          {hours.map(h => (
            <React.Fragment key={h}>
              <div className="hr">{h}:00</div>
              {days.map((d, dIdx) => {
                const b = bookings.find(bk => bk.day === dIdx && bk.hour === h);
                const slotKey = dIdx + "-" + h;
                const isBlocked = blockedSlots.has(slotKey);
                return (
                  <div key={d.d + "-" + h} className="cell"
                       onClick={() => !b && onToggleBlock(slotKey)}
                       style={!b ? { cursor: "pointer" } : {}}>
                    {b && (
                      <div className={"booking " + b.state} style={{top: 2, height: 36 * b.span - 4}} onClick={(e) => { e.stopPropagation(); onOpenBooking(b); }}>
                        {b.title}
                      </div>
                    )}
                    {!b && isBlocked && (
                      <div className="booking unavail" style={{top: 2, height: 32}}>
                        <i className="ti ti-circle-off" style={{fontSize: 10, marginRight: 3}}></i>不接单
                      </div>
                    )}
                  </div>
                );
              })}
            </React.Fragment>
          ))}
        </div>
      </div>

      <div style={{display:"flex", gap: 10}}>
        <button className="btn-secondary" style={{flex:1}} onClick={() => onToggleBlock("_clear")}>清除不接单时段</button>
        <button className="btn-primary" style={{flex:1}}><i className="ti ti-plus"></i>新增日程</button>
      </div>

      <div style={{height: 8}}></div>
    </React.Fragment>
  );
}

window.KolCalendar = KolCalendar;