/* MaiAgent Partner Portal — Product Pricing Page */

const PricingPage = ({ t, lang }) => {
  const [activeId, setActiveId] = React.useState('saas');
  const section = PRICE_LIST.find(s => s.id === activeId);

  const fmtPrice = (price, priceLabel) => {
    if (priceLabel) return priceLabel;
    if (price == null) return '—';
    return 'NT$ ' + price.toLocaleString();
  };

  return (
    <div className="page">
      <div className="page-header">
        <div className="page-header__title">
          <div className="page-header__eyebrow">{lang === 'zh' ? '銷售資源' : 'Sales'}</div>
          <h1>{lang === 'zh' ? '產品價格表' : 'Product Pricing'}</h1>
          <div className="page-header__sub">
            {lang === 'zh' ? '牌價（未稅，新台幣）・2026/05/01 修訂版' : 'List prices (excl. tax, NTD) · Rev. 2026/05/01'}
          </div>
        </div>
        <a href="assets/maiagent-pricing.pdf" download="MaiAgent_產品價格表.pdf" style={{ textDecoration: 'none' }}>
          <Btn variant="ghost" icon="download">{lang === 'zh' ? '下載 PDF' : 'Download PDF'}</Btn>
        </a>
      </div>

      {/* Section tabs */}
      <div style={{ display: 'flex', gap: 8, marginBottom: 24, flexWrap: 'wrap' }}>
        {PRICE_LIST.map(s => {
          const active = s.id === activeId;
          return (
            <button key={s.id} onClick={() => setActiveId(s.id)} style={{
              display: 'flex', alignItems: 'center', gap: 7,
              padding: '8px 16px', borderRadius: 10,
              border: '1.5px solid ' + (active ? 'var(--mai-blue)' : 'var(--mai-border)'),
              background: active ? '#EEF2FF' : 'white',
              color: active ? 'var(--mai-blue)' : 'var(--mai-fg-2)',
              fontWeight: 600, fontSize: 13, cursor: 'pointer', transition: 'all 0.15s',
            }}>
              <Icon name={s.icon} size={14} />
              {lang === 'zh' ? s.zh : s.en}
            </button>
          );
        })}
      </div>

      {/* Price table */}
      {section && (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          {section.groups.map((group, gi) => (
            <div key={gi} style={{ background: 'white', border: '1px solid var(--mai-border)', borderRadius: 16, overflow: 'hidden' }}>
              {/* Group header */}
              <div style={{ padding: '11px 20px', background: '#F8F9FF', borderBottom: '1px solid var(--mai-border)', display: 'flex', alignItems: 'center', gap: 8 }}>
                <Icon name={section.icon} size={13} style={{ color: 'var(--mai-blue)' }} />
                <span style={{ fontSize: 12, fontWeight: 700, color: 'var(--mai-fg-2)', letterSpacing: '0.04em' }}>
                  {lang === 'zh' ? group.title.zh : group.title.en}
                </span>
              </div>

              <table style={{ width: '100%', borderCollapse: 'collapse' }}>
                <thead>
                  <tr style={{ background: '#FAFBFF' }}>
                    <th style={{ padding: '9px 20px', textAlign: 'left', fontSize: 11.5, fontWeight: 700, color: 'var(--mai-fg-3)', borderBottom: '1px solid var(--mai-border)', whiteSpace: 'nowrap' }}>
                      {lang === 'zh' ? '品項代碼' : 'Code'}
                    </th>
                    <th style={{ padding: '9px 20px', textAlign: 'left', fontSize: 11.5, fontWeight: 700, color: 'var(--mai-fg-3)', borderBottom: '1px solid var(--mai-border)' }}>
                      {lang === 'zh' ? '品名 / 說明' : 'Description'}
                    </th>
                    <th style={{ padding: '9px 20px', textAlign: 'center', fontSize: 11.5, fontWeight: 700, color: 'var(--mai-fg-3)', borderBottom: '1px solid var(--mai-border)', whiteSpace: 'nowrap' }}>
                      {lang === 'zh' ? '單位' : 'Unit'}
                    </th>
                    <th style={{ padding: '9px 20px', textAlign: 'right', fontSize: 11.5, fontWeight: 700, color: 'var(--mai-fg-3)', borderBottom: '1px solid var(--mai-border)', whiteSpace: 'nowrap' }}>
                      {lang === 'zh' ? '牌價（未稅）' : 'List Price (excl. tax)'}
                    </th>
                  </tr>
                </thead>
                <tbody>
                  {group.items.map((item, ii) => (
                    <tr key={item.code}
                      style={{ borderBottom: ii < group.items.length - 1 ? '1px solid #F1F3FA' : 'none', background: 'white' }}
                      onMouseEnter={e => e.currentTarget.style.background = '#FAFBFF'}
                      onMouseLeave={e => e.currentTarget.style.background = 'white'}>

                      {/* Code */}
                      <td style={{ padding: '12px 20px', verticalAlign: 'top' }}>
                        <code style={{ fontSize: 11.5, fontFamily: 'ui-monospace, monospace', color: 'var(--mai-fg-2)', whiteSpace: 'nowrap' }}>{item.code}</code>
                      </td>

                      {/* Name + features */}
                      <td style={{ padding: '12px 20px', verticalAlign: 'top' }}>
                        <div style={{ fontWeight: 600, fontSize: 13, color: 'var(--mai-fg)', marginBottom: (item.features || item.note) ? 4 : 0 }}>
                          {item.zh}
                        </div>
                        {(item.features || item.note) && (
                          <div style={{ fontSize: 12, color: 'var(--mai-fg-3)', lineHeight: 1.6 }}>
                            {lang === 'zh' ? (item.features?.zh || item.note?.zh) : (item.features?.en || item.note?.en)}
                          </div>
                        )}
                      </td>

                      {/* Unit */}
                      <td style={{ padding: '12px 20px', textAlign: 'center', verticalAlign: 'top' }}>
                        <span style={{
                          display: 'inline-block', padding: '2px 10px', borderRadius: 999,
                          fontSize: 11, fontWeight: 700, letterSpacing: '0.04em',
                          background: '#F3F4F6', color: '#6B7280',
                        }}>{item.unit}</span>
                      </td>

                      {/* Price */}
                      <td style={{ padding: '12px 20px', textAlign: 'right', verticalAlign: 'top' }}>
                        {item.priceLabel ? (
                          <span style={{ fontSize: 12.5, fontWeight: 700, color: '#7C3AED' }}>{item.priceLabel}</span>
                        ) : (
                          <span style={{ fontSize: 13.5, fontWeight: 700, color: 'var(--mai-fg)', fontFamily: 'ui-monospace, monospace' }}>
                            NT$ {item.price?.toLocaleString()}
                          </span>
                        )}
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          ))}
        </div>
      )}

      {/* Footer note */}
      <div style={{ marginTop: 20, padding: '14px 18px', background: '#F8F9FF', border: '1px solid var(--mai-border)', borderRadius: 12, fontSize: 12, color: 'var(--mai-fg-3)', lineHeight: 1.9 }}>
        <div style={{ fontWeight: 700, color: 'var(--mai-fg-2)', marginBottom: 4 }}>
          {lang === 'zh' ? '注意事項' : 'Notes'}
        </div>
        <div>※ {lang === 'zh' ? '以上牌價均為未稅金額（新台幣），實際成交價以雙方簽署合約為準。' : 'All list prices are excl. VAT (NTD). Actual transaction prices are subject to signed contract.'}</div>
        <div>※ {lang === 'zh' ? '夥伴折扣依合作協議另行議定，不得對外揭露。' : 'Partner discounts are subject to partnership agreement and must not be disclosed externally.'}</div>
        <div>※ {lang === 'zh' ? '如有報價需求，請透過 AI 提案助理或聯絡您的業務窗口。' : 'For quotation requests, use the AI Proposal Assistant or contact your MaiAgent representative.'}</div>
      </div>
    </div>
  );
};

window.PricingPage = PricingPage;