// ───────────────────────────────────────────────────────────
// Huio Control Panel — Hụi Groups View (cp-groups-view.jsx)
// ───────────────────────────────────────────────────────────

if (!window.CP_STYLES) throw new Error('[cp-groups-view] window.CP_STYLES not loaded');

function renderGroups({
  lang = 'vi',
  t: rawT,
  appStyles: rawAppStyles,
  groups: rawGroups = [],
  setActiveGroupDetail,
  setGroupDetailTab,
  loadGroupDetails,
}) {
  const appStyles = rawAppStyles || window.CP_STYLES || {};
  const t = typeof rawT === 'function' ? rawT : (k) => k;
  const groups = Array.isArray(rawGroups) ? rawGroups : [];
  const vnd = window.vnd || ((v) => (v != null ? `${Number(v).toLocaleString('vi-VN')} ₫` : '0 ₫'));

  return (
    <div style={appStyles.viewWrapper}>
      <div style={appStyles.welcomeBanner}>
        <h1 className="hu-h1 hu-display" style={{ margin: '0 0 6px 0' }}>{t('groups.title')}</h1>
        <p style={{ margin: 0, color: 'var(--hu-fg-2)' }}>{t('groups.sub')}</p>
      </div>
      
      {/* Active hụi groups */}
      <div className="hu-card hu-card-3d-sm" style={{ padding: 0, overflow: 'hidden' }}>
        <table style={appStyles.tableStyle}>
          <thead>
            <tr style={appStyles.tableHeaderRow}>
              <th style={appStyles.tableTh}>{t('groups.col.name')}</th>
              <th style={appStyles.tableTh}>{t('groups.col.organizer')}</th>
              <th style={appStyles.tableTh}>{t('groups.col.amount')}</th>
              <th style={appStyles.tableTh}>{t('groups.col.members')}</th>
              <th style={appStyles.tableTh}>{t('groups.col.period')}</th>
              <th style={appStyles.tableTh}>{t('groups.col.volume')}</th>
              <th style={appStyles.tableTh}>{t('groups.col.status')}</th>
            </tr>
          </thead>
          <tbody>
            {groups.map(g => (
              <tr 
                key={g.id} 
                style={{...appStyles.tableRowStyle, cursor: 'pointer'}}
                className="hu-listrow-press"
                onClick={() => {
                  if (typeof setActiveGroupDetail === 'function') setActiveGroupDetail(g);
                  if (typeof setGroupDetailTab === 'function') setGroupDetailTab('slots');
                  if (typeof loadGroupDetails === 'function') loadGroupDetails(g);
                }}
                id={`group-row-${g.id}`}
              >
                <td style={{...appStyles.tableTd, fontWeight: '600'}}>{g.name}</td>
                <td style={appStyles.tableTd}>{g.organizer}</td>
                <td style={appStyles.tableTd} className="hu-mono">{vnd(g.amount)}</td>
                <td style={appStyles.tableTd} className="hu-mono">{g.members} {t('groups.slots_count')}</td>
                <td style={appStyles.tableTd} className="hu-mono">{g.period}</td>
                <td style={appStyles.tableTd} className="hu-mono">{vnd(g.volume)}</td>
                <td style={appStyles.tableTd}>
                  <span style={typeof appStyles.groupStatusBadge === 'function' ? appStyles.groupStatusBadge(g.status) : {}}>
                    {t(`groups.status.${g.status}`)}
                  </span>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

window.CpGroupsView = {
  renderGroups,
};