// ============================================================
// ADMIN PANEL — shell + access gate.
//
// The legacy admin page has 12+ sub-sections (users, feature flags,
// announcement banner, OIDC, SMTP, AI model management, TTS/STT,
// email templates, AI prompts, site-wide saved encounters, audit
// logs, learning admin). Each is tied to /api/admin/* or
// /api/admin/config endpoints and involves destructive operations
// that need careful UX consideration (role revoke, feature-flag
// toggles hit prod immediately, etc.).
//
// This first commit ships the access gate + a link to the legacy
// admin viewer. Per-section React ports arrive as discrete commits
// once the core React tree has settled.
// ============================================================

import { useQuery } from '@tanstack/react-query';
import { api } from '@/lib/api';
import type { MeOk } from '@/shared/types';

const card = 'rounded-lg border border-border bg-card p-5 space-y-3';
const btnPrimary = 'rounded-md bg-primary text-primary-foreground px-4 py-2 text-sm font-medium';

export default function Admin() {
  const { data: me, isLoading } = useQuery<MeOk>({
    queryKey: ['auth-me'],
    queryFn: () => api.get<MeOk>('/api/auth/me'),
    staleTime: 5 * 60_000,
  });

  if (isLoading) {
    return (
      <div className="max-w-3xl mx-auto p-6">
        <div className="text-sm text-muted-foreground">Checking permissions…</div>
      </div>
    );
  }

  if (me?.user.role !== 'admin') {
    return (
      <div className="max-w-3xl mx-auto p-6">
        <section className={card} data-testid="admin-access-denied">
          <h1 className="text-xl font-semibold">Admin only</h1>
          <p className="text-sm text-muted-foreground">
            This page is restricted to users with the admin role. If you believe this is a mistake,
            contact your site administrator.
          </p>
        </section>
      </div>
    );
  }

  return (
    <div className="max-w-4xl mx-auto p-6 space-y-4">
      <header>
        <h1 className="text-2xl font-semibold">Admin Panel</h1>
        <p className="text-sm text-muted-foreground">
          Registration, users, feature flags, OIDC, email templates, AI prompts, SMTP, saved
          encounters (site-wide), AI model management, TTS/STT provider selection.
        </p>
      </header>

      <section className={card} data-testid="admin-shell">
        <div className="rounded-md border border-amber-300 bg-amber-50 dark:bg-amber-950/30 p-3 text-sm space-y-2">
          <p className="text-amber-900 dark:text-amber-100">
            Admin sub-sections still live in the legacy viewer. Each one (user management, feature
            flags, announcements, OIDC config, SMTP, AI prompts, model management, TTS/STT) touches
            production state immediately when saved — those controls port in discrete follow-up
            commits with their own tests before they go live in the React tree.
          </p>
        </div>
        <a href="/#admin" className={btnPrimary + ' inline-block'}>
          Open admin in legacy viewer
        </a>
      </section>
    </div>
  );
}