/*
 * SCR-A9 테넌트(전시관) 관리·온보딩 (M18 · §1A · 플랫폼 슈퍼관리자 전용). Stitch scr_a9 이식.
 * 데이터 원천: 샘플. 멀티테넌시(테넌트 CRUD·온보딩·격리)가 백엔드 미구현 → 실배선 대상 없음. 갭 문서화.
 * 화면은 온보딩 위저드 IA 와 테넌트 목록 레이아웃을 확정해 후속 구현의 계약 참조로 남긴다.
 */
import { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { IconCheck } from '../../components/ui/icons';
import './admin-modules.css';

interface TenantRow {
  code: string;
  name: string;
  domain: string;
  status: 'active' | 'onboarding' | 'suspended';
  events: number;
  users: number;
}

const TENANTS: TenantRow[] = [
  { code: 'KINTEX', name: '킨텍스', domain: 'kintex.wise.ai.kr', status: 'active', events: 24, users: 1280 },
  { code: 'COEX', name: '코엑스', domain: 'coex.wise.ai.kr', status: 'onboarding', events: 0, users: 3 },
  { code: 'BEXCO', name: '벡스코', domain: 'bexco.wise.ai.kr', status: 'suspended', events: 5, users: 210 },
];

const WIZARD_STEPS = ['create', 'domain', 'brand', 'master', 'admin', 'smoke', 'activate'];

export function TenantAdminPage() {
  const { t } = useTranslation();
  const [selected, setSelected] = useState<string>(TENANTS[1].code);
  const tenant = TENANTS.find((tn) => tn.code === selected) ?? TENANTS[0];
  // 온보딩 진행 단계(샘플): active=완료 / onboarding=4단계 진행 / suspended=완료 후 중지
  const currentStep = tenant.status === 'onboarding' ? 3 : WIZARD_STEPS.length;

  return (
    <div className="kx-page kx-adm">
      <header className="kx-adm__head">
        <div>
          <h1 className="kx-adm__title">{t('tenant.title')}</h1>
          <p className="kx-adm__subtitle">{t('tenant.subtitle')}</p>
        </div>
      </header>

      <div className="kx-adm-sample-banner" role="status">
        <span className="kx-bi__degraded">{t('tenant.sampleTag')}</span>
        {t('tenant.sampleNote')}
      </div>

      <div className="kx-adm-tenant">
        <section className="kx-card kx-adm-tenant__list" aria-label={t('tenant.listAria')}>
          <div className="kx-adm-tenant__lhead">
            <h2>{t('tenant.venue')}</h2>
            <button className="kx-btn kx-btn--secondary" disabled title={t('tenant.notImpl')}>
              {t('tenant.addVenue')}
            </button>
          </div>
          <div className="kx-table-scroll">
            <table className="kx-table kx-table--zebra kx-adm-tenants">
              <thead>
                <tr>
                  <th>{t('tenant.venue')}</th>
                  <th>{t('tenant.code')}</th>
                  <th>{t('tenant.domain')}</th>
                  <th>{t('tenant.status')}</th>
                  <th className="kx-num">{t('tenant.events')}</th>
                  <th className="kx-num">{t('tenant.users')}</th>
                </tr>
              </thead>
              <tbody>
                {TENANTS.map((tn) => (
                  <tr
                    key={tn.code}
                    className={tn.code === selected ? 'is-selected' : ''}
                    onClick={() => setSelected(tn.code)}
                    style={{ cursor: 'pointer' }}
                  >
                    <td className="kx-adm-tenants__name">{tn.name}</td>
                    <td className="kx-adm-mono">{tn.code}</td>
                    <td className="kx-adm-muted">{tn.domain}</td>
                    <td><TenantStatus status={tn.status} /></td>
                    <td className="kx-num tnum">{tn.events}</td>
                    <td className="kx-num tnum">{tn.users.toLocaleString()}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </section>

        <aside className="kx-card kx-adm-tenant__wizard" aria-label={t('tenant.wizardAria')}>
          <h2 className="kx-adm-wiz__title">{t('tenant.onboardingOf', { name: tenant.name })}</h2>
          <p className="kx-adm-muted">{t('tenant.dataOnboarding')}</p>
          <ol className="kx-adm-wiz">
            {WIZARD_STEPS.map((key, i) => {
              const state = i < currentStep ? 'done' : i === currentStep ? 'current' : 'todo';
              return (
                <li key={key} className={`kx-adm-wiz__step is-${state}`}>
                  <span className="kx-adm-wiz__dot" aria-hidden="true">
                    {state === 'done' ? <IconCheck size={14} /> : i + 1}
                  </span>
                  <span className="kx-adm-wiz__body">
                    <span className="kx-adm-wiz__label">{t(`tenant.wiz.${key}.label`)}</span>
                    <span className="kx-adm-wiz__desc">{t(`tenant.wiz.${key}.desc`)}</span>
                  </span>
                </li>
              );
            })}
          </ol>
        </aside>
      </div>
    </div>
  );
}

function TenantStatus({ status }: { status: TenantRow['status'] }) {
  const { t } = useTranslation();
  const cls = status === 'active' ? 'success' : status === 'onboarding' ? 'warn' : 'error';
  return <span className={`kx-adm-pill kx-adm-pill--${cls}`}>{t(`tenant.tstatus.${status}`)}</span>;
}
