import { DEMO_LOGIN_ACCOUNTS, isDemoModeEnabled } from '@navi/config';
import type { User } from '@navi/types';
import { AccessDenied } from '../../../components/AccessDenied';
import { EmptyState, PageHeader, StatusBadge } from '../../../components/DashboardPrimitives';
import { dashboardApi } from '../../../lib/api';
import { requireDashboardRoute } from '../../../lib/permissions';

const demoModeEnabled = isDemoModeEnabled({
  demoMode: process.env.NEXT_PUBLIC_DEMO_MODE,
  nodeEnv: process.env.NODE_ENV,
  naviEnv: process.env.NEXT_PUBLIC_NAVI_ENV,
});

export default async function DemoAccess() {
  const gate = await requireDashboardRoute('/demo-access');
  if (!gate.allowed) return <AccessDenied required={gate.required} />;

  const users = (await dashboardApi<Array<Pick<User, 'id' | 'email' | 'fullName' | 'status' | 'createdAt'>>>('/users')) ?? [];
  const demoUsers = users.filter((user) => user.email.endsWith('@navi.demo'));
  const seededEmails = new Set(demoUsers.map((user) => user.email));

  return (
    <div className="stack">
      <PageHeader title="Demo access" eyebrow="Super Admin controlled demo visibility" />

      <div className="card">
        <div className="field-grid">
          <div className="field-card">
            <div className="field-label">Demo mode</div>
            <div className="field-value">
              <StatusBadge value={demoModeEnabled ? 'ENABLED' : 'DISABLED'} />
            </div>
          </div>
          <div className="field-card">
            <div className="field-label">Environment</div>
            <div className="field-value">{process.env.NEXT_PUBLIC_NAVI_ENV ?? process.env.NODE_ENV}</div>
          </div>
          <div className="field-card">
            <div className="field-label">Seeded demo users</div>
            <div className="field-value">{demoUsers.length}</div>
          </div>
        </div>
        <p className="muted" style={{ marginBottom: 0 }}>
          Demo login still uses normal `/v1/auth/login`, dashboard cookies, backend RBAC, and seeded database users.
          It does not mint fake tokens or bypass permissions.
        </p>
      </div>

      <div className="card">
        <h3 style={{ marginTop: 0 }}>Demo accounts</h3>
        {DEMO_LOGIN_ACCOUNTS.length ? (
          <div className="table-wrap">
            <table className="table">
              <thead>
                <tr><th>Role</th><th>Email</th><th>Surfaces</th><th>Seeded</th></tr>
              </thead>
              <tbody>
                {DEMO_LOGIN_ACCOUNTS.map((account) => (
                  <tr key={account.email}>
                    <td><StatusBadge value={account.role} /></td>
                    <td>{account.email}</td>
                    <td>{account.surfaces.join(', ')}</td>
                    <td><StatusBadge value={seededEmails.has(account.email) ? 'YES' : 'NO'} /></td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        ) : (
          <EmptyState title="No demo accounts configured" body="Add accounts through @navi/config before enabling demo login." />
        )}
      </div>
    </div>
  );
}