// Skeleton modules — realistic but less-detailed implementations
const { useState: useStateSk } = React;

// === TOUR GUIDE ===
function TourGuidePage({ t, lang, route }) {
  const D = window.MJC_DATA;
  const sub = route.split('/')[1] || 'roster';

  if (sub === 'commission') {
    const rows = D.GUIDES.map((g, i) => ({
      guide: g,
      trips: 12 - i,
      base: (12 - i) * 180,
      bonus: i % 2 === 0 ? 350 : 200,
      status: i < 3 ? 'paid' : 'pending'
    }));
    const total = rows.reduce((s, r) => s + r.base + r.bonus, 0);
    return (
      <div>
        <div className="page-header">
          <div>
            <h1 className="page-title">{lang === 'zh' ? '导游佣金' : 'Guide Commission'}</h1>
            <div className="page-subtitle">{lang === 'zh' ? '2026 年 5 月结算 · 计算公式: 团数 × 单价 + 奖金' : 'May 2026 cycle · Formula: trips × rate + bonus'}</div>
          </div>
          <div className="page-actions">
            <button className="btn btn-ghost"><Icon.Download size={15} /> {t('export')}</button>
            <button className="btn btn-gold"><Icon.Check size={15} /> {lang === 'zh' ? '批量发放' : 'Pay All'}</button>
          </div>
        </div>
        <div className="kpi-grid" style={{ gridTemplateColumns: 'repeat(4, 1fr)' }}>
          {[
            { label: lang === 'zh' ? '本月总佣金' : 'Total Commission', val: `RM ${total.toLocaleString()}`, dir: 'up', delta: '+12%' },
            { label: lang === 'zh' ? '已发放' : 'Paid Out', val: `RM ${(total * 0.45).toFixed(0)}`, dir: 'up', delta: '3 guides' },
            { label: lang === 'zh' ? '待发放' : 'Pending', val: `RM ${(total * 0.55).toFixed(0)}`, dir: 'flat', delta: '3 guides' },
            { label: lang === 'zh' ? '团数总计' : 'Total Trips', val: rows.reduce((s, r) => s + r.trips, 0), dir: 'up', delta: '+8' }
          ].map((k, i) => (
            <div key={i} className="kpi">
              <div className="kpi-label">{k.label}</div>
              <div className="kpi-value">{k.val}</div>
              <div className={`kpi-delta ${k.dir}`}>{k.delta}</div>
            </div>
          ))}
        </div>
        <div className="table-wrap">
          <div className="table-toolbar"><span className="title">{lang === 'zh' ? '佣金明细' : 'Commission Breakdown'}</span></div>
          <table className="table">
            <thead>
              <tr>
                <th>{t('guide')}</th>
                <th>{lang === 'zh' ? '完成团数' : 'Trips'}</th>
                <th>{lang === 'zh' ? '单价' : 'Rate'}</th>
                <th>{lang === 'zh' ? '基本佣金' : 'Base'}</th>
                <th>{lang === 'zh' ? '奖金' : 'Bonus'}</th>
                <th>{lang === 'zh' ? '应付' : 'Payable'}</th>
                <th>{t('status')}</th>
                <th></th>
              </tr>
            </thead>
            <tbody>
              {rows.map((r, i) => (
                <tr key={i}>
                  <td>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                      <div className="avatar avatar-sm avatar-teal">{(lang === 'zh' ? r.guide.name_zh : r.guide.name_en).slice(0, 1)}</div>
                      <span className="strong">{lang === 'zh' ? r.guide.name_zh : r.guide.name_en}</span>
                    </div>
                  </td>
                  <td className="strong">{r.trips}</td>
                  <td className="mono">RM 180</td>
                  <td>RM {r.base.toLocaleString()}</td>
                  <td>RM {r.bonus}</td>
                  <td className="strong" style={{ color: 'var(--gold)' }}>RM {(r.base + r.bonus).toLocaleString()}</td>
                  <td>
                    <span className={`badge ${r.status === 'paid' ? 'badge-active' : 'badge-pending'}`}>
                      {r.status === 'paid' ? (lang === 'zh' ? '已发放' : 'Paid') : (lang === 'zh' ? '待发放' : 'Pending')}
                    </span>
                  </td>
                  <td>
                    {r.status === 'pending' ? (
                      <button className="btn btn-sm" style={{ background: 'var(--success-bg)', color: 'var(--success)' }}>
                        <Icon.Check size={12} /> {lang === 'zh' ? '标记已付' : 'Mark Paid'}
                      </button>
                    ) : null}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    );
  }

  if (sub === 'expense') {
    return <ExpenseClaims t={t} lang={lang} />;
  }

  // Default: roster + daily
  return (
    <div>
      <div className="page-header">
        <div>
          <h1 className="page-title">{lang === 'zh' ? '导游管理' : 'Tour Guides'}</h1>
          <div className="page-subtitle">{lang === 'zh' ? '导游档案、语言能力、专长目的地与评分。' : 'Profiles, languages, speciality destinations and ratings.'}</div>
        </div>
        <div className="page-actions">
          <button className="btn btn-ghost"><Icon.Filter size={15} /> {t('filter')}</button>
          <button className="btn btn-gold"><Icon.Plus size={15} /> {lang === 'zh' ? '新增导游' : 'Add Guide'}</button>
        </div>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(260px, 1fr))', gap: 'var(--gap)' }}>
        {D.GUIDES.map((g, i) => (
          <div key={i} className="card" style={{ textAlign: 'center' }}>
            <div className="avatar avatar-lg avatar-teal" style={{ width: 64, height: 64, fontSize: 22, margin: '4px auto 12px' }}>
              {(lang === 'zh' ? g.name_zh : g.name_en).slice(0, 1)}
            </div>
            <div style={{ fontWeight: 600, fontSize: 15 }}>{lang === 'zh' ? g.name_zh : g.name_en}</div>
            <div className="muted mono" style={{ fontSize: 11, marginTop: 2 }}>{g.id}</div>
            <div style={{ display: 'flex', justifyContent: 'center', gap: 4, marginTop: 10, flexWrap: 'wrap' }}>
              {g.langs.map((l, i) => (
                <span key={i} className="badge no-dot" style={{ fontSize: 10.5, background: 'var(--bg-alt)', color: 'var(--ink-soft)' }}>{l}</span>
              ))}
            </div>
            <div style={{ display: 'flex', justifyContent: 'center', gap: 10, marginTop: 12, padding: '10px 0', borderTop: '1px solid var(--border)', fontSize: 12 }}>
              <span style={{ display: 'flex', alignItems: 'center', gap: 3 }}>
                <Icon.Star size={13} stroke={2} /> <strong>{g.rating}</strong>
              </span>
              <span className="muted">·</span>
              <span className="muted">{g.spec}</span>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function ExpenseClaims({ t, lang }) {
  const [form, setForm] = useStateSk({ category: 'meal', amount: '', date: '', desc: '' });
  const [errors, setErrors] = useStateSk({});
  const [filed, setFiled] = useStateSk(false);

  const claims = [
    { id: 'EXP-0089', guide: lang === 'zh' ? '林伟健' : 'Lim Wei Jian', cat: lang === 'zh' ? '餐饮' : 'Meals', amount: 'RM 240', date: '2026-05-18', status: 'pending' },
    { id: 'EXP-0088', guide: lang === 'zh' ? '陈美玲' : 'Tan Mei Ling', cat: lang === 'zh' ? '门票' : 'Tickets', amount: 'RM 580', date: '2026-05-17', status: 'approved' },
    { id: 'EXP-0087', guide: lang === 'zh' ? '李俊豪' : 'Lee Chun Hoe', cat: lang === 'zh' ? '住宿' : 'Lodging', amount: 'RM 320', date: '2026-05-15', status: 'approved' },
    { id: 'EXP-0086', guide: lang === 'zh' ? '王家伟' : 'Wong Kah Wai', cat: lang === 'zh' ? '交通' : 'Transport', amount: 'RM 95', date: '2026-05-14', status: 'rejected' },
    { id: 'EXP-0085', guide: lang === 'zh' ? '艾哈迈德·法伊兹' : 'Ahmad Faiz', cat: lang === 'zh' ? '其他' : 'Misc', amount: 'RM 145', date: '2026-05-12', status: 'pending' }
  ];

  const submit = () => {
    const e = {};
    if (!form.amount || +form.amount <= 0) e.amount = lang === 'zh' ? '请输入有效金额' : 'Valid amount required';
    if (!form.date) e.date = lang === 'zh' ? '请选择日期' : 'Date required';
    if (!form.desc.trim()) e.desc = lang === 'zh' ? '请说明用途' : 'Description required';
    setErrors(e);
    if (Object.keys(e).length === 0) {
      setFiled(true);
      setTimeout(() => { setFiled(false); setForm({ category: 'meal', amount: '', date: '', desc: '' }); }, 2000);
    }
  };

  const stMap = { pending: 'badge-pending', approved: 'badge-active', rejected: 'badge-cancelled' };
  const stLabel = (s) => ({
    pending: lang === 'zh' ? '待审批' : 'Pending',
    approved: lang === 'zh' ? '已批准' : 'Approved',
    rejected: lang === 'zh' ? '已拒绝' : 'Rejected'
  })[s];

  return (
    <div>
      <div className="page-header">
        <div>
          <h1 className="page-title">{lang === 'zh' ? '费用报销' : 'Expense Claims'}</h1>
          <div className="page-subtitle">{lang === 'zh' ? '提交并审批团游产生的费用。' : 'File and approve tour-related expenses.'}</div>
        </div>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.6fr', gap: 'var(--gap)' }}>
        <div className="card">
          <h3 className="card-title" style={{ marginBottom: 14 }}>{lang === 'zh' ? '新建报销' : 'New Claim'}</h3>
          {filed ? (
            <div style={{ textAlign: 'center', padding: 30 }}>
              <div style={{ width: 56, height: 56, borderRadius: '50%', background: 'var(--success-bg)', color: 'var(--success)', display: 'inline-grid', placeItems: 'center', marginBottom: 10 }}>
                <Icon.Check size={26} stroke={2.5} />
              </div>
              <div style={{ fontWeight: 600 }}>{lang === 'zh' ? '报销已提交,等待审批' : 'Claim submitted for approval'}</div>
            </div>
          ) : (
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              <div className="field">
                <label className="field-label">{lang === 'zh' ? '类别' : 'Category'}</label>
                <select className="field-select" value={form.category} onChange={(e) => setForm({ ...form, category: e.target.value })}>
                  <option value="meal">{lang === 'zh' ? '餐饮' : 'Meals'}</option>
                  <option value="ticket">{lang === 'zh' ? '门票' : 'Tickets'}</option>
                  <option value="lodging">{lang === 'zh' ? '住宿' : 'Lodging'}</option>
                  <option value="transport">{lang === 'zh' ? '交通' : 'Transport'}</option>
                  <option value="misc">{lang === 'zh' ? '其他' : 'Misc'}</option>
                </select>
              </div>
              <div className="field">
                <label className="field-label">{lang === 'zh' ? '金额 (RM)' : 'Amount (RM)'}<span className="req">*</span></label>
                <input type="number" className={`field-input ${errors.amount ? 'error' : ''}`} value={form.amount} onChange={(e) => { setForm({ ...form, amount: e.target.value }); if (errors.amount) setErrors({ ...errors, amount: null }); }} placeholder="240" />
                {errors.amount && <div className="field-error"><Icon.Alert size={11} /> {errors.amount}</div>}
              </div>
              <div className="field">
                <label className="field-label">{t('date')}<span className="req">*</span></label>
                <input type="date" className={`field-input ${errors.date ? 'error' : ''}`} value={form.date} onChange={(e) => { setForm({ ...form, date: e.target.value }); if (errors.date) setErrors({ ...errors, date: null }); }} />
                {errors.date && <div className="field-error"><Icon.Alert size={11} /> {errors.date}</div>}
              </div>
              <div className="field">
                <label className="field-label">{lang === 'zh' ? '用途说明' : 'Description'}<span className="req">*</span></label>
                <textarea className={`field-textarea ${errors.desc ? 'error' : ''}`} value={form.desc} onChange={(e) => { setForm({ ...form, desc: e.target.value }); if (errors.desc) setErrors({ ...errors, desc: null }); }} placeholder={lang === 'zh' ? '云顶团客户晚餐' : 'Genting tour client dinner'}></textarea>
                {errors.desc && <div className="field-error"><Icon.Alert size={11} /> {errors.desc}</div>}
              </div>
              <button className="btn btn-gold" onClick={submit} style={{ justifyContent: 'center' }}>
                <Icon.Send size={14} /> {lang === 'zh' ? '提交审批' : 'Submit for Approval'}
              </button>
            </div>
          )}
        </div>
        <div className="table-wrap">
          <div className="table-toolbar">
            <span className="title">{lang === 'zh' ? '报销历史' : 'Claims History'}</span>
          </div>
          <table className="table">
            <thead>
              <tr>
                <th>ID</th>
                <th>{t('guide')}</th>
                <th>{lang === 'zh' ? '类别' : 'Category'}</th>
                <th>{lang === 'zh' ? '金额' : 'Amount'}</th>
                <th>{t('date')}</th>
                <th>{t('status')}</th>
                <th></th>
              </tr>
            </thead>
            <tbody>
              {claims.map((c, i) => (
                <tr key={i}>
                  <td className="mono strong" style={{ fontSize: 12 }}>{c.id}</td>
                  <td>{c.guide}</td>
                  <td>{c.cat}</td>
                  <td className="strong">{c.amount}</td>
                  <td>{c.date}</td>
                  <td><span className={`badge ${stMap[c.status]}`}>{stLabel(c.status)}</span></td>
                  <td>
                    {c.status === 'pending' && (
                      <div style={{ display: 'flex', gap: 4 }}>
                        <button className="icon-btn" style={{ color: 'var(--success)' }}><Icon.Check size={14} /></button>
                        <button className="icon-btn" style={{ color: 'var(--danger)' }}><Icon.X size={14} /></button>
                      </div>
                    )}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

// === ACCOUNTING ===
function AccountingPage({ t, lang, route }) {
  const D = window.MJC_DATA;
  const products = [
    { name_en: 'Tours', name_zh: '团游', revenue: 248, color: 'var(--navy)' },
    { name_en: 'Flights', name_zh: '机票', revenue: 92, color: 'var(--teal)' },
    { name_en: 'Hotels', name_zh: '酒店', revenue: 58, color: 'var(--gold)' },
    { name_en: 'Golf', name_zh: '高尔夫', revenue: 14, color: 'var(--gold-soft)' }
  ];
  const totalRev = products.reduce((s, p) => s + p.revenue, 0);

  return (
    <div>
      <div className="page-header">
        <div>
          <h1 className="page-title">{lang === 'zh' ? '财务管理' : 'Accounting & Finance'}</h1>
          <div className="page-subtitle">{lang === 'zh' ? '收入、利润与现金流总览。' : 'Revenue, profit and cash flow overview.'}</div>
        </div>
        <div className="page-actions">
          <button className="btn btn-ghost"><Icon.Download size={15} /> {lang === 'zh' ? '导出 Excel' : 'Export Excel'}</button>
          <button className="btn btn-gold"><Icon.Plus size={15} /> {lang === 'zh' ? '新增发票' : 'New Invoice'}</button>
        </div>
      </div>

      <div className="kpi-grid" style={{ gridTemplateColumns: 'repeat(4, 1fr)' }}>
        {[
          { label: t('revenue'), val: `RM ${totalRev}k`, delta: '+18%', dir: 'up', gold: true },
          { label: t('cost'), val: 'RM 248k', delta: '+12%', dir: 'up' },
          { label: t('gross_profit'), val: `RM ${totalRev - 248}k`, delta: '+24%', dir: 'up', gold: true },
          { label: t('net_margin'), val: '23.4%', delta: '+2.1pp', dir: 'up' }
        ].map((k, i) => (
          <div key={i} className={`kpi ${k.gold ? 'kpi-gold' : ''}`}>
            <div className="kpi-label">{k.label}</div>
            <div className="kpi-value">{k.val}</div>
            <div className={`kpi-delta ${k.dir}`}>
              <Icon.ArrowUp size={11} /> {k.delta} {t('vs_last_period')}
            </div>
          </div>
        ))}
      </div>

      <div className="grid-2" style={{ marginBottom: 'var(--gap)' }}>
        <div className="card">
          <div className="card-header">
            <h3 className="card-title">{lang === 'zh' ? '收入构成 (本月)' : 'Revenue by Product (MTD)'}</h3>
            <span className="muted" style={{ fontSize: 12 }}>RM {totalRev}k</span>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            {products.map((p, i) => (
              <div key={i}>
                <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 5 }}>
                  <span style={{ fontSize: 13, fontWeight: 500 }}>{lang === 'zh' ? p.name_zh : p.name_en}</span>
                  <span style={{ fontSize: 13, fontWeight: 600 }}>RM {p.revenue}k <span className="muted" style={{ fontWeight: 400 }}>({((p.revenue/totalRev)*100).toFixed(1)}%)</span></span>
                </div>
                <div style={{ height: 10, background: 'var(--bg)', borderRadius: 999, overflow: 'hidden' }}>
                  <div style={{ width: `${(p.revenue/totalRev)*100}%`, height: '100%', background: p.color, borderRadius: 999, transition: 'width .5s' }}></div>
                </div>
              </div>
            ))}
          </div>
        </div>
        <div className="card">
          <div className="card-header">
            <h3 className="card-title">{lang === 'zh' ? '现金流' : 'Cash Flow'}</h3>
            <span className="muted" style={{ fontSize: 12 }}>30d</span>
          </div>
          <LineChart data={D.REVENUE['30d']} height={210} />
        </div>
      </div>

      <div className="table-wrap">
        <div className="table-toolbar">
          <span className="title">{lang === 'zh' ? '发票 (应收 / 应付)' : 'Invoices (AR / AP)'}</span>
          <div className="chart-tabs">
            <button className="active">{lang === 'zh' ? '应收' : 'AR'}</button>
            <button>{lang === 'zh' ? '应付' : 'AP'}</button>
          </div>
          <button className="btn btn-ghost btn-sm"><Icon.Filter size={13} /> {t('filter')}</button>
        </div>
        <table className="table">
          <thead>
            <tr>
              <th>{lang === 'zh' ? '发票号' : 'Invoice'}</th>
              <th>{lang === 'zh' ? '客户' : 'Customer'}</th>
              <th>{lang === 'zh' ? '团游' : 'Tour'}</th>
              <th>{lang === 'zh' ? '金额' : 'Amount'}</th>
              <th>{lang === 'zh' ? '到期' : 'Due'}</th>
              <th>{lang === 'zh' ? '账龄' : 'Aging'}</th>
              <th>{t('status')}</th>
            </tr>
          </thead>
          <tbody>
            {[
              ['INV-9821', 'Mr. Zhang Wei', 'Genting + KL 5D4N', 'RM 11,340', '2026-06-15', '0-30', 'pending'],
              ['INV-9820', 'Sarah Tan', 'Langkawi Honeymoon', 'RM 6,500', '2026-06-01', '0-30', 'pending'],
              ['INV-9819', 'Ms. Liu Yan Corp.', 'Custom 7-day Group', 'RM 42,800', '2026-05-30', '0-30', 'pending'],
              ['INV-9818', 'Mrs. Wong', 'Malacca 3D2N', 'RM 4,200', '2026-05-10', '31-60', 'pending'],
              ['INV-9817', 'David Kumar Inc.', 'Cameron Corporate', 'RM 28,000', '2026-04-25', '61-90', 'pending'],
              ['INV-9816', 'James Lee', 'Golf Tour 2D1N', 'RM 14,000', '2026-04-12', '60+', 'pending']
            ].map((r, i) => (
              <tr key={i}>
                <td className="strong mono" style={{ fontSize: 12 }}>{r[0]}</td>
                <td className="strong">{r[1]}</td>
                <td>{r[2]}</td>
                <td className="strong">{r[3]}</td>
                <td>{r[4]}</td>
                <td>
                  <span className="badge no-dot" style={{
                    background: r[5] === '0-30' ? 'var(--success-bg)' : r[5] === '31-60' ? 'var(--warning-bg)' : 'var(--danger-bg)',
                    color: r[5] === '0-30' ? 'var(--success)' : r[5] === '31-60' ? 'var(--warning)' : 'var(--danger)',
                    fontSize: 11
                  }}>{r[5]} days</span>
                </td>
                <td><StatusBadge status="pending" t={t} /></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

// === CRM ===
function CRMPage({ t, lang }) {
  const customers = [
    { name_en: 'Mr. Zhang Wei', name_zh: '张伟先生', country: 'CN', trips: 1, spend: 'RM 11,340', source: 'WhatsApp', next: '2026-06-23' },
    { name_en: 'Sarah Tan', name_zh: '陈秀华', country: 'MY', trips: 3, spend: 'RM 18,200', source: 'Website', next: '2026-07-10' },
    { name_en: 'Ms. Liu Yan', name_zh: '刘燕女士', country: 'CN', trips: 2, spend: 'RM 78,500', source: 'WeChat', next: '2026-08-05' },
    { name_en: 'David Kumar', name_zh: '大卫·库马尔', country: 'MY', trips: 5, spend: 'RM 92,800', source: 'Referral', next: '—' },
    { name_en: 'Mrs. Wong', name_zh: '黄太太', country: 'SG', trips: 4, spend: 'RM 16,500', source: 'Website', next: '2026-09-12' },
    { name_en: 'Hassan Idris', name_zh: '哈桑·伊德里斯', country: 'MY', trips: 2, spend: 'RM 12,400', source: 'WhatsApp', next: '—' },
    { name_en: 'James Lee', name_zh: '李志明', country: 'MY', trips: 8, spend: 'RM 145,200', source: 'Referral', next: '2026-06-30' },
    { name_en: 'Priya Naidu', name_zh: '普里亚·奈杜', country: 'MY', trips: 1, spend: 'RM 5,200', source: 'Website', next: '—' }
  ];

  return (
    <div>
      <div className="page-header">
        <div>
          <h1 className="page-title">{lang === 'zh' ? '客户管理' : 'Customer CRM'}</h1>
          <div className="page-subtitle">{lang === 'zh' ? '客户资料、历史行程与跟进记录。' : 'Customer profiles, trip history and follow-up notes.'}</div>
        </div>
        <div className="page-actions">
          <button className="btn btn-ghost"><Icon.Download size={15} /> {t('export')}</button>
          <button className="btn btn-gold"><Icon.Plus size={15} /> {lang === 'zh' ? '新增客户' : 'Add Customer'}</button>
        </div>
      </div>
      <div className="kpi-grid" style={{ gridTemplateColumns: 'repeat(4, 1fr)' }}>
        {[
          { label: lang === 'zh' ? '客户总数' : 'Total Customers', val: '1,847', delta: '+58' },
          { label: lang === 'zh' ? '活跃 (90d)' : 'Active (90d)', val: '624', delta: '+12%' },
          { label: lang === 'zh' ? '复购率' : 'Repeat Rate', val: '34.2%', delta: '+1.8pp' },
          { label: lang === 'zh' ? '人均客单' : 'Avg LTV', val: 'RM 4,820', delta: '+8%' }
        ].map((k, i) => (
          <div key={i} className="kpi">
            <div className="kpi-label">{k.label}</div>
            <div className="kpi-value">{k.val}</div>
            <div className="kpi-delta up"><Icon.ArrowUp size={11} /> {k.delta}</div>
          </div>
        ))}
      </div>
      <div className="table-wrap">
        <div className="table-toolbar">
          <span className="title">{lang === 'zh' ? '客户列表' : 'Customers'}</span>
          <button className="btn btn-ghost btn-sm"><Icon.Filter size={13} /> {lang === 'zh' ? '按国家' : 'By Country'}</button>
          <button className="btn btn-ghost btn-sm"><Icon.Filter size={13} /> {lang === 'zh' ? '按来源' : 'By Source'}</button>
        </div>
        <table className="table">
          <thead>
            <tr>
              <th>{lang === 'zh' ? '客户' : 'Customer'}</th>
              <th>{lang === 'zh' ? '国家' : 'Country'}</th>
              <th>{lang === 'zh' ? '历史行程' : 'Trips'}</th>
              <th>{lang === 'zh' ? '总消费' : 'Total Spend'}</th>
              <th>{t('source')}</th>
              <th>{lang === 'zh' ? '下次行程' : 'Next Trip'}</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {customers.map((c, i) => (
              <tr key={i}>
                <td>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                    <div className="avatar avatar-sm avatar-navy">{(lang === 'zh' ? c.name_zh : c.name_en).slice(0, 1).toUpperCase()}</div>
                    <span className="strong">{lang === 'zh' ? c.name_zh : c.name_en}</span>
                  </div>
                </td>
                <td><span className="mono">{c.country}</span></td>
                <td className="strong">{c.trips}</td>
                <td className="strong" style={{ color: c.trips >= 5 ? 'var(--gold)' : 'var(--ink)' }}>{c.spend}</td>
                <td>{c.source}</td>
                <td className={c.next === '—' ? 'muted' : ''}>{c.next}</td>
                <td>
                  <div className="row-actions">
                    <button className="icon-btn"><Icon.Whatsapp size={14} /></button>
                    <button className="icon-btn"><Icon.Eye size={14} /></button>
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

// === SUPPLIERS ===
function SuppliersPage({ t, lang }) {
  const suppliers = [
    { name: 'Grand Hyatt Kuala Lumpur', type: 'Hotel', contact: 'Aaron Liew', rating: 4.8, contract: 'Active until Dec 2026', rate: 'RM 380/night' },
    { name: 'AirAsia X', type: 'Airline', contact: 'Corporate Sales', rating: 4.5, contract: 'NET-30 corporate', rate: '8% commission' },
    { name: 'Awana Skyway Cable Car', type: 'Attraction', contact: 'Ms. Chen', rating: 4.7, contract: 'Renewed 2026', rate: 'RM 17.50 group' },
    { name: 'Eastern & Oriental Penang', type: 'Hotel', contact: 'Reservations', rating: 4.9, contract: 'Active until Mar 2027', rate: 'RM 620/night' },
    { name: 'Sutera Harbour Resort', type: 'Hotel', contact: 'Daniel Wong', rating: 4.6, contract: 'Active until Sep 2026', rate: 'RM 450/night' },
    { name: 'KL Hop-On Hop-Off', type: 'Ground Transport', contact: 'Operations', rating: 4.3, contract: 'Monthly', rate: 'RM 38 group' }
  ];

  return (
    <div>
      <div className="page-header">
        <div>
          <h1 className="page-title">{lang === 'zh' ? '供应商管理' : 'Supplier Management'}</h1>
          <div className="page-subtitle">{lang === 'zh' ? '酒店、航空、景点、地接服务商。' : 'Hotels, airlines, attractions and ground transport vendors.'}</div>
        </div>
        <div className="page-actions">
          <button className="btn btn-gold"><Icon.Plus size={15} /> {lang === 'zh' ? '新增供应商' : 'Add Supplier'}</button>
        </div>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(320px, 1fr))', gap: 'var(--gap)' }}>
        {suppliers.map((s, i) => (
          <div key={i} className="card">
            <div style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
              <div style={{ width: 48, height: 48, borderRadius: 12, background: 'var(--bg-alt)', display: 'grid', placeItems: 'center', color: 'var(--navy)' }}>
                <Icon.Building size={22} />
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontWeight: 600, fontSize: 14 }}>{s.name}</div>
                <span className="badge no-dot" style={{ background: 'var(--bg-alt)', color: 'var(--ink-soft)', fontSize: 10.5, marginTop: 4 }}>{s.type}</span>
              </div>
              <div style={{ textAlign: 'right' }}>
                <div style={{ fontSize: 12, fontWeight: 700, color: 'var(--gold)', display: 'flex', alignItems: 'center', gap: 3 }}>
                  <Icon.Star size={12} stroke={2} /> {s.rating}
                </div>
              </div>
            </div>
            <div style={{ marginTop: 14, paddingTop: 12, borderTop: '1px solid var(--border)', display: 'flex', flexDirection: 'column', gap: 6, fontSize: 12 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between' }}><span className="muted">{lang === 'zh' ? '联系人' : 'Contact'}</span><span className="strong">{s.contact}</span></div>
              <div style={{ display: 'flex', justifyContent: 'space-between' }}><span className="muted">{lang === 'zh' ? '合约' : 'Contract'}</span><span>{s.contract}</span></div>
              <div style={{ display: 'flex', justifyContent: 'space-between' }}><span className="muted">{lang === 'zh' ? '议价率' : 'Rate'}</span><span className="strong" style={{ color: 'var(--gold)' }}>{s.rate}</span></div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// === REPORTS ===
function ReportsPage({ t, lang }) {
  const D = window.MJC_DATA;
  const sources = [
    { name_en: 'AI Bot / WhatsApp', name_zh: 'AI 机器人 / WhatsApp', value: 42, color: 'var(--teal)' },
    { name_en: 'Website', name_zh: '官网', value: 28, color: 'var(--navy)' },
    { name_en: 'Referral', name_zh: '推荐', value: 18, color: 'var(--gold)' },
    { name_en: 'Walk-in', name_zh: '直接到店', value: 12, color: 'var(--muted)' }
  ];
  const destinations = [
    { name: 'Genting Highlands', revenue: 'RM 142k', trips: 18 },
    { name: 'Penang', revenue: 'RM 98k', trips: 14 },
    { name: 'Langkawi', revenue: 'RM 84k', trips: 9 },
    { name: 'Cameron Highlands', revenue: 'RM 56k', trips: 11 },
    { name: 'Malacca', revenue: 'RM 32k', trips: 16 }
  ];

  return (
    <div>
      <div className="page-header">
        <div>
          <h1 className="page-title">{lang === 'zh' ? '报表与分析' : 'Reports & Analytics'}</h1>
          <div className="page-subtitle">{lang === 'zh' ? '业绩、来源、目的地与导游表现。' : 'Performance, sources, destinations and guide metrics.'}</div>
        </div>
        <div className="page-actions">
          <button className="btn btn-ghost"><Icon.Download size={15} /> PDF</button>
          <button className="btn btn-ghost"><Icon.Download size={15} /> Excel</button>
        </div>
      </div>

      <div className="grid-2" style={{ marginBottom: 'var(--gap)' }}>
        <div className="card">
          <div className="card-header">
            <h3 className="card-title">{lang === 'zh' ? '月环比增长' : 'Month-over-Month Growth'}</h3>
            <span className="badge no-dot" style={{ background: 'var(--success-bg)', color: 'var(--success)' }}>+18%</span>
          </div>
          <LineChart data={D.REVENUE['90d']} gold height={240} />
        </div>
        <div className="card">
          <div className="card-header">
            <h3 className="card-title">{lang === 'zh' ? '预订来源' : 'Booking Sources'}</h3>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {sources.map((s, i) => (
              <div key={i}>
                <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 4 }}>
                  <span style={{ fontSize: 13 }}>{lang === 'zh' ? s.name_zh : s.name_en}</span>
                  <span style={{ fontSize: 13, fontWeight: 600 }}>{s.value}%</span>
                </div>
                <div style={{ height: 8, background: 'var(--bg)', borderRadius: 999, overflow: 'hidden' }}>
                  <div style={{ width: `${s.value}%`, height: '100%', background: s.color, borderRadius: 999 }}></div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      <div className="grid-2" style={{ gridTemplateColumns: '1fr 1fr' }}>
        <div className="table-wrap">
          <div className="table-toolbar"><span className="title">{lang === 'zh' ? '热门目的地' : 'Top Destinations'}</span></div>
          <table className="table">
            <thead>
              <tr>
                <th>{lang === 'zh' ? '目的地' : 'Destination'}</th>
                <th>{lang === 'zh' ? '团数' : 'Trips'}</th>
                <th>{lang === 'zh' ? '收入' : 'Revenue'}</th>
              </tr>
            </thead>
            <tbody>
              {destinations.map((d, i) => (
                <tr key={i}>
                  <td className="strong">
                    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
                      <span style={{ width: 18, height: 18, borderRadius: 4, background: 'var(--bg-alt)', display: 'inline-grid', placeItems: 'center', fontSize: 11, fontWeight: 700, color: 'var(--gold)' }}>{i + 1}</span>
                      {d.name}
                    </span>
                  </td>
                  <td>{d.trips}</td>
                  <td className="strong" style={{ color: 'var(--gold)' }}>{d.revenue}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        <div className="table-wrap">
          <div className="table-toolbar"><span className="title">{lang === 'zh' ? '导游业绩' : 'Guide Performance'}</span></div>
          <table className="table">
            <thead>
              <tr>
                <th>{t('guide')}</th>
                <th>{lang === 'zh' ? '团数' : 'Trips'}</th>
                <th>{lang === 'zh' ? '评分' : 'Rating'}</th>
                <th>{lang === 'zh' ? '佣金' : 'Commission'}</th>
              </tr>
            </thead>
            <tbody>
              {D.GUIDES.map((g, i) => (
                <tr key={i}>
                  <td>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                      <div className="avatar avatar-sm avatar-teal">{(lang === 'zh' ? g.name_zh : g.name_en).slice(0, 1)}</div>
                      <span className="strong">{lang === 'zh' ? g.name_zh : g.name_en}</span>
                    </div>
                  </td>
                  <td>{12 - i}</td>
                  <td><span style={{ display: 'inline-flex', alignItems: 'center', gap: 3 }}><Icon.Star size={11} stroke={2} /> <strong>{g.rating}</strong></span></td>
                  <td className="strong" style={{ color: 'var(--gold)' }}>RM {((12 - i) * 180 + (i % 2 ? 200 : 350)).toLocaleString()}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

// === HR ===
function HRPage({ t, lang }) {
  const employees = [
    { name_en: 'Y. C. Chen', name_zh: '陈永康', role: 'Operations Director', dept: 'Management', join: '2018', status: 'active' },
    { name_en: 'Lim Wei Jian', name_zh: '林伟健', role: 'Senior Tour Guide', dept: 'Operations', join: '2020', status: 'active' },
    { name_en: 'Sarah Wong', name_zh: '王莎拉', role: 'Sales Manager', dept: 'Sales', join: '2019', status: 'active' },
    { name_en: 'Tan Mei Ling', name_zh: '陈美玲', role: 'Tour Guide', dept: 'Operations', join: '2021', status: 'active' },
    { name_en: 'Hassan Bin Omar', name_zh: '哈桑·奥马尔', role: 'Driver', dept: 'Fleet', join: '2017', status: 'active' },
    { name_en: 'Lee Chun Hoe', name_zh: '李俊豪', role: 'Tour Guide', dept: 'Operations', join: '2022', status: 'leave' },
    { name_en: 'Priya Krishnan', name_zh: '普里亚·克里希南', role: 'Finance Officer', dept: 'Finance', join: '2020', status: 'active' },
    { name_en: 'Ahmad Faiz', name_zh: '艾哈迈德·法伊兹', role: 'Tour Guide', dept: 'Operations', join: '2023', status: 'active' }
  ];

  const roles = [
    { role: 'Admin', perms: ['All access', 'User management', 'System config'] },
    { role: 'Manager', perms: ['All modules', 'Reports', 'No user mgmt'] },
    { role: 'Sales', perms: ['AI Sales', 'CRM', 'Bookings (R/W)'] },
    { role: 'Operations', perms: ['Fleet', 'Bookings', 'Guide'] },
    { role: 'Finance', perms: ['Accounting', 'Reports', 'Invoices'] },
    { role: 'Driver', perms: ['Own schedule', 'Trip details'] },
    { role: 'Guide', perms: ['Own roster', 'Expense claims', 'Commission'] }
  ];

  const [tab, setTab] = useStateSk('directory');

  return (
    <div>
      <div className="page-header">
        <div>
          <h1 className="page-title">{lang === 'zh' ? '员工与人事' : 'Staff & HR'}</h1>
          <div className="page-subtitle">{lang === 'zh' ? '员工目录、考勤、薪资与角色权限。' : 'Employee directory, attendance, payroll and roles.'}</div>
        </div>
        <div className="page-actions">
          <button className="btn btn-gold"><Icon.Plus size={15} /> {lang === 'zh' ? '新增员工' : 'Add Employee'}</button>
        </div>
      </div>

      <div style={{ display: 'flex', gap: 4, marginBottom: 18, borderBottom: '1px solid var(--border)' }}>
        {[
          { id: 'directory', label_en: 'Directory', label_zh: '员工目录' },
          { id: 'attendance', label_en: 'Attendance', label_zh: '考勤' },
          { id: 'payroll', label_en: 'Payroll', label_zh: '薪资' },
          { id: 'roles', label_en: 'Roles & Permissions', label_zh: '角色与权限' }
        ].map(tb => (
          <button key={tb.id} onClick={() => setTab(tb.id)}
                  style={{
                    padding: '10px 16px', fontSize: 13, fontWeight: 600,
                    color: tab === tb.id ? 'var(--navy)' : 'var(--muted)',
                    borderBottom: tab === tb.id ? '2px solid var(--gold)' : '2px solid transparent',
                    marginBottom: -1
                  }}>
            {lang === 'zh' ? tb.label_zh : tb.label_en}
          </button>
        ))}
      </div>

      {tab === 'directory' && (
        <div className="table-wrap">
          <table className="table">
            <thead>
              <tr>
                <th>{lang === 'zh' ? '员工' : 'Employee'}</th>
                <th>{lang === 'zh' ? '职位' : 'Role'}</th>
                <th>{lang === 'zh' ? '部门' : 'Department'}</th>
                <th>{lang === 'zh' ? '入职年份' : 'Joined'}</th>
                <th>{t('status')}</th>
              </tr>
            </thead>
            <tbody>
              {employees.map((e, i) => (
                <tr key={i}>
                  <td>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                      <div className="avatar avatar-sm avatar-navy">{(lang === 'zh' ? e.name_zh : e.name_en).slice(0, 1)}</div>
                      <span className="strong">{lang === 'zh' ? e.name_zh : e.name_en}</span>
                    </div>
                  </td>
                  <td>{e.role}</td>
                  <td><span className="badge no-dot" style={{ background: 'var(--bg-alt)', color: 'var(--ink-soft)', fontSize: 11 }}>{e.dept}</span></td>
                  <td>{e.join}</td>
                  <td>
                    <span className={`badge ${e.status === 'active' ? 'badge-active' : 'badge-pending'}`}>
                      {e.status === 'active' ? (lang === 'zh' ? '在职' : 'Active') : (lang === 'zh' ? '休假' : 'On Leave')}
                    </span>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}

      {tab === 'roles' && (
        <div className="table-wrap">
          <table className="table">
            <thead>
              <tr>
                <th>{lang === 'zh' ? '角色' : 'Role'}</th>
                <th>{lang === 'zh' ? '权限范围' : 'Permissions'}</th>
                <th>{lang === 'zh' ? '人数' : 'Users'}</th>
              </tr>
            </thead>
            <tbody>
              {roles.map((r, i) => (
                <tr key={i}>
                  <td>
                    <span className="badge no-dot" style={{ background: i === 0 ? 'rgba(200,146,42,.13)' : 'var(--bg-alt)', color: i === 0 ? 'var(--gold)' : 'var(--ink-soft)', fontSize: 11.5 }}>{r.role}</span>
                  </td>
                  <td>
                    <div style={{ display: 'flex', gap: 4, flexWrap: 'wrap' }}>
                      {r.perms.map((p, j) => (
                        <span key={j} className="badge no-dot" style={{ background: 'var(--bg)', color: 'var(--ink-soft)', fontSize: 10.5, border: '1px solid var(--border)' }}>{p}</span>
                      ))}
                    </div>
                  </td>
                  <td className="strong">{[2, 3, 4, 6, 2, 8, 6][i]}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}

      {(tab === 'attendance' || tab === 'payroll') && (
        <div className="coming-soon">
          <div style={{ width: 60, height: 60, borderRadius: 16, background: 'var(--bg-alt)', display: 'inline-grid', placeItems: 'center', color: 'var(--navy)', marginBottom: 8 }}>
            <Icon.Briefcase size={28} />
          </div>
          <h3>{t('coming_soon')}</h3>
          <div>{t('coming_soon_sub')}</div>
        </div>
      )}
    </div>
  );
}

// === SETTINGS ===
function SettingsPage({ t, lang }) {
  return (
    <div>
      <div className="page-header">
        <div>
          <h1 className="page-title">{lang === 'zh' ? '系统设置' : 'Settings'}</h1>
          <div className="page-subtitle">{lang === 'zh' ? '工作区偏好与集成。' : 'Workspace preferences and integrations.'}</div>
        </div>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--gap)' }}>
        {[
          { title_en: 'Workspace', title_zh: '工作区', items: [['Company Name', 'MJC Leisure Sdn Bhd'], ['Domain', 'admin.mygoldzip.com'], ['Time Zone', 'Asia/Kuala_Lumpur'], ['Currency', 'MYR (RM)']] },
          { title_en: 'WhatsApp Integration', title_zh: 'WhatsApp 集成', items: [['Business Number', '+60 3-2287 0000'], ['Webhook', 'Active'], ['Templates Approved', '14']] },
          { title_en: 'AI Bot Config', title_zh: 'AI 机器人配置', items: [['Model', 'GPT-4 Turbo'], ['Languages', 'EN / ZH / MY'], ['Auto-Quote Threshold', 'RM 5,000 - 50,000']] },
          { title_en: 'Notifications', title_zh: '通知', items: [['Email Alerts', 'Enabled'], ['Slack Channel', '#ops-alerts'], ['SMS Critical', 'Enabled']] }
        ].map((sect, i) => (
          <div key={i} className="card">
            <h3 className="card-title">{lang === 'zh' ? sect.title_zh : sect.title_en}</h3>
            <div style={{ marginTop: 14, display: 'flex', flexDirection: 'column', gap: 10 }}>
              {sect.items.map((it, j) => (
                <div key={j} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '8px 0', borderBottom: j < sect.items.length - 1 ? '1px solid var(--border)' : 'none' }}>
                  <span className="muted" style={{ fontSize: 12.5 }}>{it[0]}</span>
                  <span className="strong" style={{ fontSize: 12.5 }}>{it[1]}</span>
                </div>
              ))}
            </div>
            <button className="btn btn-ghost btn-sm" style={{ marginTop: 14 }}><Icon.Edit size={12} /> {lang === 'zh' ? '编辑' : 'Edit'}</button>
          </div>
        ))}
      </div>
    </div>
  );
}

window.TourGuidePage = TourGuidePage;
window.AccountingPage = AccountingPage;
window.CRMPage = CRMPage;
window.SuppliersPage = SuppliersPage;
window.ReportsPage = ReportsPage;
window.HRPage = HRPage;
window.SettingsPage = SettingsPage;