// ===== Bookings list =====
function BookingsPage({ bookings, onOpenBooking, onAddBooking }) {
  const [filter, setFilter] = useState('all'); // all / today / unconfirmed / upcoming / past / cancelled / no_show
  const [q, setQ] = useState('');
  const todayISO = D.isoDate(new Date());

  // 未確認件数（過去日付かつ confirmed）
  const unconfirmedCount = useMemo(() =>
    bookings.filter(b => b.date && b.date < todayISO && b.status === 'confirmed').length
  , [bookings, todayISO]);

  const filtered = useMemo(() => {
    let arr = bookings.slice();
    if (filter === 'today') arr = arr.filter(b => b.date === todayISO);
    else if (filter === 'unconfirmed') arr = arr.filter(b => b.date < todayISO && b.status === 'confirmed');
    else if (filter === 'upcoming') arr = arr.filter(b => b.date >= todayISO && b.status !== 'cancelled');
    else if (filter === 'done') arr = arr.filter(b => b.status === 'done');
    else if (filter === 'cancelled') arr = arr.filter(b => b.status === 'cancelled');
    else if (filter === 'no_show') arr = arr.filter(b => b.status === 'no_show');
    if (q.trim()) {
      const k = q.toLowerCase();
      arr = arr.filter(b => (b.name||'').toLowerCase().includes(k) || (b.tel||'').includes(k) || (b.menu||'').toLowerCase().includes(k));
    }
    arr.sort((a, b) => {
      const c = (b.date||'').localeCompare(a.date||'');
      if (c !== 0) return c;
      return (a.time||'').localeCompare(b.time||'');
    });
    return arr;
  }, [bookings, filter, q, todayISO]);

  return (
    <div>
      <div className="filter-bar">
        <div className="cal-view-switch" style={{flexShrink:0}}>
          <button className={filter==='all'?'active':''} onClick={() => setFilter('all')}>すべて</button>
          <button className={filter==='today'?'active':''} onClick={() => setFilter('today')}>今日</button>
          <button className={filter==='upcoming'?'active':''} onClick={() => setFilter('upcoming')}>今後</button>
          <button
            className={filter==='unconfirmed'?'active':''}
            onClick={() => setFilter('unconfirmed')}
            style={unconfirmedCount > 0 ? {color:'#a87320', fontWeight:700} : {}}
          >
            未確認{unconfirmedCount > 0 ? ` (${unconfirmedCount})` : ''}
          </button>
          <button className={filter==='done'?'active':''} onClick={() => setFilter('done')}>来院済</button>
          <button className={filter==='no_show'?'active':''} onClick={() => setFilter('no_show')}>来院なし</button>
        </div>
        <div className="search-input">
          <Icon name="search" size={15}/>
          <input className="input" placeholder="名前・電話・メニューで検索" value={q} onChange={e => setQ(e.target.value)}/>
        </div>
        <div style={{flex:1}}/>
        <button className="btn primary" onClick={() => onAddBooking(D.isoDate(new Date()), '10:00')}>
          <Icon name="plus" size={14}/> 予約を追加
        </button>
      </div>

      <div className="card">
        {filtered.length === 0 ? (
          <EmptyState icon="list" title="該当する予約がありません" sub="フィルタや検索条件を変更してください"/>
        ) : (
          <div className="table-wrap">
            <table className="table">
              <thead>
                <tr>
                  <th style={{width:140}}>日時</th>
                  <th>お客様</th>
                  <th>メニュー</th>
                  <th style={{width:80}}>金額</th>
                  <th style={{width:90}}>状態</th>
                  <th style={{width:80}}>流入元</th>
                </tr>
              </thead>
              <tbody>
                {filtered.map(b => {
                  const unconfirmed = window.isBookingUnconfirmed && window.isBookingUnconfirmed(b);
                  return (
                    <tr key={b.id} className="clickable" onClick={() => onOpenBooking(b)} style={unconfirmed ? {background:'#fffaf0'} : {}}>
                      <td>
                        <div style={{fontWeight:700, color:'var(--green-900)'}}>{D.fmtDateJa(b.date)}</div>
                        <div className="sub mono">{b.time}〜{D.addMinTime(b.time, b.duration||60)}</div>
                      </td>
                      <td>
                        <div style={{fontWeight:600}}>{b.name} 様</div>
                        <div className="sub">{b.tel}</div>
                      </td>
                      <td>{b.menu}<div className="sub">{b.duration||60}分</div></td>
                      <td className="mono">¥{(b.price||0).toLocaleString()}</td>
                      <td><StatusPill status={b.status} isUnconfirmed={unconfirmed}/></td>
                      <td><SourcePill source={b.source}/></td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        )}
      </div>
      <div style={{marginTop:10, fontSize:12, color:'var(--ink-mute)'}}>{filtered.length} 件 表示中</div>
    </div>
  );
}
window.BookingsPage = BookingsPage;