/* MaiAgent Partner Portal — Deal Registration page (list + form + detail) */

const DEAL_TABS = [
  { id: 'all',      key: 'deals.tab.all',      filter: () => true },
  { id: 'pending',  key: 'deals.tab.pending',  filter: (d) => d.status === 'pending' },
  { id: 'approved', key: 'deals.tab.approved', filter: (d) => d.status === 'approved' },
  { id: 'expiring', key: 'deals.tab.expiring', filter: (d) => {
    if (d.status !== 'approved') return false;
    const { status } = dealProtectionStatus(d);
    return status === 'expiring' || status === 'expired';
  }},
  { id: 'rejected', key: 'deals.tab.rejected', filter: (d) => d.status === 'rejected' },
  { id: 'draft',    key: 'deals.tab.draft',    filter: (d) => d.status === 'draft' },
];

// ── Protection period progress bar ────────────────────────────
const ProtectionBar = ({ deal, lang, t, extendSet, onExtend }) => {
  const { status, daysLeft, pct } = dealProtectionStatus(deal);
  if (['won','rejected'].includes(status)) return <span style={{ color: 'var(--mai-fg-3)', fontSize: 12 }}>{status === 'won' ? (lang === 'zh' ? '已成交' : 'Won') : '—'}</span>;
  if (['pending','draft','no_expiry'].includes(status)) return <span style={{ color: 'var(--mai-fg-3)', fontSize: 12 }}>—</span>;

  const isExpiring = status === 'expired' || status === 'expiring';
  const barColor  = status === 'expired' ? '#EF4444' : status === 'expiring' ? '#F59E0B' : '#26C281';
  const textColor = status === 'expired' ? '#DC2626' : status === 'expiring' ? '#D97706' : 'var(--mai-fg-2)';
  const extended  = extendSet && extendSet.has(deal.id);

  return (
    <div style={{ minWidth: 140 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 4 }}>
        <span style={{ fontSize: 11.5, fontWeight: 700, color: textColor }}>
          {status === 'expired' ? (lang === 'zh' ? '已到期' : 'Expired') : `${daysLeft} ${lang === 'zh' ? '天' : 'days'}`}
        </span>
        <span style={{ fontSize: 10.5, color: 'var(--mai-fg-3)' }}>{deal.expires}</span>
      </div>
      <div style={{ height: 5, background: 'var(--mai-border)', borderRadius: 99, overflow: 'hidden', marginBottom: 6 }}>
        <div style={{ height: '100%', width: `${pct}%`, background: barColor, borderRadius: 99 }} />
      </div>
      {isExpiring && onExtend && (
        extended
          ? <span style={{ fontSize: 11, color: '#6366F1', fontWeight: 600 }}>{lang === 'zh' ? '延長審核中…' : 'Extension pending…'}</span>
          : <button onClick={(e) => { e.stopPropagation(); onExtend(deal.id); }} style={{ fontSize: 11, color: '#1F4FFF', fontWeight: 600, background: '#F0F4FF', border: '1px solid #C7D7FD', borderRadius: 6, padding: '2px 8px', cursor: 'pointer' }}>
              {lang === 'zh' ? '申請延長' : 'Request Extension'}
            </button>
      )}
    </div>
  );
};

const DealsPage = ({ t, lang, onOpenDeal, onOpenForm }) => {
  const [tab, setTab] = React.useState('all');
  const [query, setQuery] = React.useState('');
  const [extendSet, setExtendSet] = React.useState(new Set());
  const handleExtend = (id) => setExtendSet(prev => new Set([...prev, id]));
  const filterFn = DEAL_TABS.find((x) => x.id === tab).filter;
  const counts = React.useMemo(() => {
    const c = {};
    DEAL_TABS.forEach((x) => c[x.id] = DEALS.filter(x.filter).length);
    return c;
  }, []);
  const rows = DEALS.filter(filterFn).filter((d) => {
    if (!query) return true;
    const q = query.toLowerCase();
    return d.company[lang].toLowerCase().includes(q) || d.id.toLowerCase().includes(q) || d.product.toLowerCase().includes(q);
  });

  return (
    <div className="page">
      <div className="page-header">
        <div className="page-header__title">
          <div className="page-header__eyebrow">{lang === 'zh' ? '銷售保護' : 'Sales protection'}</div>
          <h1>{t('deals.title')}</h1>
          <div className="page-header__sub">{t('deals.sub')}</div>
        </div>
        <div className="page-header__actions">
          <Btn variant="ghost" icon="download">{t('common.export')}</Btn>
          <Btn variant="primary" icon="plus" onClick={onOpenForm}>{t('deals.new')}</Btn>
        </div>
      </div>

      {/* Helper banner */}
      <Card style={{ marginBottom: 20, padding: 18, display: 'flex', gap: 16, alignItems: 'center', background: 'linear-gradient(90deg, rgba(38,194,129,0.08), rgba(31,79,255,0.06))', border: '1px solid rgba(38,194,129,0.20)' }}>
        <div style={{ width: 44, height: 44, borderRadius: 12, background: 'white', display: 'grid', placeItems: 'center', color: 'var(--mai-green-deep)', flexShrink: 0, border: '1px solid rgba(38,194,129,0.25)' }}>
          <Icon name="shield-check" size={22} />
        </div>
        <div style={{ flex: 1 }}>
          <div style={{ fontWeight: 700, fontSize: 14, color: 'var(--mai-fg)' }}>
            {lang === 'zh' ? '案件報備如何運作' : 'How deal registration works'}
          </div>
          <div style={{ fontSize: 12.5, color: 'var(--mai-fg-2)', marginTop: 2, lineHeight: 1.5 }}>
            {lang === 'zh'
              ? '送出後 1 個工作天內 MaiAgent 會審核並回覆。通過後即享 90 天保護期,期間 MaiAgent 業務不會直接接洽該客戶。'
              : 'MaiAgent reviews within 1 business day. Approved deals get a 90-day protection window — direct sales will not contact the customer during this time.'}
          </div>
        </div>
        <Btn variant="ghost" size="sm" iconRight="external">{lang === 'zh' ? '完整規則' : 'Full rules'}</Btn>
      </Card>

      <div className="table-wrap">
        <div className="table-toolbar">
          <div className="table-toolbar__filters">
            {DEAL_TABS.map((x) => (
              <button key={x.id} className={`filter-chip ${tab === x.id ? 'is-active' : ''}`} onClick={() => setTab(x.id)}>
                {t(x.key)}
                <span className="filter-chip__count">{counts[x.id]}</span>
              </button>
            ))}
          </div>
          <div className="table-search">
            <Icon name="search" />
            <input value={query} onChange={(e) => setQuery(e.target.value)} placeholder={t('common.search')} />
          </div>
        </div>
        <table className="data">
          <thead>
            <tr>
              <th>{t('deals.col.id')}</th>
              <th>{t('deals.col.customer')}</th>
              <th>{t('deals.col.product')}</th>
              <th style={{ textAlign: 'right' }}>{t('deals.col.amount')}</th>
              <th>{t('deals.col.stage')}</th>
              <th>{t('common.status')}</th>
              <th>{t('deals.col.protection')}</th>
              <th>{t('deals.col.maiagent')}</th>
            </tr>
          </thead>
          <tbody>
            {rows.map((d) => (
              <tr key={d.id} onClick={() => onOpenDeal(d)}>
                <td style={{ fontFamily: 'ui-monospace, monospace', fontSize: 12, color: 'var(--mai-fg-2)' }}>{d.id}</td>
                <td>
                  <div className="row-customer">
                    <span className="row-customer__name">{d.company[lang]}</span>
                    <span className="row-customer__meta">{d.industry[lang]}</span>
                  </div>
                </td>
                <td style={{ color: 'var(--mai-fg-2)', fontSize: 12.5 }}>{d.product}</td>
                <td style={{ textAlign: 'right' }}>
                  <div className="row-amount">{fmtMoney(d.amount)}</div>
                </td>
                <td>{stageBadge(d.stage, t)}</td>
                <td>{dealStatusBadge(d.status, t)}</td>
                <td><ProtectionBar deal={d} lang={lang} t={t} extendSet={extendSet} onExtend={handleExtend} /></td>
                <td>
                  {d.maiagentPm[lang] === '—' ? (
                    <span style={{ color: 'var(--mai-fg-3)' }}>—</span>
                  ) : (
                    <div className="row-owner">
                      <Avatar name={d.maiagentPm[lang]} size="sm" />
                      <span style={{ fontSize: 12.5, color: 'var(--mai-fg-2)' }}>{d.maiagentPm[lang]}</span>
                    </div>
                  )}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
        {rows.length === 0 && (
          <div className="empty">
            <Icon name="inbox" />
            <div>{lang === 'zh' ? '沒有符合條件的案件' : 'No matching deals'}</div>
          </div>
        )}
      </div>
    </div>
  );
};

// ===== Drawer: New deal form =====
const ORG_STEPS_ZH = [
  '前往 admin.maiagent.ai，點擊「註冊」，協助客戶填寫姓名、Email、密碼',
  '使用剛建立的帳號密碼登入',
  '點擊「企業方案免費試用 14 天」，填入客戶公司 / 組織資訊（名稱、產業、規模）',
  '點選左側選單「組織概覽」，頁面上即可看到專屬的「組織 ID」',
  '複製組織 ID，回到此表單貼入下方欄位',
];
const ORG_STEPS_EN = [
  'Go to admin.maiagent.ai, click "Register" and fill in the customer\'s name, email, and password',
  'Log in with the account just created',
  'Click "Start 14-day Enterprise Trial" and fill in the customer\'s company / org info (name, industry, size)',
  'Click "Organization Overview" in the left menu — the Organization ID is displayed on that page',
  'Copy the Org ID and paste it into the field below',
];

const DealForm = ({ t, lang, onClose }) => {
  const [form, setForm] = React.useState({
    company: '', taxid: '', industry: 'financial', size: 'enterprise',
    product: 'enterprise', amount: '', closeDate: '2026-09-30', stage: 'qualified',
    scenario: '', contactName: '', contactTitle: '', contactEmail: '', contactPhone: '',
    customerOrgId: '', consent: false,
  });
  const [showOrgGuide, setShowOrgGuide] = React.useState(false);
  const set = (k) => (e) => setForm({ ...form, [k]: e.target ? e.target.value : e });

  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="drawer" onClick={(e) => e.stopPropagation()}>
        <div className="drawer__header">
          <div>
            <div className="drawer__title">{t('deals.form.title')}</div>
            <div className="drawer__sub">{t('deals.form.sub')}</div>
            <div style={{ marginTop: 14 }}>
              <Stepper
                current={0}
                steps={[
                  t('deals.form.section.customer'),
                  t('deals.form.section.opp'),
                  t('deals.form.section.contact'),
                  t('deals.form.section.attach'),
                ]}
              />
            </div>
          </div>
          <IconBtn name="x" onClick={onClose} />
        </div>

        <div className="drawer__body">
          <SectionHeading icon="building" label={t('deals.form.section.customer')} />
          <div className="form-grid">
            <Field label={t('deals.form.company')} required hint={t('deals.form.company.hint')} full>
              <input className="input" placeholder={lang === 'zh' ? '例:富邦人壽保險股份有限公司' : 'e.g. Fubon Life Insurance Co., Ltd.'} value={form.company} onChange={set('company')} />
            </Field>
            <Field label={t('deals.form.taxid')}>
              <input className="input" placeholder="12345678" value={form.taxid} onChange={set('taxid')} />
            </Field>
            <Field label={t('deals.form.industry')} required>
              <select className="select" value={form.industry} onChange={set('industry')}>
                <option value="financial">{lang === 'zh' ? '金融服務' : 'Financial Services'}</option>
                <option value="healthcare">{lang === 'zh' ? '醫療' : 'Healthcare'}</option>
                <option value="retail">{lang === 'zh' ? '零售' : 'Retail'}</option>
                <option value="manufacturing">{lang === 'zh' ? '製造業' : 'Manufacturing'}</option>
                <option value="public">{lang === 'zh' ? '公部門' : 'Public Sector'}</option>
                <option value="telecom">{lang === 'zh' ? '電信' : 'Telecom'}</option>
                <option value="other">{lang === 'zh' ? '其他' : 'Other'}</option>
              </select>
            </Field>
            <Field label={t('deals.form.size')} full>
              <RadioPills value={form.size} onChange={(v) => set('size')(v)} options={[
                { value: 'sme', label: lang === 'zh' ? '< 100 員工' : '< 100' },
                { value: 'mid', label: lang === 'zh' ? '100 – 1,000' : '100 – 1,000' },
                { value: 'enterprise', label: lang === 'zh' ? '1,000 – 10,000' : '1,000 – 10,000' },
                { value: 'large', label: lang === 'zh' ? '10,000+' : '10,000+' },
              ]} />
            </Field>
          </div>

          {/* ── Customer Org ID ──────────────────────────────── */}
          <SectionHeading icon="key" label={lang === 'zh' ? '客戶 Organization ID' : 'Customer Organization ID'} mt />
          <div style={{ background: '#F8F9FF', border: '1px solid #E2E7F8', borderRadius: 12, padding: '16px 18px', marginBottom: 4 }}>
            <div style={{ display: 'flex', gap: 8, alignItems: 'flex-start', marginBottom: 14 }}>
              <Icon name="info" size={13} style={{ color: 'var(--mai-blue)', flexShrink: 0, marginTop: 2 }} />
              <div style={{ fontSize: 12.5, color: 'var(--mai-fg-3)', lineHeight: 1.6 }}>
                {lang === 'zh'
                  ? '客戶確認購買、準備下訂時才需填入。若尚未取得，可點下方展開步驟，協助客戶建立 MaiAgent Organization 後取回。'
                  : 'Fill in when the customer confirms purchase and is ready to order. Click below for a step-by-step guide to help them set up their MaiAgent Organization.'}
              </div>
            </div>

            {form.customerOrgId ? (
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '10px 14px', background: 'rgba(38,194,129,0.1)', border: '1px solid rgba(38,194,129,0.25)', borderRadius: 8 }}>
                <Icon name="check-circle" size={16} style={{ color: 'var(--mai-green-deep)', flexShrink: 0 }} />
                <span style={{ fontSize: 13, fontWeight: 700, color: 'var(--mai-green-deep)' }}>
                  {lang === 'zh' ? '✅ 客戶 Organization ID 已填入' : '✅ Customer Org ID entered'}
                </span>
                <code style={{ fontFamily: 'ui-monospace, monospace', fontSize: 12, color: 'var(--mai-fg-2)', marginLeft: 'auto' }}>{form.customerOrgId}</code>
                <button onClick={() => setForm({ ...form, customerOrgId: '' })} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--mai-fg-3)', fontSize: 13, lineHeight: 1 }}>✕</button>
              </div>
            ) : (
              <input
                className="input"
                style={{ width: '100%', fontFamily: 'ui-monospace, monospace', fontSize: 12.5 }}
                placeholder={lang === 'zh' ? '貼上客戶的 Organization ID，例：org-1234-abcde' : 'Paste the customer\'s Org ID, e.g. org-1234-abcde'}
                value={form.customerOrgId}
                onChange={set('customerOrgId')}
              />
            )}

            <button
              onClick={() => setShowOrgGuide(v => !v)}
              style={{ marginTop: 12, background: 'none', border: 'none', cursor: 'pointer', color: 'var(--mai-blue)', fontSize: 12.5, fontWeight: 600, display: 'flex', alignItems: 'center', gap: 6, padding: 0 }}
            >
              <Icon name={showOrgGuide ? 'chevron-up' : 'chevron-down'} size={14} />
              {lang === 'zh' ? '如何協助客戶取得 Organization ID？' : 'How to help the customer get their Org ID?'}
            </button>

            {showOrgGuide && (
              <div style={{ marginTop: 14, paddingTop: 14, borderTop: '1px solid #E2E7F8', display: 'flex', flexDirection: 'column', gap: 12 }}>
                {(lang === 'zh' ? ORG_STEPS_ZH : ORG_STEPS_EN).map((step, i) => (
                  <div key={i} style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
                    <div style={{ width: 24, height: 24, borderRadius: 999, background: '#E6EAFF', color: 'var(--mai-blue)', fontSize: 11, fontWeight: 800, display: 'grid', placeItems: 'center', flexShrink: 0, border: '1.5px solid #C7D2F5' }}>{i + 1}</div>
                    <div style={{ fontSize: 12.5, color: 'var(--mai-fg-2)', lineHeight: 1.6, paddingTop: 3 }}>{step}</div>
                  </div>
                ))}
              </div>
            )}
          </div>

          <SectionHeading icon="briefcase" label={t('deals.form.section.opp')} mt />
          <div className="form-grid">
            <Field label={t('deals.form.product')} required full>
              <RadioPills value={form.product} onChange={(v) => set('product')(v)} options={[
                { value: 'enterprise', label: 'MaiAgent Enterprise' },
                { value: 'rag', label: 'RAG Studio' },
                { value: 'knowledge', label: 'Knowledge' },
                { value: 'voice', label: 'Voice Bot' },
                { value: 'contact', label: 'Contact Center' },
                { value: 'gov', label: 'Gov Cloud' },
              ]} />
            </Field>
            <Field label={t('deals.form.amount')} required hint={t('deals.form.amount.hint')}>
              <input className="input" placeholder="3,000,000" value={form.amount} onChange={set('amount')} />
            </Field>
            <Field label={t('deals.form.close_date')} required>
              <input className="input" type="date" value={form.closeDate} onChange={set('closeDate')} />
            </Field>
            <Field label={t('deals.form.stage')} required full>
              <RadioPills value={form.stage} onChange={(v) => set('stage')(v)} options={STAGES.slice(0, 5).map((s) => ({ value: s, label: t('deals.stage.' + s) }))} />
            </Field>
            <Field label={t('deals.form.scenario')} required hint={t('deals.form.scenario.hint')} full>
              <textarea className="textarea" placeholder={lang === 'zh' ? '例:客戶想以 RAG 取代現有的關鍵字客服 FAQ,目標縮短回應時間 40%,並整合 Salesforce 與內部知識庫。' : 'e.g. Customer wants to replace keyword-based FAQ with RAG, target 40% response-time reduction, integrate with Salesforce + internal KB.'} value={form.scenario} onChange={set('scenario')} />
            </Field>
          </div>

          <SectionHeading icon="users" label={t('deals.form.section.contact')} mt />
          <div className="form-grid">
            <Field label={t('deals.form.contact_name')} required>
              <input className="input" placeholder={lang === 'zh' ? '陳秀美' : 'Sumi Chen'} value={form.contactName} onChange={set('contactName')} />
            </Field>
            <Field label={t('deals.form.contact_title')}>
              <input className="input" placeholder={lang === 'zh' ? '創新長' : 'Chief Innovation Officer'} value={form.contactTitle} onChange={set('contactTitle')} />
            </Field>
            <Field label={t('deals.form.contact_email')} required>
              <input className="input" placeholder="sumi.chen@example.com" value={form.contactEmail} onChange={set('contactEmail')} />
            </Field>
            <Field label={t('deals.form.contact_phone')}>
              <input className="input" placeholder="+886 2 1234 5678" value={form.contactPhone} onChange={set('contactPhone')} />
            </Field>
          </div>

          <SectionHeading icon="paperclip" label={t('deals.form.section.attach')} mt />
          <div style={{ border: '1.5px dashed #C7D0EA', borderRadius: 14, padding: 24, textAlign: 'center', background: '#FAFBFE' }}>
            <Icon name="upload" size={22} />
            <div style={{ marginTop: 8, fontWeight: 600, fontSize: 13.5, color: 'var(--mai-fg)' }}>
              {lang === 'zh' ? '拖曳檔案到此處,或' : 'Drag files here, or'} <a style={{ color: 'var(--mai-blue)', cursor: 'pointer', textDecoration: 'underline' }}>{lang === 'zh' ? '點擊選擇' : 'browse'}</a>
            </div>
            <div style={{ marginTop: 4, fontSize: 12, color: 'var(--mai-fg-3)' }}>{t('deals.form.attach.hint')}</div>
          </div>

          <label style={{ marginTop: 18, display: 'flex', alignItems: 'flex-start', gap: 10, cursor: 'pointer', padding: 12, background: '#F4F6FF', borderRadius: 10, border: '1px solid #E2E7F8' }}>
            <input type="checkbox" checked={form.consent} onChange={(e) => set('consent')(e.target.checked)} style={{ marginTop: 2 }} />
            <span style={{ fontSize: 12.5, color: 'var(--mai-fg-2)', lineHeight: 1.5 }}>{t('deals.form.consent')}</span>
          </label>
        </div>

        <div className="drawer__footer">
          <div style={{ flex: 1, display: 'flex', alignItems: 'center', gap: 6, fontSize: 12, color: 'var(--mai-fg-3)' }}>
            <Icon name="clock" size={14} />
            <span>{lang === 'zh' ? '預計審核時間 1 個工作天' : 'Review takes 1 business day'}</span>
          </div>
          <Btn variant="ghost" onClick={onClose}>{t('common.cancel')}</Btn>
          <Btn variant="subtle">{t('common.draft')}</Btn>
          <Btn variant="primary" icon="shield-check" onClick={onClose}>{t('common.submit')}</Btn>
        </div>
      </div>
    </div>
  );
};

const SectionHeading = ({ icon, label, mt }) => (
  <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: mt ? 28 : 0, marginBottom: 14, paddingBottom: 8, borderBottom: '1px solid #EEF0F8' }}>
    <Icon name={icon} size={16} />
    <div style={{ fontWeight: 700, fontSize: 13, color: 'var(--mai-fg)', letterSpacing: '-0.005em' }}>{label}</div>
  </div>
);

// ===== Drawer: Deal detail =====
const DealDetail = ({ deal, t, lang, onClose }) => {
  const stageIdx = STAGES.indexOf(deal.stage) === -1 ? 0 : STAGES.indexOf(deal.stage);
  const activity = dealActivity(deal.id);

  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="drawer" onClick={(e) => e.stopPropagation()}>
        <div className="drawer__header">
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
              {dealStatusBadge(deal.status, t)}
              <span style={{ fontFamily: 'ui-monospace, monospace', fontSize: 12, color: 'var(--mai-fg-3)' }}>{deal.id}</span>
            </div>
            <div className="drawer__title">{deal.company[lang]}</div>
            <div className="drawer__sub">{deal.industry[lang]} · {deal.product}</div>
          </div>
          <IconBtn name="x" onClick={onClose} />
        </div>

        <div className="drawer__body">
          {/* Sales stage stepper */}
          <div style={{ marginBottom: 18 }}>
            <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--mai-fg-3)', marginBottom: 10 }}>{t('deals.col.stage')}</div>
            <Stepper
              current={stageIdx}
              steps={STAGES.slice(0, 6).map((s) => t('deals.stage.' + s))}
            />
          </div>

          {/* Key facts */}
          <Card style={{ padding: 18, marginBottom: 18 }}>
            <div className="detail-grid">
              <div className="detail-grid__field">
                <div className="detail-grid__label">{t('deals.col.amount')}</div>
                <div className="detail-grid__value" style={{ fontSize: 18, fontWeight: 700 }}>{fmtMoney(deal.amount)}</div>
              </div>
              <div className="detail-grid__field">
                <div className="detail-grid__label">{lang === 'zh' ? '預期分潤 (15%)' : 'Expected commission (15%)'}</div>
                <div className="detail-grid__value" style={{ fontSize: 18, fontWeight: 700, color: 'var(--mai-green-deep)' }}>{fmtMoney(deal.amount * 0.15)}</div>
              </div>
              <div className="detail-grid__field">
                <div className="detail-grid__label">{t('deals.detail.protected_until')}</div>
                <div className="detail-grid__value">{deal.expires}</div>
              </div>
              <div className="detail-grid__field">
                <div className="detail-grid__label">{t('common.created')}</div>
                <div className="detail-grid__value">{deal.created}</div>
              </div>
              <div className="detail-grid__field">
                <div className="detail-grid__label">{t('deals.col.owner')}</div>
                <div className="detail-grid__value" style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                  <Avatar name={deal.owner[lang]} size="sm" /> <span>{deal.owner[lang]}</span>
                </div>
              </div>
              <div className="detail-grid__field">
                <div className="detail-grid__label">{t('deals.col.maiagent')}</div>
                <div className="detail-grid__value" style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                  {deal.maiagentPm[lang] !== '—' && <Avatar name={deal.maiagentPm[lang]} size="sm" />}
                  <span>{deal.maiagentPm[lang]}</span>
                </div>
              </div>
            </div>
          </Card>

          {/* Next step + actions */}
          <Card style={{ padding: 18, marginBottom: 18, background: 'linear-gradient(90deg, rgba(38,194,129,0.06), rgba(31,79,255,0.04))', border: '1px solid rgba(38,194,129,0.18)' }}>
            <div className="detail-grid__label" style={{ marginBottom: 6 }}>{t('deals.detail.next_action')}</div>
            <div style={{ fontWeight: 600, fontSize: 14, color: 'var(--mai-fg)', marginBottom: 12 }}>{deal.nextStep[lang]}</div>
            <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
              <Btn variant="primary" size="sm" icon="video">{t('deals.detail.book_demo')}</Btn>
              <Btn variant="ghost" size="sm" icon="upload">{t('deals.detail.upload_more')}</Btn>
              <Btn variant="ghost" size="sm" icon="message-circle">{t('common.contact')}</Btn>
            </div>
          </Card>

          {/* Activity */}
          <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--mai-fg-3)', marginBottom: 14 }}>{t('common.activity')}</div>
          <div className="timeline">
            {activity.map((a, i) => (
              <div key={i} className="timeline__item">
                <div className={`timeline__dot timeline__dot--${a.tone}`}><Icon name={a.icon} size={12}/></div>
                <div className="timeline__title">{lang === 'zh' ? a.titleZh : a.titleEn}</div>
                <div className="timeline__meta">{lang === 'zh' ? a.timeZh : a.timeEn}</div>
                {(lang === 'zh' ? a.bodyZh : a.bodyEn) && (
                  <div className="timeline__body">{lang === 'zh' ? a.bodyZh : a.bodyEn}</div>
                )}
              </div>
            ))}
          </div>

          {/* Comment box */}
          <div style={{ marginTop: 18, display: 'flex', gap: 10, alignItems: 'flex-start' }}>
            <Avatar name={PARTNER.name[lang]} size="sm" />
            <div style={{ flex: 1 }}>
              <textarea className="textarea" placeholder={t('common.add_comment')} style={{ minHeight: 70 }} />
              <div style={{ marginTop: 6, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <Btn variant="ghost" size="sm" icon="paperclip">{t('common.attach_file')}</Btn>
                <Btn variant="primary" size="sm" iconRight="arrow-right">{t('common.send')}</Btn>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { DealsPage, DealForm, DealDetail });