// Overview Dashboard
const { useState: useStateOv } = React;

function OverviewPage({ t, lang }) {
  const [period, setPeriod] = useStateOv('7d');
  const D = window.MJC_DATA;
  const periodKey = period;

  return (
    <div>
      <div className="page-header">
        <div>
          <h1 className="page-title">{t('overview_title')}</h1>
          <div className="page-subtitle">{t('overview_sub')}</div>
        </div>
        <div className="page-actions">
          <button className="btn btn-ghost"><Icon.Download size={15} /> {t('export')}</button>
          <button className="btn btn-ghost"><Icon.Calendar size={15} /> {t('view_calendar')}</button>
          <button className="btn btn-gold"><Icon.Plus size={15} /> {t('new_booking')}</button>
        </div>
      </div>

      {/* KPI Grid */}
      <div className="kpi-grid">
        {D.KPIS.map((k, i) => {
          const IconComp = Icon[{
            calendar: 'Calendar', sparkle: 'Sparkle', flag: 'Flag', bus: 'Bus', cash: 'Cash', doc: 'Doc'
          }[k.icon]];
          return (
            <div key={i} className={`kpi ${k.gold ? 'kpi-gold' : ''}`}>
              <div className="kpi-label">
                <span className="kpi-icon"><IconComp size={15} stroke={1.8} /></span>
                {t(k.key)}
              </div>
              <div className="kpi-value">{k.value}<span className="unit">{k.unit}</span></div>
              <div className={`kpi-delta ${k.dir}`}>
                {k.dir === 'up' ? <Icon.ArrowUp size={11} /> : <Icon.ArrowDown size={11} />}
                {k.delta} <span style={{ opacity: .7, marginLeft: 2 }}>{t('vs_last_period')}</span>
              </div>
            </div>
          );
        })}
      </div>

      <div className="grid-2" style={{ marginBottom: 'var(--gap)' }}>
        {/* Revenue Chart */}
        <div className="card">
          <div className="card-header">
            <div>
              <h3 className="card-title">{t('revenue_trend')}</h3>
              <div className="card-subtitle">RM · {period === '7d' ? t('days_7') : period === '30d' ? t('days_30') : t('days_90')}</div>
            </div>
            <div className="chart-tabs">
              <button className={period === '7d' ? 'active' : ''} onClick={() => setPeriod('7d')}>{t('days_7')}</button>
              <button className={period === '30d' ? 'active' : ''} onClick={() => setPeriod('30d')}>{t('days_30')}</button>
              <button className={period === '90d' ? 'active' : ''} onClick={() => setPeriod('90d')}>{t('days_90')}</button>
            </div>
          </div>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 12, marginBottom: 8 }}>
            <div style={{ fontSize: 26, fontWeight: 700, letterSpacing: '-.02em' }}>
              RM {period === '7d' ? '430,200' : period === '30d' ? '1,820,400' : '4,560,800'}
            </div>
            <div className="kpi-delta up"><Icon.ArrowUp size={11} /> {period === '7d' ? '+12%' : period === '30d' ? '+18%' : '+24%'}</div>
          </div>
          <LineChart data={D.REVENUE[periodKey]} gold height={240} />
        </div>

        {/* AI Bot Activity */}
        <div className="ai-surface" style={{ position: 'relative' }}>
          <div className="card-header" style={{ marginBottom: 16 }}>
            <div>
              <span className="ai-badge"><Icon.Sparkle size={12} stroke={2.5} /> AI</span>
              <h3 className="card-title" style={{ marginTop: 8 }}>{t('ai_bot_activity')}</h3>
            </div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14, position: 'relative', zIndex: 1 }}>
            <div>
              <div className="muted" style={{ fontSize: 11.5, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '.06em' }}>{t('messages_today')}</div>
              <div style={{ fontSize: 28, fontWeight: 700, color: 'var(--teal)', marginTop: 4 }}>342</div>
              <div style={{ fontSize: 11, color: 'var(--muted)' }}>{lang === 'zh' ? '↑ 比昨日 +18%' : '↑ 18% vs. yesterday'}</div>
            </div>
            <div>
              <div className="muted" style={{ fontSize: 11.5, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '.06em' }}>{t('leads_captured')}</div>
              <div style={{ fontSize: 28, fontWeight: 700, color: 'var(--teal)', marginTop: 4 }}>47</div>
              <div style={{ fontSize: 11, color: 'var(--muted)' }}>{lang === 'zh' ? '14% 自动报价' : '14% auto-quoted'}</div>
            </div>
          </div>
          <div style={{ marginTop: 16, padding: 12, background: 'rgba(13,106,122,.05)', borderRadius: 10, border: '1px solid rgba(13,106,122,.12)' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 6 }}>
              <span style={{ fontSize: 11.5, fontWeight: 600, color: 'var(--teal)' }}>{t('conversion_rate')}</span>
              <span style={{ fontSize: 13, fontWeight: 700 }}>13.7%</span>
            </div>
            <div style={{ height: 6, background: 'rgba(13,106,122,.1)', borderRadius: 999, overflow: 'hidden' }}>
              <div style={{ width: '13.7%', height: '100%', background: 'linear-gradient(90deg, var(--teal), var(--teal-soft))', borderRadius: 999 }}></div>
            </div>
          </div>
          <div style={{ marginTop: 14, fontSize: 12, color: 'var(--ink-soft)', display: 'flex', gap: 6, alignItems: 'flex-start' }}>
            <Icon.Sparkle size={13} stroke={2} />
            <span><strong>{lang === 'zh' ? 'AI 洞察:' : 'AI Insight:'}</strong> {lang === 'zh' ? '本周咨询高峰为周六晚 8-10 点,建议增加值班人员。' : 'Peak enquiries this week: Sat 8-10pm. Consider staffing.'}</span>
          </div>
        </div>
      </div>

      <div className="grid-2" style={{ gridTemplateColumns: '2fr 1fr' }}>
        {/* Upcoming Departures */}
        <div className="table-wrap">
          <div className="table-toolbar">
            <span className="title">{t('upcoming_departures')}</span>
            <button className="btn btn-ghost btn-sm"><Icon.Filter size={13} /> {t('filter')}</button>
            <button className="btn btn-ghost btn-sm"><Icon.Download size={13} /></button>
          </div>
          <table className="table">
            <thead>
              <tr>
                <th>{t('booking_id')}</th>
                <th>{t('tour')}</th>
                <th>{t('date')}</th>
                <th>{t('pax')}</th>
                <th>{t('guide')}</th>
                <th>{t('vehicle')}</th>
                <th>{t('status')}</th>
              </tr>
            </thead>
            <tbody>
              {D.DEPARTURES.map((d, i) => (
                <tr key={i}>
                  <td className="strong mono" style={{ fontSize: 12 }}>{d.id}</td>
                  <td className="strong">{lang === 'zh' ? d.tour_zh : d.tour_en}</td>
                  <td>{d.date.slice(5)}</td>
                  <td>{d.pax}</td>
                  <td>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                      <div className="avatar avatar-sm avatar-navy">{(lang === 'zh' ? d.guide_zh : d.guide_en).slice(0, 1)}</div>
                      <span>{lang === 'zh' ? d.guide_zh : d.guide_en}</span>
                    </div>
                  </td>
                  <td className="mono" style={{ fontSize: 12 }}>{d.bus}</td>
                  <td><StatusBadge status={d.status} t={t} /></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        {/* Fleet Status mini */}
        <div className="card">
          <div className="card-header">
            <h3 className="card-title">{t('fleet_status')}</h3>
            <span className="badge no-dot" style={{ background: 'var(--bg-alt)', color: 'var(--muted)', fontSize: 10.5 }}>LIVE</span>
          </div>
          <div style={{ display: 'flex', gap: 8, marginBottom: 14 }}>
            <div style={{ flex: 1, padding: 10, borderRadius: 10, background: 'rgba(13,106,122,.08)' }}>
              <div style={{ fontSize: 18, fontWeight: 700, color: 'var(--teal)' }}>4</div>
              <div style={{ fontSize: 10.5, color: 'var(--muted)', textTransform: 'uppercase', letterSpacing: '.05em' }}>{t('ontrip')}</div>
            </div>
            <div style={{ flex: 1, padding: 10, borderRadius: 10, background: 'rgba(22,163,74,.08)' }}>
              <div style={{ fontSize: 18, fontWeight: 700, color: 'var(--success)' }}>3</div>
              <div style={{ fontSize: 10.5, color: 'var(--muted)', textTransform: 'uppercase', letterSpacing: '.05em' }}>{t('available')}</div>
            </div>
            <div style={{ flex: 1, padding: 10, borderRadius: 10, background: 'var(--bg)' }}>
              <div style={{ fontSize: 18, fontWeight: 700, color: 'var(--muted)' }}>1</div>
              <div style={{ fontSize: 10.5, color: 'var(--muted)', textTransform: 'uppercase', letterSpacing: '.05em' }}>{t('maintenance')}</div>
            </div>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {D.VEHICLES.slice(0, 6).map((v, i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '8px 10px', borderRadius: 8, background: 'var(--bg)' }}>
                <div style={{ width: 30, height: 30, borderRadius: 8, background: '#fff', display: 'grid', placeItems: 'center', color: 'var(--navy)' }}>
                  <Icon.Bus size={15} />
                </div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 12.5, fontWeight: 600, fontFamily: 'var(--font-mono)' }}>{v.plate}</div>
                  <div className="muted" style={{ fontSize: 11, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
                    {v.trip || (lang === 'zh' ? '空闲' : 'Idle')}
                  </div>
                </div>
                <StatusBadge status={v.status} t={t} />
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

window.OverviewPage = OverviewPage;