/* MaiAgent Partner Portal — Case Studies + Events */

const CasesPage = ({ t, lang }) => {
  return (
    <div className="page">
      <div className="page-header">
        <div className="page-header__title">
          <div className="page-header__eyebrow">{lang === 'zh' ? '社會證明' : 'Social proof'}</div>
          <h1>{t('cs.title')}</h1>
          <div className="page-header__sub">{t('cs.sub')}</div>
        </div>
        <div className="page-header__actions">
          <Btn variant="ghost" icon="filter">{t('common.filter')}</Btn>
        </div>
      </div>

      <div className="tile-grid" style={{ gridTemplateColumns: 'repeat(auto-fill, minmax(320px, 1fr))' }}>
        {CASES.map((c) => (
          <div key={c.id} className="tile">
            <MaterialCover cover={c.cover} cat={c.industry[lang]} />
            <div className="tile__body" style={{ gap: 10 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                <Badge tone="blue">{c.industry[lang]}</Badge>
                <Badge tone="gray">{c.product}</Badge>
              </div>
              <div className="tile__title" style={{ fontSize: 15 }}>{c.customer[lang]}</div>

              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 6, padding: '10px 0', borderTop: '1px solid #F1F3FA', borderBottom: '1px solid #F1F3FA' }}>
                {c.kpi.map((k, i) => (
                  <div key={i} style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
                    <div style={{ fontWeight: 800, fontSize: 16, color: 'var(--mai-green-deep)', letterSpacing: '-0.01em', fontFamily: 'var(--font-sans)' }}>{k.v}</div>
                    <div style={{ fontSize: 10.5, color: 'var(--mai-fg-3)', lineHeight: 1.3 }}>{k.l[lang]}</div>
                  </div>
                ))}
              </div>

              <div style={{ display: 'flex', gap: 6, marginTop: 4 }}>
                <Btn variant="subtle" size="sm" iconRight="arrow-right" style={{ flex: 1, justifyContent: 'space-between' }}>{t('common.view_detail')}</Btn>
                <Btn variant="ghost" size="sm" icon="share">{t('cs.share')}</Btn>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

// ===== Events =====
const EVENT_TABS = [
  { id: 'upcoming', key: 'events.tab.upcoming', filter: (e) => true },
  { id: 'cert', key: 'events.tab.training', filter: (e) => e.type === 'cert' },
  { id: 'mine', key: 'events.tab.mine', filter: (e) => e.registered },
  { id: 'past', key: 'events.tab.past', filter: () => false },
  { id: 'seminars', key: 'seminar.title' },
];

const SEMINAR_COLORS = [
  'linear-gradient(135deg,#0F1733,#1B2B5F)',
  'linear-gradient(135deg,#0D2B1A,#0E4A2E)',
  'linear-gradient(135deg,#1A0A2E,#2D1561)',
  'linear-gradient(135deg,#1C1000,#3A2800)',
  'linear-gradient(135deg,#001A2C,#003558)',
  'linear-gradient(135deg,#1A0E00,#3D2200)',
];

const SeminarCard = ({ seminar, lang, t, onWatch }) => {
  const idx = TECH_SEMINARS.indexOf(seminar) % SEMINAR_COLORS.length;
  const bg = SEMINAR_COLORS[idx];
  const isLatest = idx === 0;
  return (
    <div className="card--lift" style={{ background: 'white', border: '1px solid var(--mai-border)', borderRadius: 14, overflow: 'hidden', cursor: 'pointer' }} onClick={() => onWatch(seminar)}>
      {/* Thumbnail */}
      <div style={{ background: bg, aspectRatio: '16/9', position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <div style={{ position: 'absolute', top: 10, left: 10, display: 'flex', gap: 6 }}>
          <span style={{ background: 'rgba(255,255,255,0.15)', color: 'white', fontSize: 11, fontWeight: 700, padding: '3px 9px', borderRadius: 99, backdropFilter: 'blur(4px)', border: '1px solid rgba(255,255,255,0.2)' }}>{seminar.ep}</span>
          {isLatest && <span style={{ background: '#26C281', color: 'white', fontSize: 11, fontWeight: 700, padding: '3px 9px', borderRadius: 99 }}>{t('seminar.latest')}</span>}
        </div>
        <div style={{ width: 52, height: 52, borderRadius: '50%', background: 'rgba(255,255,255,0.15)', display: 'flex', alignItems: 'center', justifyContent: 'center', border: '2px solid rgba(255,255,255,0.3)', backdropFilter: 'blur(4px)' }}>
          <Icon name="play" size={20} style={{ color: 'white', marginLeft: 3 }} />
        </div>
        <div style={{ position: 'absolute', bottom: 8, right: 10, background: 'rgba(0,0,0,0.55)', color: 'white', fontSize: 11, fontWeight: 600, padding: '3px 8px', borderRadius: 6, backdropFilter: 'blur(2px)' }}>
          {seminar.duration}
        </div>
      </div>
      {/* Body */}
      <div style={{ padding: '14px 16px 16px' }}>
        <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--mai-fg)', lineHeight: 1.4, marginBottom: 8 }}>
          {lang === 'zh' ? seminar.titleZh : seminar.titleEn}
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 12, color: 'var(--mai-fg-3)', marginBottom: 10 }}>
          <span className="row gap-1"><Icon name="calendar" size={12} />{seminar.date}</span>
          <span className="row gap-1"><Icon name="clock" size={12} />{seminar.duration}</span>
        </div>
        <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
          {seminar.tags.map(tag => (
            <span key={tag} style={{ background: '#F0F4FF', color: '#1F4FFF', fontSize: 11, fontWeight: 600, padding: '2px 8px', borderRadius: 99 }}>{tag}</span>
          ))}
        </div>
      </div>
    </div>
  );
};

const SeminarModal = ({ seminar, lang, t, onClose }) => {
  if (!seminar) return null;
  return (
    <div className="modal-backdrop" onClick={onClose} style={{ zIndex: 9999 }}>
      <div onClick={e => e.stopPropagation()} style={{ background: '#0a0c14', borderRadius: 16, width: '100%', maxWidth: 800, margin: 'auto', overflow: 'hidden', boxShadow: '0 24px 80px rgba(0,0,0,0.8)' }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '14px 20px', borderBottom: '1px solid rgba(255,255,255,0.1)' }}>
          <div>
            <span style={{ color: '#26C281', fontSize: 12, fontWeight: 700, letterSpacing: '0.06em' }}>{seminar.ep}</span>
            <div style={{ color: 'white', fontWeight: 700, fontSize: 15, marginTop: 2 }}>{lang === 'zh' ? seminar.titleZh : seminar.titleEn}</div>
          </div>
          <button onClick={onClose} style={{ background: 'rgba(255,255,255,0.08)', border: 'none', color: 'white', borderRadius: 8, padding: '6px 10px', cursor: 'pointer', fontSize: 16 }}>✕</button>
        </div>
        <div style={{ aspectRatio: '16/9', background: '#000' }}>
          <iframe
            src={`https://www.youtube.com/embed/${seminar.youtubeId}?autoplay=1&rel=0`}
            style={{ width: '100%', height: '100%', border: 'none', display: 'block' }}
            allow="autoplay; encrypted-media; picture-in-picture"
            allowFullScreen
          />
        </div>
        <div style={{ padding: '12px 20px 16px', display: 'flex', alignItems: 'center', gap: 12 }}>
          <span style={{ fontSize: 12, color: 'rgba(255,255,255,0.5)' }}>{seminar.date} · {seminar.duration}</span>
          <div style={{ display: 'flex', gap: 6 }}>
            {seminar.tags.map(tag => <span key={tag} style={{ background: 'rgba(31,79,255,0.25)', color: '#7BA7FF', fontSize: 11, fontWeight: 600, padding: '2px 8px', borderRadius: 99 }}>{tag}</span>)}
          </div>
        </div>
      </div>
    </div>
  );
};

const EventsPage = ({ t, lang }) => {
  const [tab, setTab] = React.useState('upcoming');
  const [playingSeminar, setPlayingSeminar] = React.useState(null);
  const filterFn = tab !== 'seminars' ? EVENT_TABS.find((x) => x.id === tab).filter : null;
  const rows = filterFn ? EVENTS.filter(filterFn) : [];

  return (
    <div className="page">
      <div className="page-header">
        <div className="page-header__title">
          <div className="page-header__eyebrow">{lang === 'zh' ? '夥伴成長' : 'Partner growth'}</div>
          <h1>{t('events.title')}</h1>
          <div className="page-header__sub">{t('events.sub')}</div>
        </div>
      </div>

      <div className="table-toolbar" style={{ background: 'white', border: '1px solid var(--mai-border)', borderRadius: 12, marginBottom: 18 }}>
        <div className="table-toolbar__filters">
          {EVENT_TABS.map((x) => (
            <button key={x.id} className={`filter-chip ${tab === x.id ? 'is-active' : ''}`} onClick={() => setTab(x.id)}>
              {t(x.key)}
            </button>
          ))}
        </div>
      </div>

      {/* ── SEMINARS TAB ─────────────────────────────────────── */}
      {tab === 'seminars' && (
        <div>
          <div style={{ marginBottom: 20 }}>
            <div style={{ fontSize: 13.5, color: 'var(--mai-fg-3)' }}>{t('seminar.sub')}</div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill,minmax(280px,1fr))', gap: 18 }}>
            {TECH_SEMINARS.map(s => (
              <SeminarCard key={s.id} seminar={s} lang={lang} t={t} onWatch={setPlayingSeminar} />
            ))}
          </div>
          {playingSeminar && <SeminarModal seminar={playingSeminar} lang={lang} t={t} onClose={() => setPlayingSeminar(null)} />}
        </div>
      )}

      {/* ── EVENTS LIST ──────────────────────────────────────── */}
      {tab !== 'seminars' && (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          {rows.map((e) => {
            const isFull = e.seats === 0;
            const isRegistered = e.registered;
            const filled = (e.total - e.seats) / e.total;
            const dateParts = e.date.split('-');
            return (
              <Card key={e.id} className="card--lift" style={{ padding: 0, display: 'flex', alignItems: 'stretch', gap: 0, overflow: 'hidden' }}>
                {/* Date block */}
                <div style={{ width: 96, background: e.type === 'summit' ? 'linear-gradient(180deg, #131838, #1B2150)' : '#F4F6FF', color: e.type === 'summit' ? 'white' : 'var(--mai-fg)', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: 16, flexShrink: 0 }}>
                  <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', opacity: 0.7 }}>{['JAN','FEB','MAR','APR','MAY','JUN','JUL','AUG','SEP','OCT','NOV','DEC'][parseInt(dateParts[1])-1]}</div>
                  <div style={{ fontSize: 36, fontWeight: 800, lineHeight: 1, letterSpacing: '-0.02em' }}>{dateParts[2]}</div>
                  <div style={{ fontSize: 11, fontWeight: 600, opacity: 0.7, marginTop: 4 }}>{dateParts[0]}</div>
                </div>

                <div style={{ flex: 1, padding: 18, display: 'flex', flexDirection: 'column', gap: 6, minWidth: 0 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
                    <Badge tone={e.format === 'live' ? 'blue' : e.format === 'online' ? 'green' : 'violet'} dot>{t('events.format.' + e.format)}</Badge>
                    {e.tag && <Badge tone="amber">{e.tag[lang]}</Badge>}
                    {e.type === 'cert' && <Badge tone="violet">{t('events.cert')}</Badge>}
                  </div>
                  <div style={{ fontSize: 16, fontWeight: 700, color: 'var(--mai-fg)', letterSpacing: '-0.01em' }}>{e.title[lang]}</div>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 14, color: 'var(--mai-fg-3)', fontSize: 12.5 }}>
                    <span className="row gap-1"><Icon name="clock" size={13} />{e.time}</span>
                    <span className="row gap-1"><Icon name="map-pin" size={13} />{e.location[lang]}</span>
                  </div>
                  <div style={{ marginTop: 6, display: 'flex', alignItems: 'center', gap: 12 }}>
                    <div style={{ flex: 1, maxWidth: 240 }}>
                      <Progress value={filled * 100} variant={isFull ? undefined : 'blue'} />
                      <div style={{ fontSize: 11, color: 'var(--mai-fg-3)', marginTop: 4 }}>
                        {isFull ? t('events.full') : `${e.seats} / ${e.total} ${t('events.seats_left')}`}
                      </div>
                    </div>
                  </div>
                </div>

                <div style={{ padding: 18, display: 'flex', alignItems: 'center', gap: 8, flexShrink: 0 }}>
                  {isRegistered
                    ? <Badge tone="green" dot lg>{t('common.registered')}</Badge>
                    : isFull
                      ? <Btn variant="ghost" disabled>{t('events.full')}</Btn>
                      : <Btn variant="primary" iconRight="arrow-right">{t('common.register')}</Btn>}
                </div>
              </Card>
            );
          })}
          {rows.length === 0 && (
            <div className="empty"><Icon name="calendar" /><div>{lang === 'zh' ? '目前沒有符合的活動' : 'No events here yet'}</div></div>
          )}
        </div>
      )}
    </div>
  );
};

Object.assign(window, { CasesPage, EventsPage });