// ===== Dashboard =====
function Dashboard({ bookings, customers, menus, settings, onOpenBooking, onNavigate }) {
  const todayISO = D.isoDate(new Date());
  const today = bookings.filter(b => b.date === todayISO && b.status !== 'cancelled' && b.status !== 'no_show');
  const todayConfirmed = today.filter(b => b.status === 'confirmed').length;
  const todayDone = today.filter(b => b.status === 'done').length;

  // 未確認の過去予約（来店確認待ち）
  const unconfirmed = useMemo(() => bookings
    .filter(b => b.date && b.date < todayISO && b.status === 'confirmed')
    .sort((a, b) => (b.date||'').localeCompare(a.date||'') || (a.time||'').localeCompare(b.time||''))
  , [bookings, todayISO]);

  const weekStart = D.startOfWeek(new Date());

  const monthStart = D.startOfMonth(new Date());
  const monthStartISO = D.isoDate(monthStart);
  // 今月の月末
  const monthEndISO = useMemo(() => {
    const d = new Date(monthStart);
    d.setMonth(d.getMonth() + 1, 0); // 来月の0日 = 今月末日
    return D.isoDate(d);
  }, [monthStart]);
  const newCustCount = customers.filter(c => {
    if (!c.firstVisit) return false;
    return c.firstVisit >= monthStartISO;
  }).length;

  // 今月の done 予約
  const monthDone = useMemo(() => bookings.filter(b => {
    if (b.status !== 'done' || !b.date) return false;
    return b.date >= monthStartISO && b.date <= todayISO;
  }), [bookings, monthStartISO, todayISO]);

  // 今月の confirmed 予約（今日以降〜月末）— 見込み売上
  const monthFutureConfirmed = useMemo(() => bookings.filter(b => {
    if (b.status !== 'confirmed' || !b.date) return false;
    return b.date >= todayISO && b.date <= monthEndISO;
  }), [bookings, todayISO, monthEndISO]);

  // ユニーク来院数（同じ顧客が複数回来ても1とカウント）
  const monthUniqueCustomerIds = useMemo(() => {
    const set = new Set();
    monthDone.forEach(b => {
      const id = b.customerId || ('name:' + (b.name || ''));
      set.add(id);
    });
    return set;
  }, [monthDone]);
  const monthUniqueCount = monthUniqueCustomerIds.size;

  // 内訳：新規（今月初回来院）／リピーター
  const monthNewVisitorCount = useMemo(() => {
    return Array.from(monthUniqueCustomerIds).filter(id => {
      if (id.startsWith('name:')) return false; // customer_id 紐付けなしは除外
      const c = customers.find(x => x.id === id);
      if (!c || !c.firstVisit) return false;
      return c.firstVisit >= monthStartISO;
    }).length;
  }, [monthUniqueCustomerIds, customers, monthStartISO]);
  const monthRepeaterCount = monthUniqueCount - monthNewVisitorCount;

  // 今月の売上（実績）
  const monthRevenue = useMemo(() => monthDone.reduce((s, b) => s + (b.price || 0), 0), [monthDone]);
  // 今月末までの見込み売上（confirmed 予約の price 合計）
  const monthExpectedRevenue = useMemo(() => monthFutureConfirmed.reduce((s, b) => s + (b.price || 0), 0), [monthFutureConfirmed]);
  // 月末着地予測 = 実績 + 見込み
  const monthProjectedRevenue = monthRevenue + monthExpectedRevenue;

  const upcoming = today
    .slice()
    .sort((a,b) => a.time.localeCompare(b.time));

  // 今週の日別件数（バーチャート）
  const weekBars = [];
  for (let i = 0; i < 7; i++) {
    const d = new Date(weekStart); d.setDate(d.getDate()+i);
    const iso = D.isoDate(d);
    const cnt = bookings.filter(b => b.date === iso && b.status !== 'cancelled').length;
    weekBars.push({ label: D.WEEK_LABELS[d.getDay()] + ' ' + (d.getMonth()+1) + '/' + d.getDate(), value: cnt, isToday: iso === todayISO });
  }
  const maxBar = Math.max(1, ...weekBars.map(b => b.value));

  return (
    <div>
      {/* 未確認バナー */}
      {unconfirmed.length > 0 && (
        <div style={{marginBottom:14, padding:'14px 18px', background:'#fdf0d6', borderLeft:'4px solid #d6651e', borderRadius:8, display:'flex', alignItems:'center', gap:14}}>
          <div style={{flex:1}}>
            <div style={{fontWeight:700, fontSize:14, color:'#a87320', marginBottom:4}}>
              ⚠ 確認待ちの予約が <span style={{fontSize:18}}>{unconfirmed.length}</span>件 あります
            </div>
            <div style={{fontSize:12.5, color:'var(--ink-soft)'}}>
              過去日付なのに「確定」のままの予約です。「来院済」または「来院なし」を仕分けて売上に反映させてください。
            </div>
          </div>
          <button className="btn primary" onClick={() => onNavigate('bookings')}>
            未確認を仕分ける →
          </button>
        </div>
      )}

      {/* 本日の予約（最上部・最重要） */}
      <div className="card" style={{marginBottom:14}}>
        <div className="card-header">
          <h3 className="card-title">本日の予約</h3>
          <div style={{marginLeft:'auto', display:'flex', gap:6}}>
            <button className="btn sm" onClick={() => onNavigate('calendar')}>カレンダー</button>
            <button className="btn sm primary" onClick={() => onNavigate('bookings')}>すべて見る</button>
          </div>
        </div>
        {upcoming.length === 0 ? (
          <EmptyState icon="calendar" title="本日の予約はまだありません" sub="カレンダーから予約を追加できます"/>
        ) : (
          <div className="table-wrap">
            <table className="table">
              <thead>
                <tr><th style={{width:80}}>時間</th><th>お客様</th><th>メニュー</th><th style={{width:90}}>状態</th></tr>
              </thead>
              <tbody>
                {upcoming.map(b => {
                  const cust = (customers || []).find(c => c.id === b.customerId);
                  const memo = cust && cust.pendingMemo;
                  return (
                    <tr key={b.id} className="clickable" onClick={() => onOpenBooking(b)} style={memo ? {background:'#fdf6e8'} : undefined}>
                      <td className="mono" style={{fontWeight:700, color:'var(--green-900)'}}>{b.time}</td>
                      <td>
                        <div style={{fontWeight:600, display:'flex', alignItems:'center', gap:6}}>
                          {b.name} 様
                          {memo && <span title={memo} style={{fontSize:14, cursor:'help'}}>📝</span>}
                        </div>
                        <div className="sub">{b.tel}</div>
                        {memo && (
                          <div style={{fontSize:11.5, color:'#a87320', marginTop:3, padding:'4px 8px', background:'#fdf0d6', borderRadius:4, whiteSpace:'pre-wrap', fontWeight:500}}>
                            📝 {memo}
                          </div>
                        )}
                      </td>
                      <td>{b.menu}<div className="sub">{b.duration}分・¥{(b.price||0).toLocaleString()}</div></td>
                      <td><StatusPill status={b.status}/></td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        )}
      </div>

      <div className="stats-grid" style={{gridTemplateColumns:'repeat(4, 1fr)'}}>
        <div className="stat-tile">
          <div className="stat-tile-icon"><Icon name="today" size={18}/></div>
          <div className="stat-tile-label">本日の予約件数</div>
          <div className="stat-tile-value">{today.length}<span className="unit">件</span></div>
          <div className="stat-tile-delta">確定 {todayConfirmed} / 来院済 {todayDone}</div>
        </div>
        <div className="stat-tile">
          <div className="stat-tile-icon"><Icon name="users" size={18}/></div>
          <div className="stat-tile-label">今月の来院ユニーク</div>
          <div className="stat-tile-value">{monthUniqueCount}<span className="unit">名</span></div>
          <div className="stat-tile-delta">新規 {monthNewVisitorCount} / リピーター {monthRepeaterCount}</div>
        </div>
        <div className="stat-tile">
          <div className="stat-tile-icon orange"><Icon name="star" size={18}/></div>
          <div className="stat-tile-label">今月の新規顧客</div>
          <div className="stat-tile-value">{newCustCount}<span className="unit">名</span></div>
          <div className="stat-tile-delta">累計 {customers.length} 名</div>
        </div>
        <div className="stat-tile">
          <div className="stat-tile-icon amber"><Icon name="yen" size={18}/></div>
          <div className="stat-tile-label">今月の売上（実績）</div>
          <div className="stat-tile-value">¥{monthRevenue.toLocaleString()}</div>
          <div className="stat-tile-delta">来院済 {monthDone.length} 件</div>
        </div>
      </div>

      {/* 月末着地予測 */}
      <div className="stats-grid" style={{gridTemplateColumns:'repeat(3, 1fr)', marginTop: 14}}>
        <div className="stat-tile" style={{background: '#f4f8f0', borderColor: '#c8d8be'}}>
          <div className="stat-tile-icon" style={{background:'#dde8d2', color:'var(--green-900)'}}><Icon name="check" size={18}/></div>
          <div className="stat-tile-label">実績売上（来院済）</div>
          <div className="stat-tile-value" style={{color:'var(--green-900)'}}>¥{monthRevenue.toLocaleString()}</div>
          <div className="stat-tile-delta">{monthDone.length} 件 来院済</div>
        </div>
        <div className="stat-tile" style={{background: '#fdf6e8', borderColor: '#f0d6a0'}}>
          <div className="stat-tile-icon" style={{background:'#f7e8c4', color:'#a87320'}}><Icon name="clock" size={18}/></div>
          <div className="stat-tile-label">見込み売上（確定予約）</div>
          <div className="stat-tile-value" style={{color:'#a87320'}}>¥{monthExpectedRevenue.toLocaleString()}</div>
          <div className="stat-tile-delta">{monthFutureConfirmed.length} 件 確定予約（今日〜月末）</div>
        </div>
        <div className="stat-tile" style={{background: '#fff5e6', borderColor: '#f0c890', borderWidth: 2}}>
          <div className="stat-tile-icon orange"><Icon name="arrow-up" size={18}/></div>
          <div className="stat-tile-label" style={{fontWeight:700}}>月末着地予測</div>
          <div className="stat-tile-value" style={{color:'#d6651e', fontWeight:800}}>¥{monthProjectedRevenue.toLocaleString()}</div>
          <div className="stat-tile-delta">実績 + 見込み（合計 {monthDone.length + monthFutureConfirmed.length} 件）</div>
        </div>
      </div>

      <div className="card" style={{marginTop:14}}>
        <div className="card-header"><h3 className="card-title">今週の予約推移</h3></div>
        <div className="card-body">
          <div className="chart-wrap">
            {weekBars.map((b, i) => (
              <div key={i} className="chart-bar">
                <div className="val">{b.value}</div>
                <div className="bar" style={{height: (b.value/maxBar*160) + 'px', background: b.isToday ? 'linear-gradient(180deg, var(--orange), var(--orange-dark))' : ''}}/>
                <div className="label">{b.label}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}
window.Dashboard = Dashboard;