/* MaiAgent Partner Portal — Dashboard page */

const Dashboard = ({ t, lang, onNav, onOpenDeal, onOpenForm }) => {
  const status = PARTNER_STATUS.status;

  const trainingModuleKeys = ['A1','A2','A3','A4','A5','A6','B1','B2'];
  const doneModules = trainingModuleKeys.filter(k => PARTNER_STATUS.training[k]).length;
  const totalModules = trainingModuleKeys.length;
  const progressPct = Math.round((doneModules / totalModules) * 100);

  return (
    <div className="page">
      {/* ── DYNAMIC HERO ─────────────────────────────────────────── */}
      {status === 'pending_review' && (
        <div style={{ background: 'linear-gradient(135deg,#FFFBF0,#FFF8E8)', border: '1.5px solid #FDE68A', borderRadius: 16, padding: '24px 28px', marginBottom: 24, display: 'flex', alignItems: 'center', gap: 18 }}>
          <div style={{ width: 46, height: 46, borderRadius: 12, background: '#FEF3C7', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
            <Icon name="clock" size={22} style={{ color: '#D97706' }} />
          </div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: '#D97706', marginBottom: 4 }}>{t('dash.pending.eyebrow')}</div>
            <div style={{ fontSize: 16, fontWeight: 700, color: '#92400E', marginBottom: 3 }}>{t('dash.pending.title')}</div>
            <div style={{ fontSize: 13, color: '#B45309' }}>{t('dash.pending.sub')}</div>
          </div>
          <Btn variant="ghost" size="sm" icon="map" onClick={() => onNav('onboarding')}>{t('nav.onboarding')}</Btn>
        </div>
      )}

      {status === 'registered' && (
        <div style={{ background: 'linear-gradient(135deg,#0F1733 0%,#1B2B5F 100%)', borderRadius: 16, padding: '28px 32px', marginBottom: 24, position: 'relative', overflow: 'hidden', color: 'white' }}>
          <div style={{ position: 'absolute', top: -50, right: -50, width: 220, height: 220, borderRadius: '50%', background: 'rgba(38,194,129,0.07)', pointerEvents: 'none' }} />
          <div style={{ position: 'absolute', bottom: -60, right: 120, width: 160, height: 160, borderRadius: '50%', background: 'rgba(31,79,255,0.1)', pointerEvents: 'none' }} />
          <div style={{ position: 'relative', zIndex: 1 }}>
            <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: '#26C281', marginBottom: 8 }}>{t('dash.incentive.eyebrow')}</div>
            <div style={{ fontSize: 20, fontWeight: 800, marginBottom: 6, letterSpacing: '-0.01em', lineHeight: 1.3 }}>{t('dash.incentive.title')}</div>
            <div style={{ fontSize: 13.5, color: 'rgba(255,255,255,0.65)', marginBottom: 20 }}>{t('dash.incentive.sub')}</div>
            <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', marginBottom: 22 }}>
              {['b1','b2','b3'].map(k => (
                <div key={k} style={{ display: 'flex', alignItems: 'center', gap: 6, background: 'rgba(255,255,255,0.09)', border: '1px solid rgba(255,255,255,0.14)', borderRadius: 999, padding: '6px 14px', fontSize: 12.5, fontWeight: 600 }}>
                  <Icon name="check-circle" size={13} style={{ color: '#26C281' }} />
                  {t(`dash.incentive.${k}`)}
                </div>
              ))}
            </div>
            <div style={{ maxWidth: 380, marginBottom: 18 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 6 }}>
                <span style={{ fontSize: 12.5, fontWeight: 600, color: 'rgba(255,255,255,0.75)' }}>{t('dash.incentive.progress')}</span>
                <span style={{ fontSize: 12.5, fontWeight: 700, color: '#26C281' }}>{doneModules} / {totalModules} {lang === 'zh' ? '模組' : 'modules'}</span>
              </div>
              <div style={{ height: 6, background: 'rgba(255,255,255,0.12)', borderRadius: 99, overflow: 'hidden' }}>
                <div style={{ height: '100%', width: `${progressPct}%`, background: 'linear-gradient(90deg,#26C281,#1F4FFF)', borderRadius: 99 }} />
              </div>
            </div>
            <Btn variant="primary" icon="book-open" onClick={() => onNav('training')}>{t('dash.incentive.cta')}</Btn>
          </div>
        </div>
      )}

      {status === 'certified' && (
        <div className="hero-card">
          <div className="hero-card__bg" />
          <div className="hero-card__halftone" />
          <div className="hero-card__content">
            <div className="hero-card__eyebrow">{lang === 'zh' ? '本月重點' : 'This month'}</div>
            <h2>{t('common.welcome')}{PARTNER.name[lang]} — {t('dash.hero.title')}</h2>
            <p>{t('dash.hero.sub')}</p>
          </div>
          <div className="hero-card__cta">
            <Btn variant="primary" icon="plus" onClick={onOpenForm}>{t('dash.hero.cta2')}</Btn>
            <Btn variant="ghost" iconRight="arrow-right" onClick={() => onNav('materials')}>{t('dash.hero.cta')}</Btn>
          </div>
        </div>
      )}

      {/* Deal expiry reminder banner */}
      {(() => {
        const expiring = DEALS.filter(d => {
          if (d.status !== 'approved') return false;
          const { status, daysLeft } = dealProtectionStatus(d);
          return (status === 'expiring' || status === 'expired') && daysLeft !== null;
        });
        if (expiring.length === 0) return null;
        return (
          <div style={{ display: 'flex', alignItems: 'flex-start', gap: 14, padding: '14px 18px', background: '#FFFBF0', border: '1.5px solid #FDE68A', borderRadius: 12, marginBottom: 20 }}>
            <div style={{ width: 38, height: 38, borderRadius: 10, background: '#FEF3C7', display: 'grid', placeItems: 'center', flexShrink: 0 }}>
              <Icon name="clock" size={18} style={{ color: '#D97706' }} />
            </div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontWeight: 700, fontSize: 13.5, color: '#92400E', marginBottom: 4 }}>
                {t('deals.expire_banner.title')}
              </div>
              <div style={{ fontSize: 12.5, color: '#B45309', marginBottom: 8 }}>
                {t('deals.expire_banner.sub')}
              </div>
              <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
                {expiring.map(d => {
                  const { daysLeft, status } = dealProtectionStatus(d);
                  return (
                    <span key={d.id} style={{ display: 'inline-flex', alignItems: 'center', gap: 6, background: 'white', border: '1px solid #FDE68A', borderRadius: 8, padding: '4px 10px', fontSize: 12, fontWeight: 600, color: '#92400E' }}>
                      <span style={{ color: 'var(--mai-fg-2)' }}>{d.company[lang]}</span>
                      <span style={{ color: status === 'expired' ? '#DC2626' : '#D97706' }}>
                        {status === 'expired' ? (lang === 'zh' ? '已到期' : 'Expired') : `${daysLeft}${lang === 'zh' ? '天' : 'd'}`}
                      </span>
                    </span>
                  );
                })}
              </div>
            </div>
            <button onClick={() => onNav('deals')} style={{ fontSize: 12, fontWeight: 600, color: '#D97706', background: 'none', border: 'none', cursor: 'pointer', whiteSpace: 'nowrap', paddingTop: 2 }}>
              {t('deals.expire_banner.cta')} →
            </button>
          </div>
        );
      })()}

      {/* KPIs */}
      <div className="kpi-grid">
        <div className="kpi">
          <div className="kpi__label"><Icon name="briefcase" size={14}/>{t('dash.kpi.pipeline')}</div>
          <div className="kpi__value">{KPI.active_deals.value}<span className="kpi__unit">{lang === 'zh' ? '件' : ''}</span></div>
          <div className="kpi__delta"><Icon name="arrow-up" size={12}/>{KPI.active_deals.delta} <span style={{ color: 'var(--mai-fg-3)', fontWeight: 500 }}>{KPI.active_deals.deltaPct} {t('dash.kpi.from_last')}</span></div>
        </div>
        <div className="kpi">
          <div className="kpi__label"><Icon name="trending-up" size={14}/>{t('dash.kpi.pipeline_value')}</div>
          <div className="kpi__value">{KPI.pipeline_value.value}</div>
          <div className="kpi__delta"><Icon name="arrow-up" size={12}/>{KPI.pipeline_value.delta} <span style={{ color: 'var(--mai-fg-3)', fontWeight: 500 }}>{t('dash.kpi.from_last')}</span></div>
        </div>
        <div className="kpi">
          <div className="kpi__label"><Icon name="shield" size={14}/>{t('dash.kpi.licenses')}</div>
          <div className="kpi__value">{KPI.active_licenses.value}</div>
          <div className="kpi__sub" style={{ color: '#D97706' }}>{KPI.active_licenses.sub}</div>
        </div>
        <div className="kpi kpi--accent">
          <div className="kpi__deco" />
          <div className="kpi__label"><Icon name="star" size={14}/>{t('dash.kpi.won')}</div>
          <div className="kpi__value">{KPI.closed_won.value}<span className="kpi__unit" style={{ color: 'var(--mai-fg-on-dark-2)' }}>{lang === 'zh' ? ' 件' : ''}</span></div>
          <div className="kpi__sub">{t('dash.kpi.won_sub')} <span style={{ color: 'var(--mai-green-bright)', fontWeight: 700 }}>{KPI.closed_won.sub}</span></div>
        </div>
      </div>

      <div className="dash-grid">
        {/* LEFT: deals + materials */}
        <div className="section-stack">
          {/* Recent deals */}
          <Card
            title={t('dash.recent_deals')}
            sub={lang === 'zh' ? '點擊任一筆即可看完整歷程' : 'Click a row to view full timeline'}
            action={<Btn variant="ghost" size="sm" iconRight="arrow-right" onClick={() => onNav('deals')}>{t('common.view_all')}</Btn>}
            style={{ padding: 0 }}
          >
            <table className="data">
              <thead>
                <tr>
                  <th>{t('deals.col.customer')}</th>
                  <th>{t('deals.col.stage')}</th>
                  <th style={{ textAlign: 'right' }}>{t('deals.col.amount')}</th>
                  <th>{t('common.status')}</th>
                </tr>
              </thead>
              <tbody>
                {DEALS.slice(0, 5).map((d) => (
                  <tr key={d.id} onClick={() => onOpenDeal(d)}>
                    <td>
                      <div className="row-customer">
                        <span className="row-customer__name">{d.company[lang]}</span>
                        <span className="row-customer__meta">{d.id} · {d.industry[lang]}</span>
                      </div>
                    </td>
                    <td>{stageBadge(d.stage, t)}</td>
                    <td style={{ textAlign: 'right' }}>
                      <div className="row-amount">{fmtMoney(d.amount)}</div>
                    </td>
                    <td>{dealStatusBadge(d.status, t)}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </Card>

          {/* New materials */}
          <Card
            title={t('dash.materials_new')}
            sub={lang === 'zh' ? '本週 MaiAgent 行銷團隊新上架' : 'Fresh from the MaiAgent marketing team'}
            action={<Btn variant="ghost" size="sm" iconRight="arrow-right" onClick={() => onNav('materials')}>{t('common.view_all')}</Btn>}
          >
            <div className="tile-grid" style={{ gridTemplateColumns: 'repeat(3, 1fr)' }}>
              {MATERIALS.slice(0, 3).map((m) => (
                <div key={m.id} className="tile" onClick={() => onNav('materials')}>
                  <MaterialCover cover={m.cover} cat={t('mat.cat.' + m.cat)} />
                  <div className="tile__body">
                    <div className="tile__title">{m.title[lang]}</div>
                    <div className="tile__meta">
                      <span>{m.product}</span>
                      <span>·</span>
                      <span>{m.size}</span>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </Card>
        </div>

        {/* RIGHT: tasks + contact + events */}
        <div className="section-stack">
          {/* Contact card */}
          <Card style={{ background: 'linear-gradient(135deg, #FFFFFF, #F4F6FF)' }}>
            <div className="card-sub" style={{ marginBottom: 12, fontWeight: 700, color: 'var(--mai-fg-3)', textTransform: 'uppercase', letterSpacing: '0.08em', fontSize: 11 }}>{t('dash.contact_card')}</div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
              <Avatar name={PARTNER.manager.name[lang]} size="lg" />
              <div>
                <div style={{ fontWeight: 700, fontSize: 16, color: 'var(--mai-fg)' }}>{PARTNER.manager.name[lang]}</div>
                <div style={{ fontSize: 12, color: 'var(--mai-fg-3)' }}>{PARTNER.manager.role[lang]} · MaiAgent</div>
              </div>
            </div>
            <div style={{ marginTop: 14, display: 'flex', flexDirection: 'column', gap: 6, fontSize: 13, color: 'var(--mai-fg-2)' }}>
              <div className="row gap-1"><Icon name="mail" size={14} /> <span>{PARTNER.manager.email}</span></div>
              <div className="row gap-1"><Icon name="phone" size={14} /> <span>{PARTNER.manager.phone}</span></div>
            </div>
            <div style={{ marginTop: 14, display: 'flex', gap: 8 }}>
              <Btn variant="dark" size="sm" icon="calendar" style={{ flex: 1 }}>{t('dash.contact_card.cta')}</Btn>
              <Btn variant="ghost" size="sm" icon="message-circle">{t('dash.contact_card.chat')}</Btn>
            </div>
          </Card>

          {/* Tasks */}
          <Card title={t('dash.tasks')} sub={t('dash.tasks.sub')}>
            <div className="list">
              {TASKS.map((task) => (
                <div key={task.id} className="list-item">
                  <div className={`list-item__icon list-item__icon--${task.tone}`}>
                    <Icon name={task.icon} size={16} />
                  </div>
                  <div className="list-item__body">
                    <div className="list-item__title">{lang === 'zh' ? task.titleZh : task.titleEn}</div>
                    <div className="list-item__meta">{lang === 'zh' ? task.metaZh : task.metaEn}</div>
                  </div>
                  <Btn variant="ghost" size="sm" iconRight="arrow-right">{lang === 'zh' ? task.actionZh : task.actionEn}</Btn>
                </div>
              ))}
            </div>
          </Card>

          {/* Upcoming */}
          <Card
            title={t('dash.upcoming')}
            action={<Btn variant="ghost" size="sm" iconRight="arrow-right" onClick={() => onNav('events')}>{t('common.view_all')}</Btn>}
          >
            <div className="list">
              {EVENTS.slice(0, 3).map((e) => (
                <div key={e.id} className="list-item">
                  <div className="list-item__icon list-item__icon--violet" style={{ flexDirection: 'column' }}>
                    <Icon name="calendar" size={16} />
                  </div>
                  <div className="list-item__body">
                    <div className="list-item__title">{e.title[lang]}</div>
                    <div className="list-item__meta">
                      <span>{e.date} · {e.time}</span>
                      <span>·</span>
                      <Badge tone={e.format === 'live' ? 'blue' : e.format === 'online' ? 'green' : 'violet'}>
                        {t('events.format.' + e.format)}
                      </Badge>
                    </div>
                  </div>
                  {e.seats === 0
                    ? <Badge tone="gray">{t('events.full')}</Badge>
                    : e.registered
                      ? <Badge tone="green" dot>{t('common.registered')}</Badge>
                      : <Btn variant="subtle" size="sm">{t('common.register')}</Btn>
                  }
                </div>
              ))}
            </div>
          </Card>
        </div>
      </div>
    </div>
  );
};

window.Dashboard = Dashboard;