import { FormEvent, ReactElement, useMemo, useState } from 'react';
import Head from 'next/head';
import Link from 'next/link';
import BaseButton from '../components/BaseButton';
import LayoutGuest from '../layouts/Guest';
import { getPageTitle } from '../config';

type ClassroomMode = 'Live Classroom' | 'AI Exam Hall' | 'Parent Conference' | 'Teacher Studio';
type LanguageMode = 'Arabic + English' | 'English only' | 'Arabic only';
type StorageProfile = 'Google Drive vault' | 'Local encrypted archive' | 'Hybrid mirrored backup';

type ClassroomPlan = {
  id: string;
  name: string;
  supervisor: string;
  mode: ClassroomMode;
  languageMode: LanguageMode;
  storageProfile: StorageProfile;
  learners: number;
  objective: string;
  features: string[];
  createdAt: string;
};

const featureOptions = [
  'AI proctoring',
  'Mediasoup SFU',
  'P2P fallback',
  'Whiteboard canvas',
  'Breakout rooms',
  'Collaborative notes',
  'Live polls',
  'AI copilot',
  'Recording pipeline',
  'Gradebook sync',
];

const modeAccent: Record<ClassroomMode, string> = {
  'Live Classroom': 'from-cyan-300 to-blue-500',
  'AI Exam Hall': 'from-amber-300 to-orange-500',
  'Parent Conference': 'from-emerald-300 to-teal-500',
  'Teacher Studio': 'from-fuchsia-300 to-violet-500',
};

const storageDescriptions: Record<StorageProfile, string> = {
  'Google Drive vault': 'Uploads, recordings, backups, and static assets route to the BritishCE44 Drive vault after OAuth consent.',
  'Local encrypted archive': 'Core services keep encrypted classroom artifacts on HTTPS localhost for offline-first operation.',
  'Hybrid mirrored backup': 'Local PostgreSQL/Redis state remains authoritative while encrypted archives are mirrored to Google Drive.',
};

const starterClassrooms: ClassroomPlan[] = [
  {
    id: 'ce44-room-01',
    name: 'CE44 English Foundation Room 01',
    supervisor: 'Majed Kaid Alsharabi',
    mode: 'Live Classroom',
    languageMode: 'Arabic + English',
    storageProfile: 'Hybrid mirrored backup',
    learners: 32,
    objective: 'Run a bilingual lesson with whiteboard practice, polls, recording, and AI-generated revision notes.',
    features: ['Mediasoup SFU', 'Whiteboard canvas', 'AI copilot', 'Recording pipeline', 'Live polls'],
    createdAt: 'Template',
  },
  {
    id: 'ce44-exam-secure',
    name: 'Secure AI Exam Hall',
    supervisor: 'Academic Admin',
    mode: 'AI Exam Hall',
    languageMode: 'English only',
    storageProfile: 'Google Drive vault',
    learners: 80,
    objective: 'Deliver monitored assessments with AI proctoring, identity checks, and bilingual report exports.',
    features: ['AI proctoring', 'Mediasoup SFU', 'P2P fallback', 'Gradebook sync', 'Recording pipeline'],
    createdAt: 'Template',
  },
];

const deploymentTracks = [
  ['Web App', 'Active control-plane UI for classrooms, LMS planning, admin review, and browser-based collaboration workflows.'],
  ['Windows EXE', 'Packaging track for a local HTTPS server bundle with single consent prompt and offline-ready services.'],
  ['Android APK', 'Mobile classroom track for camera, microphone, Drive consent, learner attendance, and parent access.'],
];

const suiteCards = [
  ['40+ classrooms', 'Pre-modeled digital rooms for live lessons, exams, parent conferences, labs, clubs, and teacher studios.'],
  ['LMS core', 'Courses, assignments, gradebook, AI-graded tests, parent portal, and bilingual Arabic/English reports.'],
  ['AI-native class flow', 'Copilot summaries, proctoring signals, collaborative notes, live polls, and catch-up packs.'],
  ['Hybrid server model', 'HTTPS localhost for WebRTC/API/database with Google Drive for cloud storage, backups, and static assets.'],
  ['Admin-only expansion', 'Tables, sheets, modules, and settings are planned as expandable only by the authorized admin role.'],
  ['Media resilience', 'Mediasoup SFU-first architecture with P2P fallback, low-bandwidth mode, recording, and recovery hooks.'],
];

const buildClassroomId = (name: string) =>
  name
    .toLowerCase()
    .replace(/[^a-z0-9]+/g, '-')
    .replace(/(^-|-$)/g, '')
    .slice(0, 36) || `classroom-${Date.now()}`;

const getCapacityPlan = (learnerCount: number) => {
  if (learnerCount > 180) {
    return 'Cascading SFU district mode';
  }

  if (learnerCount > 40) {
    return 'Mediasoup SFU classroom cluster';
  }

  return 'SFU room with P2P fallback';
};

export default function BritishCE44Platform() {
  const [classrooms, setClassrooms] = useState<ClassroomPlan[]>(starterClassrooms);
  const [selectedClassroomId, setSelectedClassroomId] = useState(starterClassrooms[0].id);
  const [name, setName] = useState('');
  const [supervisor, setSupervisor] = useState('Majed Kaid Alsharabi');
  const [mode, setMode] = useState<ClassroomMode>('Live Classroom');
  const [languageMode, setLanguageMode] = useState<LanguageMode>('Arabic + English');
  const [storageProfile, setStorageProfile] = useState<StorageProfile>('Hybrid mirrored backup');
  const [learners, setLearners] = useState('40');
  const [objective, setObjective] = useState('');
  const [features, setFeatures] = useState<string[]>(['Mediasoup SFU', 'AI copilot', 'Whiteboard canvas']);
  const [formError, setFormError] = useState('');
  const [successMessage, setSuccessMessage] = useState('');

  const selectedClassroom = useMemo(
    () => classrooms.find((classroom) => classroom.id === selectedClassroomId) ?? classrooms[0],
    [classrooms, selectedClassroomId]
  );

  const projectedCapacity = useMemo(() => getCapacityPlan(Number(learners) || 0), [learners]);

  const selectedStorageDescription = storageDescriptions[storageProfile];

  const enabledCount = useMemo(
    () => [
      classrooms.length >= 2,
      featureOptions.length >= 10,
      Boolean(selectedClassroom),
      storageProfile === 'Hybrid mirrored backup',
    ].filter(Boolean).length,
    [classrooms.length, selectedClassroom, storageProfile]
  );

  const toggleFeature = (feature: string) => {
    setFeatures((currentFeatures) =>
      currentFeatures.includes(feature)
        ? currentFeatures.filter((item) => item !== feature)
        : [...currentFeatures, feature]
    );
  };

  const resetForm = () => {
    setName('');
    setSupervisor('Majed Kaid Alsharabi');
    setMode('Live Classroom');
    setLanguageMode('Arabic + English');
    setStorageProfile('Hybrid mirrored backup');
    setLearners('40');
    setObjective('');
    setFeatures(['Mediasoup SFU', 'AI copilot', 'Whiteboard canvas']);
  };

  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    setFormError('');
    setSuccessMessage('');

    const trimmedName = name.trim();
    const trimmedSupervisor = supervisor.trim();
    const trimmedObjective = objective.trim();
    const learnerCount = Number(learners);

    if (trimmedName.length < 3) {
      setFormError('Give the classroom a clear name with at least 3 characters.');
      return;
    }

    if (trimmedSupervisor.length < 2) {
      setFormError('Add the responsible supervisor or teacher for this classroom.');
      return;
    }

    if (!Number.isInteger(learnerCount) || learnerCount < 2 || learnerCount > 1000) {
      setFormError('Expected learners must be a whole number from 2 to 1000.');
      return;
    }

    if (trimmedObjective.length < 16) {
      setFormError('Describe the class objective in at least 16 characters.');
      return;
    }

    if (features.length < 2) {
      setFormError('Select at least two BritishCE44 classroom capabilities.');
      return;
    }

    const baseId = buildClassroomId(trimmedName);
    const id = classrooms.some((classroom) => classroom.id === baseId)
      ? `${baseId}-${classrooms.length + 1}`
      : baseId;
    const createdClassroom: ClassroomPlan = {
      id,
      name: trimmedName,
      supervisor: trimmedSupervisor,
      mode,
      languageMode,
      storageProfile,
      learners: learnerCount,
      objective: trimmedObjective,
      features,
      createdAt: 'Just now',
    };

    setClassrooms((currentClassrooms) => [createdClassroom, ...currentClassrooms]);
    setSelectedClassroomId(id);
    setSuccessMessage(`${trimmedName} is planned as ${projectedCapacity.toLowerCase()} with ${storageProfile.toLowerCase()}.`);
    resetForm();
  };

  const classroomUrl = selectedClassroom ? `https://localhost:3001/britishce44/classrooms/${selectedClassroom.id}` : '';

  return (
    <div className="min-h-screen bg-[#06111F] text-white">
      <Head>
        <title>{getPageTitle('BritishCE44 Enterprise Ultimate Platform')}</title>
        <meta
          name="description"
          content="BritishCE44 Online School RFP interface for an AI-native hybrid classroom platform with WebRTC, LMS, Google Drive storage, and bilingual reporting."
        />
      </Head>

      <header className="sticky top-0 z-30 border-b border-white/10 bg-[#06111F]/90 backdrop-blur-xl">
        <div className="mx-auto flex max-w-7xl items-center justify-between px-5 py-4 lg:px-8">
          <Link href="/" className="group inline-flex items-center gap-3 font-semibold tracking-tight">
            <span className="flex h-11 w-11 items-center justify-center rounded-2xl bg-gradient-to-br from-cyan-300 via-blue-500 to-violet-500 text-sm font-black text-slate-950 shadow-lg shadow-cyan-500/20">
              CE44
            </span>
            <span>
              <span className="block text-lg leading-none">BritishCE44</span>
              <span className="block text-xs font-normal text-cyan-100/60">Enterprise Ultimate Platform</span>
            </span>
          </Link>
          <nav className="hidden items-center gap-6 text-sm text-slate-200 md:flex">
            <a className="hover:text-cyan-200" href="#suite">
              Suite
            </a>
            <a className="hover:text-cyan-200" href="#planner">
              Planner
            </a>
            <a className="hover:text-cyan-200" href="#architecture">
              Architecture
            </a>
            <a className="hover:text-cyan-200" href="#classrooms">
              Classrooms
            </a>
          </nav>
          <BaseButton href="/login" label="Admin login" color="info" roundedFull className="shadow-lg shadow-cyan-500/20" />
        </div>
      </header>

      <main>
        <section className="relative overflow-hidden">
          <div className="absolute left-1/2 top-0 h-[42rem] w-[42rem] -translate-x-1/2 rounded-full bg-cyan-400/20 blur-3xl" />
          <div className="absolute right-0 top-24 h-80 w-80 rounded-full bg-violet-500/20 blur-3xl" />
          <div className="absolute bottom-0 left-10 h-72 w-72 rounded-full bg-emerald-400/10 blur-3xl" />
          <div className="mx-auto grid max-w-7xl gap-10 px-5 py-16 lg:grid-cols-[1.05fr_0.95fr] lg:px-8 lg:py-24">
            <div className="relative z-10 flex flex-col justify-center">
              <div className="mb-6 inline-flex w-fit items-center gap-2 rounded-full border border-cyan-300/30 bg-cyan-300/10 px-4 py-2 text-sm text-cyan-100 shadow-2xl shadow-cyan-950/40">
                <span className="h-2 w-2 rounded-full bg-emerald-300 shadow-[0_0_18px_rgba(110,231,183,0.9)]" />
                RFP demo slice: AI-native online school control plane
              </div>
              <h1 className="max-w-4xl text-5xl font-black tracking-tight text-white md:text-7xl">
                BritishCE44 Online School for secure, bilingual, AI-powered classrooms.
              </h1>
              <p className="mt-6 max-w-2xl text-lg leading-8 text-slate-300">
                A public product surface for the requested BritishCE44 Enterprise Ultimate Platform: 40+ digital
                classrooms, WebRTC collaboration, AI proctoring, LMS workflows, parent reporting, and a hybrid
                localhost plus Google Drive architecture.
              </p>
              <div className="mt-8 flex flex-col gap-3 sm:flex-row">
                <a
                  href="#planner"
                  className="inline-flex items-center justify-center rounded-full bg-cyan-300 px-6 py-3 font-semibold text-slate-950 shadow-xl shadow-cyan-500/20 transition hover:bg-cyan-200 focus:outline-none focus:ring-2 focus:ring-cyan-100"
                >
                  Plan a classroom
                </a>
                <a
                  href="#architecture"
                  className="inline-flex items-center justify-center rounded-full border border-white/15 bg-white/10 px-6 py-3 font-semibold text-white transition hover:bg-white/15 focus:outline-none focus:ring-2 focus:ring-cyan-100"
                >
                  View hybrid architecture
                </a>
              </div>
              <dl className="mt-10 grid max-w-2xl grid-cols-2 gap-3 text-center md:grid-cols-4">
                {[
                  ['40+', 'classrooms'],
                  ['4K', 'WebRTC target'],
                  ['AR/EN', 'reporting'],
                  ['3', 'delivery tracks'],
                ].map(([value, label]) => (
                  <div key={label} className="rounded-3xl border border-white/10 bg-white/[0.06] p-4 backdrop-blur">
                    <dt className="text-2xl font-black text-cyan-100">{value}</dt>
                    <dd className="mt-1 text-xs uppercase tracking-[0.2em] text-slate-400">{label}</dd>
                  </div>
                ))}
              </dl>
            </div>

            <div className="relative z-10 rounded-[2rem] border border-white/10 bg-white/[0.07] p-4 shadow-2xl shadow-black/30 backdrop-blur-2xl">
              <div className="rounded-[1.5rem] bg-[#0B1728] p-4">
                <div className="mb-4 flex items-center justify-between gap-4">
                  <div>
                    <p className="text-sm text-slate-400">Live classroom preview</p>
                    <h2 className="text-xl font-bold">{selectedClassroom?.name}</h2>
                  </div>
                  <span className="rounded-full bg-emerald-300/10 px-3 py-1 text-xs font-semibold text-emerald-200">
                    Supervisor-ready
                  </span>
                </div>
                <div className="grid grid-cols-2 gap-3">
                  {['Teacher video', 'Whiteboard', 'AI copilot', 'Learner pods'].map((tile, index) => (
                    <div
                      key={tile}
                      className={`min-h-32 rounded-3xl border border-white/10 p-4 ${
                        index === 0 ? 'bg-gradient-to-br from-cyan-400/30 to-blue-500/20' : 'bg-white/[0.06]'
                      }`}
                    >
                      <div className="flex h-full flex-col justify-between">
                        <span className="text-xs uppercase tracking-[0.18em] text-slate-300">{tile}</span>
                        <span className="text-3xl font-black text-white/80">0{index + 1}</span>
                      </div>
                    </div>
                  ))}
                </div>
                <div className="mt-4 rounded-3xl border border-cyan-300/20 bg-cyan-300/10 p-4">
                  <p className="text-sm font-semibold text-cyan-100">Hybrid server contract</p>
                  <p className="mt-2 text-sm leading-6 text-slate-300">
                    Core API, WebRTC signaling, database, and real-time state stay on HTTPS localhost. Google Drive is
                    positioned as the consent-based vault for recordings, course materials, static assets, and encrypted backups.
                  </p>
                </div>
                <div className="mt-4 grid grid-cols-3 gap-3 text-center text-xs text-slate-300">
                  {deploymentTracks.map(([title]) => (
                    <div key={title} className="rounded-2xl border border-white/10 bg-slate-950/40 p-3">
                      {title}
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </section>

        <section id="suite" className="mx-auto max-w-7xl px-5 py-8 lg:px-8">
          <div className="mb-6 max-w-3xl">
            <p className="text-sm font-semibold uppercase tracking-[0.25em] text-cyan-200">Education suite</p>
            <h2 className="mt-3 text-4xl font-black tracking-tight md:text-5xl">A Teams, Zoom, Meet, and Jitsi challenger for schools.</h2>
            <p className="mt-4 text-lg leading-8 text-slate-300">
              This interface turns the RFP into a visible roadmap and demo workflow while leaving safe extension points
              for Mediasoup, Redis, PostgreSQL, packaging, Google Drive OAuth, and AI services.
            </p>
          </div>
          <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
            {suiteCards.map(([title, copy]) => (
              <article key={title} className="rounded-[1.75rem] border border-white/10 bg-white/[0.06] p-6 shadow-xl shadow-black/10">
                <div className="mb-5 h-12 w-12 rounded-2xl bg-gradient-to-br from-cyan-300 to-violet-500" />
                <h3 className="text-xl font-bold">{title}</h3>
                <p className="mt-3 leading-7 text-slate-300">{copy}</p>
              </article>
            ))}
          </div>
        </section>

        <section id="planner" className="mx-auto grid max-w-7xl gap-6 px-5 py-12 lg:grid-cols-[0.95fr_1.05fr] lg:px-8">
          <div>
            <p className="text-sm font-semibold uppercase tracking-[0.25em] text-cyan-200">Classroom planner</p>
            <h2 className="mt-3 text-4xl font-black tracking-tight md:text-5xl">Configure a BritishCE44 digital classroom.</h2>
            <p className="mt-4 text-lg leading-8 text-slate-300">
              Choose the room type, bilingual mode, WebRTC/AI features, learner capacity, and the preferred hybrid
              storage profile. The planner validates inputs and adds the classroom to the local demo registry.
            </p>

            <div className="mt-6 rounded-3xl border border-white/10 bg-white/[0.06] p-5">
              <p className="text-sm font-semibold text-slate-200">Selected storage profile</p>
              <p className="mt-2 text-sm leading-6 text-slate-300">{selectedStorageDescription}</p>
              <p className="mt-4 text-sm text-cyan-100">Projected media plan: {projectedCapacity}</p>
            </div>

            {successMessage ? (
              <div className="mt-6 rounded-3xl border border-emerald-300/30 bg-emerald-300/10 p-5 text-emerald-100" role="status">
                <p className="font-semibold">Classroom plan created</p>
                <p className="mt-1 text-sm text-emerald-100/80">{successMessage}</p>
              </div>
            ) : null}
          </div>

          <form onSubmit={handleSubmit} className="rounded-[2rem] border border-white/10 bg-white/[0.08] p-5 shadow-2xl shadow-black/20 backdrop-blur-xl md:p-7">
            {formError ? (
              <div className="mb-5 rounded-2xl border border-rose-300/30 bg-rose-400/10 p-4 text-sm text-rose-100" role="alert">
                {formError}
              </div>
            ) : null}

            <div className="grid gap-4 md:grid-cols-2">
              <label className="block">
                <span className="text-sm font-semibold text-slate-200">Classroom name</span>
                <input
                  value={name}
                  onChange={(event) => setName(event.target.value)}
                  className="mt-2 w-full rounded-2xl border border-white/10 bg-slate-950/60 px-4 py-3 text-white outline-none transition placeholder:text-slate-500 focus:border-cyan-200 focus:ring-2 focus:ring-cyan-200/30"
                  placeholder="CE44 Science Room 12"
                />
              </label>
              <label className="block">
                <span className="text-sm font-semibold text-slate-200">Supervisor / teacher</span>
                <input
                  value={supervisor}
                  onChange={(event) => setSupervisor(event.target.value)}
                  className="mt-2 w-full rounded-2xl border border-white/10 bg-slate-950/60 px-4 py-3 text-white outline-none transition placeholder:text-slate-500 focus:border-cyan-200 focus:ring-2 focus:ring-cyan-200/30"
                  placeholder="Majed Kaid Alsharabi"
                />
              </label>
              <label className="block">
                <span className="text-sm font-semibold text-slate-200">Classroom mode</span>
                <select
                  value={mode}
                  onChange={(event) => setMode(event.target.value as ClassroomMode)}
                  className="mt-2 w-full rounded-2xl border border-white/10 bg-slate-950/60 px-4 py-3 text-white outline-none transition focus:border-cyan-200 focus:ring-2 focus:ring-cyan-200/30"
                >
                  <option>Live Classroom</option>
                  <option>AI Exam Hall</option>
                  <option>Parent Conference</option>
                  <option>Teacher Studio</option>
                </select>
              </label>
              <label className="block">
                <span className="text-sm font-semibold text-slate-200">Language mode</span>
                <select
                  value={languageMode}
                  onChange={(event) => setLanguageMode(event.target.value as LanguageMode)}
                  className="mt-2 w-full rounded-2xl border border-white/10 bg-slate-950/60 px-4 py-3 text-white outline-none transition focus:border-cyan-200 focus:ring-2 focus:ring-cyan-200/30"
                >
                  <option>Arabic + English</option>
                  <option>English only</option>
                  <option>Arabic only</option>
                </select>
              </label>
              <label className="block">
                <span className="text-sm font-semibold text-slate-200">Expected learners</span>
                <input
                  value={learners}
                  onChange={(event) => setLearners(event.target.value)}
                  inputMode="numeric"
                  className="mt-2 w-full rounded-2xl border border-white/10 bg-slate-950/60 px-4 py-3 text-white outline-none transition placeholder:text-slate-500 focus:border-cyan-200 focus:ring-2 focus:ring-cyan-200/30"
                  placeholder="40"
                />
              </label>
              <label className="block">
                <span className="text-sm font-semibold text-slate-200">Storage / backup profile</span>
                <select
                  value={storageProfile}
                  onChange={(event) => setStorageProfile(event.target.value as StorageProfile)}
                  className="mt-2 w-full rounded-2xl border border-white/10 bg-slate-950/60 px-4 py-3 text-white outline-none transition focus:border-cyan-200 focus:ring-2 focus:ring-cyan-200/30"
                >
                  <option>Hybrid mirrored backup</option>
                  <option>Google Drive vault</option>
                  <option>Local encrypted archive</option>
                </select>
              </label>
            </div>

            <label className="mt-4 block">
              <span className="text-sm font-semibold text-slate-200">Learning objective</span>
              <textarea
                value={objective}
                onChange={(event) => setObjective(event.target.value)}
                rows={4}
                className="mt-2 w-full rounded-2xl border border-white/10 bg-slate-950/60 px-4 py-3 text-white outline-none transition placeholder:text-slate-500 focus:border-cyan-200 focus:ring-2 focus:ring-cyan-200/30"
                placeholder="Describe the lesson, assessment, or parent meeting outcome."
              />
            </label>

            <fieldset className="mt-5">
              <legend className="text-sm font-semibold text-slate-200">Enabled classroom capabilities</legend>
              <div className="mt-3 flex flex-wrap gap-2">
                {featureOptions.map((feature) => {
                  const active = features.includes(feature);
                  return (
                    <button
                      key={feature}
                      type="button"
                      onClick={() => toggleFeature(feature)}
                      className={`rounded-full border px-4 py-2 text-sm transition focus:outline-none focus:ring-2 focus:ring-cyan-100 ${
                        active
                          ? 'border-cyan-200 bg-cyan-200 text-slate-950'
                          : 'border-white/10 bg-slate-950/40 text-slate-300 hover:bg-white/10'
                      }`}
                    >
                      {feature}
                    </button>
                  );
                })}
              </div>
            </fieldset>

            <div className="mt-6 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
              <p className="text-sm text-slate-400">No credentials are exposed here; admin password rotation belongs in the protected setup flow.</p>
              <button
                type="submit"
                className="rounded-full bg-emerald-300 px-6 py-3 font-semibold text-slate-950 shadow-xl shadow-emerald-500/20 transition hover:bg-emerald-200 focus:outline-none focus:ring-2 focus:ring-emerald-100"
              >
                Create classroom plan
              </button>
            </div>
          </form>
        </section>

        <section id="architecture" className="mx-auto max-w-7xl px-5 py-12 lg:px-8">
          <div className="rounded-[2rem] border border-white/10 bg-white/[0.07] p-5 shadow-2xl shadow-black/20 md:p-8">
            <div className="grid gap-8 lg:grid-cols-[0.85fr_1.15fr]">
              <div>
                <p className="text-sm font-semibold uppercase tracking-[0.25em] text-cyan-200">Hybrid architecture</p>
                <h2 className="mt-3 text-4xl font-black tracking-tight">Local real-time core plus Google Drive vault.</h2>
                <p className="mt-4 leading-8 text-slate-300">
                  The page now presents the requested deployment model without pretending the full installer stack is already complete.
                  Backend WebRTC, Redis, PostgreSQL, Google Drive OAuth, EXE packaging, and APK packaging remain explicit implementation tracks.
                </p>
              </div>
              <div className="grid gap-3 md:grid-cols-2">
                {[
                  ['HTTPS localhost', 'Core services, WebRTC signaling, API, and the future Mediasoup control plane.'],
                  ['PostgreSQL + Redis', 'Local durable school data, real-time state, meetings, rooms, roles, and event recovery.'],
                  ['Google Drive', 'Consent-based cloud vault for recordings, uploads, course materials, backups, and static assets.'],
                  ['Single consent setup', 'Installer goal: request camera, microphone, and Drive OAuth once, then run without manual npm or env steps.'],
                ].map(([title, copy]) => (
                  <article key={title} className="rounded-3xl border border-white/10 bg-slate-950/35 p-5">
                    <p className="font-bold text-white">{title}</p>
                    <p className="mt-2 text-sm leading-6 text-slate-300">{copy}</p>
                  </article>
                ))}
              </div>
            </div>
          </div>
        </section>

        <section id="classrooms" className="mx-auto grid max-w-7xl gap-6 px-5 py-12 lg:grid-cols-[0.82fr_1.18fr] lg:px-8">
          <div className="rounded-[2rem] border border-white/10 bg-white/[0.08] p-5 shadow-2xl shadow-black/20 md:p-7">
            <div className="mb-5 flex items-start justify-between gap-4">
              <div>
                <p className="text-sm font-semibold uppercase tracking-[0.25em] text-cyan-200">Classroom registry</p>
                <h2 className="mt-1 text-2xl font-black">{classrooms.length} planned spaces</h2>
              </div>
              <span className="rounded-full bg-white/10 px-3 py-1 text-xs text-slate-300">Local demo state</span>
            </div>

            <div className="space-y-3">
              {classrooms.map((classroom) => {
                const active = classroom.id === selectedClassroom?.id;
                return (
                  <button
                    key={classroom.id}
                    type="button"
                    onClick={() => setSelectedClassroomId(classroom.id)}
                    className={`w-full rounded-3xl border p-4 text-left transition focus:outline-none focus:ring-2 focus:ring-cyan-100 ${
                      active ? 'border-cyan-200 bg-cyan-200/10' : 'border-white/10 bg-slate-950/30 hover:bg-white/10'
                    }`}
                  >
                    <div className="flex items-start justify-between gap-4">
                      <div>
                        <p className="font-bold text-white">{classroom.name}</p>
                        <p className="mt-1 text-sm text-slate-400">
                          {classroom.mode} · {classroom.learners} learners · {classroom.createdAt}
                        </p>
                      </div>
                      <span className={`h-10 w-10 shrink-0 rounded-2xl bg-gradient-to-br ${modeAccent[classroom.mode]}`} />
                    </div>
                  </button>
                );
              })}
            </div>
          </div>

          {selectedClassroom ? (
            <article className="rounded-[2rem] border border-white/10 bg-white/[0.08] p-5 shadow-2xl shadow-black/20 md:p-7">
              <div className="flex flex-col gap-5 md:flex-row md:items-start md:justify-between">
                <div>
                  <p className="text-sm font-semibold uppercase tracking-[0.25em] text-cyan-200">Classroom detail</p>
                  <h2 className="mt-2 text-4xl font-black tracking-tight">{selectedClassroom.name}</h2>
                  <p className="mt-3 max-w-2xl leading-7 text-slate-300">{selectedClassroom.objective}</p>
                </div>
                <span className={`h-16 w-16 rounded-3xl bg-gradient-to-br ${modeAccent[selectedClassroom.mode]} shadow-xl shadow-cyan-500/20`} />
              </div>

              <div className="mt-6 grid gap-3 md:grid-cols-3">
                {[
                  ['Supervisor', selectedClassroom.supervisor],
                  ['Language', selectedClassroom.languageMode],
                  ['Capacity plan', getCapacityPlan(selectedClassroom.learners)],
                  ['Mode', selectedClassroom.mode],
                  ['Storage', selectedClassroom.storageProfile],
                  ['Readiness', `${enabledCount}/4 demo checks`],
                ].map(([label, value]) => (
                  <div key={label} className="rounded-3xl border border-white/10 bg-slate-950/35 p-4">
                    <p className="text-xs uppercase tracking-[0.2em] text-slate-500">{label}</p>
                    <p className="mt-2 font-bold text-white">{value}</p>
                  </div>
                ))}
              </div>

              <div className="mt-6 rounded-3xl border border-white/10 bg-slate-950/35 p-4">
                <p className="text-sm font-semibold text-slate-200">Local classroom endpoint preview</p>
                <div className="mt-3 flex flex-col gap-3 rounded-2xl border border-white/10 bg-black/30 p-3 sm:flex-row sm:items-center sm:justify-between">
                  <code className="overflow-x-auto text-sm text-cyan-100">{classroomUrl}</code>
                  <button
                    type="button"
                    onClick={() => setSuccessMessage(`Classroom handoff prepared for ${selectedClassroom.name}.`)}
                    className="rounded-full border border-cyan-200/40 px-4 py-2 text-sm font-semibold text-cyan-100 transition hover:bg-cyan-200/10 focus:outline-none focus:ring-2 focus:ring-cyan-100"
                  >
                    Mark ready for admin review
                  </button>
                </div>
              </div>

              <div className="mt-6">
                <p className="mb-3 text-sm font-semibold text-slate-200">Enabled capabilities</p>
                <div className="flex flex-wrap gap-2">
                  {selectedClassroom.features.map((feature) => (
                    <span key={feature} className="rounded-full bg-white/10 px-4 py-2 text-sm text-slate-200">
                      {feature}
                    </span>
                  ))}
                </div>
              </div>
            </article>
          ) : null}
        </section>

        <section className="mx-auto max-w-7xl px-5 pb-14 lg:px-8">
          <div className="grid gap-4 md:grid-cols-3">
            {deploymentTracks.map(([title, copy]) => (
              <article key={title} className="rounded-[1.75rem] border border-white/10 bg-white/[0.06] p-6">
                <p className="text-sm font-semibold uppercase tracking-[0.22em] text-cyan-200">Delivery track</p>
                <h3 className="mt-2 text-2xl font-black">{title}</h3>
                <p className="mt-3 leading-7 text-slate-300">{copy}</p>
              </article>
            ))}
          </div>
        </section>
      </main>

      <footer className="border-t border-white/10 bg-black/20">
        <div className="mx-auto flex max-w-7xl flex-col gap-3 px-5 py-8 text-sm text-slate-400 md:flex-row md:items-center md:justify-between lg:px-8">
          <p>© 2026 BritishCE44 Online School. Public RFP demo surface for the enterprise classroom platform.</p>
          <div className="flex flex-wrap gap-4">
            <Link className="hover:text-cyan-100" href="/privacy-policy/">
              Privacy Policy
            </Link>
            <Link className="hover:text-cyan-100" href="/terms-of-use/">
              Terms
            </Link>
            <Link className="hover:text-cyan-100" href="/login">
              Admin Login
            </Link>
          </div>
        </div>
      </footer>
    </div>
  );
}

BritishCE44Platform.getLayout = function getLayout(page: ReactElement) {
  return <LayoutGuest>{page}</LayoutGuest>;
};
