/* MaiAgent Partner Portal — Customers, Tickets, Notifications */

// ===== Customers =====
const CustomersPage = ({ t, lang }) => {
  return (
    <div className="page">
      <div className="page-header">
        <div className="page-header__title">
          <div className="page-header__eyebrow">{lang === 'zh' ? '關係管理' : 'CRM'}</div>
          <h1>{t('cust.title')}</h1>
          <div className="page-header__sub">{t('cust.sub')}</div>
        </div>
        <div className="page-header__actions">
          <Btn variant="ghost" icon="download">{t('common.export')}</Btn>
          <Btn variant="primary" icon="plus">{lang === 'zh' ? '新增客戶' : 'New customer'}</Btn>
        </div>
      </div>

      <div className="table-wrap">
        <div className="table-toolbar">
          <div className="table-toolbar__filters">
            <button className="filter-chip is-active">{t('common.all')}<span className="filter-chip__count">{CUSTOMERS.length}</span></button>
            <button className="filter-chip">{lang === 'zh' ? '已成交' : 'Won'}<span className="filter-chip__count">{CUSTOMERS.filter((c) => c.status === 'won').length}</span></button>
            <button className="filter-chip">{lang === 'zh' ? '進行中' : 'Open'}<span className="filter-chip__count">{CUSTOMERS.filter((c) => c.status === 'open').length}</span></button>
          </div>
          <div className="table-search">
            <Icon name="search" />
            <input placeholder={t('common.search')} />
          </div>
        </div>
        <table className="data">
          <thead>
            <tr>
              <th>{t('cust.col.company')}</th>
              <th>{t('cust.col.industry')}</th>
              <th>{t('cust.col.deals')}</th>
              <th style={{ textAlign: 'right' }}>{t('cust.col.spend')}</th>
              <th>{t('cust.col.contact')}</th>
              <th>{t('cust.col.last')}</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {CUSTOMERS.map((c) => (
              <tr key={c.id}>
                <td>
                  <div className="row-owner">
                    <Avatar name={c.company[lang]} />
                    <div className="row-customer">
                      <span className="row-customer__name">{c.company[lang]}</span>
                      <span className="row-customer__meta">{c.status === 'won' ? (lang === 'zh' ? '客戶' : 'Customer') : (lang === 'zh' ? '潛在客戶' : 'Prospect')}</span>
                    </div>
                  </div>
                </td>
                <td><Badge tone="blue">{c.industry[lang]}</Badge></td>
                <td>{c.deals}</td>
                <td style={{ textAlign: 'right' }}><div className="row-amount">{fmtMoney(c.totalSpend)}</div></td>
                <td style={{ fontSize: 12.5, color: 'var(--mai-fg-2)' }}>
                  <div style={{ fontWeight: 600, color: 'var(--mai-fg)' }}>{c.contact.name[lang]}</div>
                  <div style={{ color: 'var(--mai-fg-3)' }}>{c.contact.email}</div>
                </td>
                <td style={{ fontSize: 12.5, color: 'var(--mai-fg-2)' }}>{c.lastInteraction}</td>
                <td><Btn variant="ghost" size="sm" iconRight="arrow-right">{t('common.view_detail')}</Btn></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
};

// ===== Tickets =====
const TicketsPage = ({ t, lang }) => {
  return (
    <div className="page">
      <div className="page-header">
        <div className="page-header__title">
          <div className="page-header__eyebrow">{lang === 'zh' ? '支援' : 'Support'}</div>
          <h1>{t('sup.title')}</h1>
          <div className="page-header__sub">{t('sup.sub')}</div>
        </div>
        <div className="page-header__actions">
          <Btn variant="primary" icon="plus">{t('sup.new')}</Btn>
        </div>
      </div>

      {/* Quick contact */}
      <div className="split-3" style={{ marginBottom: 18 }}>
        {[
          { icon: 'message-circle', tone: 'blue', title: lang === 'zh' ? '即時訊息 (Slack Connect)' : 'Live chat (Slack Connect)', meta: lang === 'zh' ? '工作日 9:00 – 18:00 · 平均 5 分內回覆' : 'Mon–Fri 9–18, avg 5-min reply', cta: lang === 'zh' ? '開啟對話' : 'Start chat' },
          { icon: 'video', tone: 'green', title: lang === 'zh' ? '預約工程師 Demo' : 'Book engineer demo', meta: lang === 'zh' ? '客戶 Demo / POC 技術支援' : 'Customer demo / POC support', cta: lang === 'zh' ? '查看可用時段' : 'See slots' },
          { icon: 'phone', tone: 'violet', title: lang === 'zh' ? '緊急客戶事件熱線' : 'Customer escalation hotline', meta: '+886 2 7755 1234 ext. 99', cta: lang === 'zh' ? '撥打' : 'Call' },
        ].map((c, i) => (
          <Card key={i} className="card--lift">
            <div className={`list-item__icon list-item__icon--${c.tone}`} style={{ width: 44, height: 44, marginBottom: 10 }}><Icon name={c.icon} size={20}/></div>
            <div style={{ fontWeight: 700, fontSize: 14, marginBottom: 2 }}>{c.title}</div>
            <div style={{ fontSize: 12, color: 'var(--mai-fg-3)', marginBottom: 12 }}>{c.meta}</div>
            <Btn variant="ghost" size="sm" iconRight="arrow-right">{c.cta}</Btn>
          </Card>
        ))}
      </div>

      <div className="table-wrap">
        <div className="table-toolbar">
          <div className="table-toolbar__filters">
            <button className="filter-chip is-active">{t('common.all')}<span className="filter-chip__count">{TICKETS.length}</span></button>
            <button className="filter-chip">{t('sup.status.open')}<span className="filter-chip__count">{TICKETS.filter((x) => x.status === 'open').length}</span></button>
            <button className="filter-chip">{t('sup.status.waiting')}<span className="filter-chip__count">{TICKETS.filter((x) => x.status === 'waiting').length}</span></button>
            <button className="filter-chip">{t('sup.status.resolved')}<span className="filter-chip__count">{TICKETS.filter((x) => x.status === 'resolved').length}</span></button>
          </div>
          <div className="table-search">
            <Icon name="search" />
            <input placeholder={t('common.search')} />
          </div>
        </div>
        <table className="data">
          <thead>
            <tr>
              <th>{t('sup.col.id')}</th>
              <th>{t('sup.col.subject')}</th>
              <th>{t('sup.col.priority')}</th>
              <th>{t('sup.col.status')}</th>
              <th>{t('sup.col.handler')}</th>
              <th>{t('sup.col.updated')}</th>
            </tr>
          </thead>
          <tbody>
            {TICKETS.map((t1) => {
              const pTone = t1.priority === 'urgent' ? 'red' : t1.priority === 'high' ? 'amber' : t1.priority === 'normal' ? 'gray' : 'blue';
              const sTone = t1.status === 'open' ? 'blue' : t1.status === 'waiting' ? 'amber' : 'green';
              return (
                <tr key={t1.id}>
                  <td style={{ fontFamily: 'ui-monospace, monospace', fontSize: 12, color: 'var(--mai-fg-2)' }}>{t1.id}</td>
                  <td>
                    <div className="row-customer">
                      <span className="row-customer__name">{t1.subject[lang]}</span>
                      {t1.linkedDeal && <span className="row-customer__meta">{lang === 'zh' ? '關聯案件 ' : 'Linked deal '}{t1.linkedDeal}</span>}
                    </div>
                  </td>
                  <td><Badge tone={pTone} dot>{t('sup.priority.' + t1.priority)}</Badge></td>
                  <td><Badge tone={sTone} dot>{t('sup.status.' + t1.status)}</Badge></td>
                  <td>
                    <div className="row-owner">
                      <Avatar name={t1.handler[lang]} size="sm" />
                      <span style={{ fontSize: 12.5, color: 'var(--mai-fg-2)' }}>{t1.handler[lang]}</span>
                    </div>
                  </td>
                  <td style={{ color: 'var(--mai-fg-3)', fontSize: 12.5 }}>{lang === 'zh' ? t1.updatedZh : t1.updated}</td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
};

// ===== Notifications =====
const NotificationsPage = ({ t, lang }) => {
  const [tab, setTab] = React.useState('all');
  const rows = NOTIFICATIONS.filter((n) => tab === 'all' || (tab === 'unread' && n.unread));
  const unreadCount = NOTIFICATIONS.filter((n) => n.unread).length;
  return (
    <div className="page">
      <div className="page-header">
        <div className="page-header__title">
          <div className="page-header__eyebrow">{lang === 'zh' ? '訊息' : 'Inbox'}</div>
          <h1>{t('noti.title')}</h1>
          <div className="page-header__sub">{t('noti.sub')}</div>
        </div>
        <div className="page-header__actions">
          <Btn variant="ghost" icon="check">{t('noti.mark_all')}</Btn>
          <Btn variant="ghost" icon="settings">{t('noti.settings')}</Btn>
        </div>
      </div>

      <div className="table-wrap">
        <div className="table-toolbar">
          <div className="table-toolbar__filters">
            <button className={`filter-chip ${tab === 'all' ? 'is-active' : ''}`} onClick={() => setTab('all')}>{t('noti.all')}<span className="filter-chip__count">{NOTIFICATIONS.length}</span></button>
            <button className={`filter-chip ${tab === 'unread' ? 'is-active' : ''}`} onClick={() => setTab('unread')}>{t('noti.unread')}<span className="filter-chip__count">{unreadCount}</span></button>
          </div>
        </div>

        <div style={{ padding: '4px 18px 18px' }}>
          {rows.map((n) => (
            <div key={n.id} className="list-item" style={{ padding: '14px 0' }}>
              <div className={`list-item__icon list-item__icon--${n.tone}`}>
                <Icon name={n.icon} size={16}/>
              </div>
              <div className="list-item__body">
                <div className="list-item__title" style={{ fontWeight: n.unread ? 700 : 500 }}>
                  {n.unread && <span style={{ display: 'inline-block', width: 6, height: 6, borderRadius: 999, background: 'var(--mai-green)', marginRight: 8, verticalAlign: 'middle' }} />}
                  {n.title[lang]}
                </div>
                <div className="list-item__meta">{n.time[lang]} · {n.group}</div>
              </div>
              <Btn variant="ghost" size="sm" iconRight="arrow-right">{t('common.view_detail')}</Btn>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { CustomersPage, TicketsPage, NotificationsPage });