/* MaiAgent Partner Portal — Sales materials library */

const MAT_CATS = ['deck', 'onepager', 'demo', 'video', 'pricing', 'battlecard', 'cs', 'training'];

const MaterialsPage = ({ t, lang }) => {
  const [activeCat, setActiveCat] = React.useState('all');
  const [query, setQuery] = React.useState('');

  const counts = React.useMemo(() => {
    const c = { all: MATERIALS.length };
    MAT_CATS.forEach((cat) => c[cat] = MATERIALS.filter((m) => m.cat === cat).length);
    return c;
  }, []);

  const rows = MATERIALS.filter((m) => activeCat === 'all' || m.cat === activeCat).filter((m) => {
    if (!query) return true;
    const q = query.toLowerCase();
    return m.title[lang].toLowerCase().includes(q) || m.product.toLowerCase().includes(q);
  });

  // featured = first 3
  const featured = MATERIALS.slice(0, 3);

  return (
    <div className="page">
      <div className="page-header">
        <div className="page-header__title">
          <div className="page-header__eyebrow">{lang === 'zh' ? '銷售素材庫' : 'Sales enablement'}</div>
          <h1>{t('mat.title')}</h1>
          <div className="page-header__sub">{t('mat.sub')}</div>
        </div>
        <div className="page-header__actions">
          <Btn variant="ghost" icon="filter">{t('common.filter')}</Btn>
          <Btn variant="dark" icon="zap">{lang === 'zh' ? 'AI 助理:幫我選素材' : 'AI: pick materials for me'}</Btn>
        </div>
      </div>

      {/* Featured */}
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 }}>
        <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.10em', textTransform: 'uppercase', color: 'var(--mai-fg-3)' }}>
          ★ {t('mat.featured')}
        </div>
      </div>
      <div className="tile-grid" style={{ gridTemplateColumns: 'repeat(3, 1fr)', marginBottom: 28 }}>
        {featured.map((m) => (
          <div key={m.id} className="tile">
            <MaterialCover cover={m.cover} cat={t('mat.cat.' + m.cat)} />
            <div className="tile__body">
              <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 4 }}>
                {m.tag && <Badge tone="green" dot>{m.tag[lang]}</Badge>}
                <Badge tone="gray">{t('mat.cat.' + m.cat)}</Badge>
              </div>
              <div className="tile__title">{m.title[lang]}</div>
              <div className="tile__meta">
                <span>{m.product}</span>
                <span>·</span>
                <span>{m.size}</span>
                <span style={{ marginLeft: 'auto' }}>{m.updated}</span>
              </div>
              <div style={{ display: 'flex', gap: 6, marginTop: 10 }}>
                <Btn variant="dark" size="sm" icon="download" style={{ flex: 1, justifyContent: 'center' }}>{t('common.download')}</Btn>
                <Btn variant="ghost" size="sm" icon="share">{t('common.share')}</Btn>
              </div>
            </div>
          </div>
        ))}
      </div>

      {/* Library */}
      <div className="table-wrap">
        <div className="table-toolbar">
          <div className="table-toolbar__filters">
            <button className={`filter-chip ${activeCat === 'all' ? 'is-active' : ''}`} onClick={() => setActiveCat('all')}>
              {t('common.all')}<span className="filter-chip__count">{counts.all}</span>
            </button>
            {MAT_CATS.map((c) => (
              <button key={c} className={`filter-chip ${activeCat === c ? 'is-active' : ''}`} onClick={() => setActiveCat(c)}>
                {t('mat.cat.' + c)}<span className="filter-chip__count">{counts[c]}</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>

        <div style={{ padding: 18 }}>
          <div className="tile-grid">
            {rows.map((m) => (
              <div key={m.id} className="tile">
                <MaterialCover cover={m.cover} cat={t('mat.cat.' + m.cat)} />
                <div className="tile__body">
                  <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 4, flexWrap: 'wrap' }}>
                    {m.tag && <Badge tone="green" dot>{m.tag[lang]}</Badge>}
                    <Badge tone="gray">{t('mat.cat.' + m.cat)}</Badge>
                  </div>
                  <div className="tile__title">{m.title[lang]}</div>
                  <div className="tile__meta">
                    <span>{m.product}</span>
                    <span>·</span>
                    <span>{m.size}</span>
                    <span style={{ marginLeft: 'auto' }}>{m.updated}</span>
                  </div>
                  <div style={{ display: 'flex', gap: 6, marginTop: 10 }}>
                    <Btn variant="subtle" size="sm" icon="download" style={{ flex: 1, justifyContent: 'center' }}>{t('common.download')}</Btn>
                    <Btn variant="ghost" size="sm" icon="copy">{t('common.copy_link')}</Btn>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

window.MaterialsPage = MaterialsPage;