function OverviewScreen({ dataset, checkedIn, onNavigate, onRunCheckIn }) {
  return (
    <div className="stack" data-screen-label="Platform Overview">
      <Card className="hero-panel">
        <div>
          <div className="section-label">CampusOS-first sales story</div>
          <h1 className="hero-title">A shared OVO Core powering academic attendance, workforce operations, and future products.</h1>
          <p className="muted">
            This prototype follows one live {dataset.course} session from setup to student check-in, lecturer monitoring,
            leadership analytics, Core security evidence, and Workforce integration.
          </p>
          <div className="row" style={{ marginTop: 20, flexWrap: "wrap" }}>
            <Button onClick={() => onNavigate("admin")}>Start admin setup</Button>
            <Button tone="success" onClick={onRunCheckIn}>{checkedIn ? "Check-in complete" : "Run student check-in"}</Button>
            <GhostButton onClick={() => onNavigate("workforce")}>Preview Workforce</GhostButton>
          </div>
        </div>
        <div className="ecosystem-map">
          <div className="product-node core">
            <strong>OVO Core Platform</strong>
            <div>Identity, tenancy, device binding, attendance engine, APIs</div>
          </div>
          <div className="product-node">
            <Badge tone="teal">Primary</Badge>
            <h3>OVO CampusOS</h3>
            <p className="muted">University attendance, eligibility, dashboards, analytics.</p>
          </div>
          <div className="product-node">
            <Badge tone="purple">Independent</Badge>
            <h3>OVO Workforce</h3>
            <p className="muted">Employee attendance and shifts for any organisation.</p>
          </div>
        </div>
      </Card>
      <div className="grid metric-grid">
        <MetricCard label="Active Sessions" value="24" detail="Across 8 faculties" tone="teal" chip="Live" />
        <MetricCard label="Present Today" value={checkedIn ? "4,288" : "4,287"} detail="72.6% of expected" tone="green" chip="Updated" />
        <MetricCard label="Eligibility" value="89.3%" detail={dataset.eligibilityRule} tone="gold" chip="Policy" />
        <MetricCard label="Verified Devices" value="5,980" detail="StrongBox / TEE tracked" tone="blue" chip="Secure" />
      </div>
      <div className="grid two-col">
        <Card className="card-pad">
          <h2>Connected demo path</h2>
          <Timeline items={[
            { title: "Admin configures data", detail: "Students, lecturers, courses, timetable, venue, and attendance rules." },
            { title: "Lecturer starts session", detail: `${dataset.lecturer} opens ${dataset.course} at ${dataset.venue}.` },
            { title: "Student checks in", detail: "Token, enrolment, device signature, GPS, and nonce pass validation." },
            { title: "Leadership sees impact", detail: "Same session rolls up to department, faculty, and university analytics." }
          ]} />
        </Card>
        <Card className="card-pad">
          <h2>Role and terminal strategy</h2>
          <div className="role-pills">
            {["Student mobile", "Lecturer mobile + web", "HOD web", "Dean web", "VC web", "Admin web", "Super Admin web", "Workforce mobile + web"].map((label, index) => (
              <span className={`role-pill ${index < 2 ? "active" : ""}`} key={label}>{label}</span>
            ))}
          </div>
          <p className="muted">Students and employees use mobile-first flows. Admins and leadership use web-first dashboards.</p>
        </Card>
      </div>
    </div>
  );
}

function AdminScreen({ dataset, checkedIn }) {
  const importRows = [
    ["Students.csv", "5,980 rows", "Validated", <Badge tone="green">Ready</Badge>],
    ["Lecturers.xlsx", "312 rows", "2 warnings", <Badge tone="gold">Review</Badge>],
    ["Timetable.xlsx", "742 rows", "Validated", <Badge tone="green">Ready</Badge>],
    ["Venues.csv", "86 rows", "Geofence required", <Badge tone="blue">Map</Badge>]
  ];
  const webPortal = (
    <div className="stack">
      <div>
        <div className="section-label">University Admin Web Portal</div>
        <h1 className="page-title">Configure the tenant before attendance begins</h1>
        <p className="muted">Full administration stays on the web: imports, academic setup, venue policies, and system rules.</p>
      </div>
      <div className="grid dashboard-grid">
        <Card className="card-pad">
          <h2>Bulk import centre</h2>
          <DataTable columns={["Template", "Records", "Validation", "State"]} rows={importRows} />
        </Card>
        <Card className="card-pad">
          <h2>Rule configuration</h2>
          <div className="device-list">
            <div className="device-row"><strong>Eligibility threshold</strong><Badge tone="gold">{dataset.eligibilityRule}</Badge></div>
            <div className="device-row"><strong>GPS radius</strong><Badge tone="teal">60m venue default</Badge></div>
            <div className="device-row"><strong>Session window</strong><Badge tone="blue">10 min grace</Badge></div>
            <div className="device-row"><strong>Offline queue</strong><Badge tone="green">Authorised token only</Badge></div>
          </div>
        </Card>
      </div>
      <div className="grid three-col">
        <Card className="card-pad"><Badge tone="teal">Tenant</Badge><h3>{dataset.tenant}</h3><p className="muted">{dataset.academicYear}</p></Card>
        <Card className="card-pad"><Badge tone="blue">Academic setup</Badge><h3>{dataset.faculty}</h3><p className="muted">{dataset.department}, {dataset.course}</p></Card>
        <Card className="card-pad"><Badge tone="green">Venue</Badge><h3>{dataset.venue}</h3><p className="muted">Geofence and optional WiFi policy prepared.</p></Card>
      </div>
    </div>
  );
  const mobileApp = (
    <CampusMobileApp
      dataset={dataset}
      checkedIn={checkedIn}
      initialRole="admin"
    />
  );
  return (
    <SurfaceSwitcher
      defaultSurface="web"
      screenLabel="CampusOS Admin Portal"
      surfaces={[
        {
          key: "web",
          label: "Web Portal",
          title: "Admin Web Portal",
          description: "Primary workspace for tenant setup, bulk imports, rules, and venue configuration.",
          render: () => webPortal
        },
        {
          key: "mobile",
          label: "Mobile App",
          title: "Admin Mobile App",
          description: "Quick monitoring, approvals, notifications, and alerts only.",
          panelClassName: "mobile-surface",
          render: () => mobileApp
        }
      ]}
    />
  );
}

function LecturerScreen({ dataset, checkedIn, onRunCheckIn }) {
  const studentRows = dataset.students.map((studentItem) => {
    const isDemoStudent = studentItem.id === "ademola";
    const studentState = isDemoStudent && checkedIn ? "Present" : studentItem.base;
    const checkTime = studentState === "Present" ? (isDemoStudent ? "10:02 AM" : "10:01 AM") : "-";
    return [
      studentItem.name,
      studentItem.matric,
      <Badge tone={studentState === "Present" ? "green" : studentState === "Absent" ? "red" : "gold"}>{studentState}</Badge>,
      checkTime,
      studentItem.device
    ];
  });
  const webPortal = (
    <div className="stack">
      <div>
        <div className="section-label">Lecturer Web Portal</div>
        <h1 className="page-title">{dataset.course} live attendance</h1>
        <p className="muted">{dataset.lecturer} · {dataset.venue} · {dataset.sessionTime}</p>
      </div>
      <div className="grid metric-grid">
        <MetricCard label="Present" value={checkedIn ? "79" : "78"} detail="Students checked in" tone="green" chip="Live" />
        <MetricCard label="Absent" value={checkedIn ? "11" : "12"} detail="Expected but missing" tone="red" chip="Live" />
        <MetricCard label="Progress" value={checkedIn ? "88%" : "87%"} detail="Session completion" tone="teal" chip="Now" />
        <MetricCard label="Manual" value="1" detail="No smartphone" tone="gold" chip="Allowed" />
      </div>
      <Card className="card-pad">
        <div className="row" style={{ justifyContent: "space-between" }}>
          <h2>Live student list</h2>
          <Button tone="success" onClick={onRunCheckIn}>Simulate Ademola check-in</Button>
        </div>
        <DataTable columns={["Student", "Matric No.", "Status", "Checked In", "Device"]} rows={studentRows} />
      </Card>
    </div>
  );
  const mobileApp = (
    <CampusMobileApp
      dataset={dataset}
      checkedIn={checkedIn}
      initialRole="lecturer"
      onRunCheckIn={onRunCheckIn}
    />
  );
  return (
    <SurfaceSwitcher
      defaultSurface="web"
      screenLabel="Lecturer Live Attendance"
      surfaces={[
        {
          key: "web",
          label: "Web Portal",
          title: "Lecturer Web Portal",
          description: "Table-first view for monitoring the full class roster and attendance state.",
          render: () => webPortal
        },
        {
          key: "mobile",
          label: "Mobile App",
          title: "Lecturer Mobile App",
          description: "Session control, live roster, manual exception, alerts, and class report.",
          panelClassName: "mobile-surface",
          render: () => mobileApp
        }
      ]}
    />
  );
}

function StudentScreen({ dataset, checkedIn, onRunCheckIn }) {
  const webContext = (
    <div className="stack">
      <div>
        <div className="section-label">Student Validation Context</div>
        <h1 className="page-title">Mobile access is determined by the authenticated account</h1>
        <p className="muted">The student app starts at login, then only exposes the permissions attached to that account.</p>
      </div>
      <Card className="card-pad">
        <h2>Student attendance validation</h2>
        <ValidationChecklist checkedIn={checkedIn} />
      </Card>
      <Card className="card-pad">
        <h2>Mobile PRD coverage</h2>
        <DataTable columns={["Role", "Shown in app", "Backend dependency"]} rows={[
          ["Student account", "Home, timetable, authorised check-in, attendance history, profile/device trust", "Auth, RBAC, attendance token, enrolment, device signature, location, nonce"],
          ["Lecturer account", "Open session, live roster, manual exception, alerts", "Auth, RBAC, timetable, realtime events, attendance state machine"],
          ["Admin account", "Dashboards, approvals, monitoring, alerts", "Auth, RBAC; Web remains primary source of full administration"]
        ]} />
      </Card>
      <Card className="card-pad">
        <h2>Attendance history</h2>
        <DataTable columns={["Course", "Last Session", "Attendance", "Eligibility"]} rows={[
          [dataset.courseCode, checkedIn ? "Present at 10:02 AM" : "Pending", `${checkedIn ? 75 : 74}%`, <Badge tone={checkedIn ? "green" : "gold"}>{checkedIn ? "Eligible" : "At risk"}</Badge>],
          ["MTH 101", "Present", "91%", <Badge tone="green">Eligible</Badge>],
          ["PHY 201", "Absent", "63%", <Badge tone="red">Not eligible</Badge>]
        ]} />
      </Card>
    </div>
  );
  const mobileApp = (
    <CampusMobileApp
      dataset={dataset}
      checkedIn={checkedIn}
      initialRole="student"
      onRunCheckIn={onRunCheckIn}
    />
  );
  return (
    <SurfaceSwitcher
      defaultSurface="mobile"
      screenLabel="Student Mobile Flow"
      surfaces={[
        {
          key: "context",
          label: "PRD Context",
          title: "Student Validation Context",
          description: "Rule, security, and data dependencies behind the mobile check-in flow.",
          render: () => webContext
        },
        {
          key: "mobile",
          label: "Mobile App",
          title: "Student Mobile App",
          description: "Login, timetable, authorised check-in, attendance history, and device trust.",
          panelClassName: "mobile-surface",
          render: () => mobileApp
        }
      ]}
    />
  );
}

function LeadershipScreen({ dataset, checkedIn }) {
  return (
    <div className="stack" data-screen-label="Leadership Dashboards">
      <div>
        <div className="section-label">HOD / Dean / VC Web Dashboards</div>
        <h1 className="page-title">The same session rolls up to academic leadership</h1>
      </div>
      <div className="grid metric-grid">
        <MetricCard label="University attendance" value={checkedIn ? "84.1%" : "84.0%"} detail="Today across faculties" tone="teal" chip="Trend" />
        <MetricCard label="Eligible students" value={checkedIn ? "5,343" : "5,342"} detail="After CSC 201 update" tone="green" chip="Updated" />
        <MetricCard label="Risk alerts" value={checkedIn ? "17" : "18"} detail="Course and student risks" tone="gold" chip="Review" />
        <MetricCard label="Active sessions" value="24" detail="Live now" tone="blue" chip="Live" />
      </div>
      <div className="grid dashboard-grid">
        <Card className="card-pad">
          <h2>Faculty comparison</h2>
          <DataTable columns={["Faculty", "Attendance", "Eligibility", "Risk"]} rows={dataset.faculties.map((facultyItem) => [
            facultyItem.name,
            `${facultyItem.attendance}%`,
            `${facultyItem.eligible}%`,
            <Badge tone={facultyItem.risk === "High" ? "red" : facultyItem.risk === "Medium" ? "gold" : "green"}>{facultyItem.risk}</Badge>
          ])} />
        </Card>
        <Card className="card-pad">
          <h2>{dataset.department} drill-down</h2>
          <MiniChart values={[62, 70, 66, 78, 72, checkedIn ? 88 : 82, 84, 90]} />
          <p className="muted">CSC 201 improves when Ademola's verified check-in is accepted.</p>
          <ProgressBar value={checkedIn ? 75 : 74} />
        </Card>
      </div>
    </div>
  );
}

Object.assign(window, {
  OverviewScreen,
  AdminScreen,
  LecturerScreen,
  StudentScreen,
  LeadershipScreen
});