import { useState, useEffect } from 'react'
import { adminApi } from './api'
import AdminDashboard from './AdminDashboard'
import CohortsView from './CohortsView'
import StudentsView from './StudentsView'
import InstructorsView from './InstructorsView'
import AuditView from './AuditView'
import AccountView from './AccountView'
import LearningView from './LearningView'
import AssessmentsView from './AssessmentsView'
import ClassroomView from './ClassroomView'
import ProgramsView from './ProgramsView'
import NotificationsView from './NotificationsView'
import CurriculumView from './CurriculumView'
import styles from './Admin.module.css'

// Instructor/Admin portal — clearly separate from the student experience (/admin route,
// separate rn_instructor session cookie, separate login). A student session cannot reach any
// of these views or their underlying /api/admin/* routes. Per-person accounts replace Phase
// 2B's single shared ADMIN_PASSWORD — see docs/PHASE3A_IDENTITY_AND_INSTRUCTOR_ACCESS.md.
// Learning/Assessments (Phase 3B) are visible to every instructor role — cohort scoping for a
// plain 'instructor' happens server-side per route, not by hiding the whole tab.
const NAV = [
  { key: 'dashboard', label: 'Dashboard' },
  { key: 'cohorts', label: 'Cohorts' },
  { key: 'students', label: 'Students' },
  { key: 'programs', label: 'Programs' },
  { key: 'curriculum', label: 'Curriculum' },
  { key: 'classroom', label: 'Classroom' },
  { key: 'learning', label: 'Learning' },
  { key: 'assessments', label: 'Assessments' },
  { key: 'notifications', label: 'Notifications', roles: ['owner', 'admin'] },
  { key: 'instructors', label: 'Instructors', roles: ['owner'] },
  { key: 'audit', label: 'Audit', roles: ['owner', 'admin'] },
]

export default function AdminPortal() {
  const [instructor, setInstructor] = useState(null) // null = checking, false = need login, object = signed in
  const [view, setView] = useState('dashboard')

  useEffect(() => {
    adminApi.session().then((r) => setInstructor(r.instructor)).catch(() => setInstructor(false))
  }, [])

  if (instructor === null) return null
  if (!instructor) return <InstructorLogin onLogin={setInstructor} />

  const visibleNav = NAV.filter((item) => !item.roles || item.roles.includes(instructor.role))

  return (
    <div className={styles.wrap}>
      <header className={styles.header}>
        <div className={styles.brand}>⚙ RootNode Admin</div>
        <nav className={styles.nav}>
          {visibleNav.map((item) => (
            <button key={item.key} className={`${styles.navLink} ${view === item.key ? styles.navLinkActive : ''}`} onClick={() => setView(item.key)}>
              {item.label}
            </button>
          ))}
          <button className={`${styles.navLink} ${view === 'account' ? styles.navLinkActive : ''}`} onClick={() => setView('account')}>
            {instructor.display_name}
          </button>
          <button className={styles.navLink} onClick={() => adminApi.logout().then(() => setInstructor(false))}>Sign out</button>
        </nav>
      </header>
      <div className={styles.content}>
        {view === 'dashboard' && <AdminDashboard />}
        {view === 'cohorts' && <CohortsView role={instructor.role} />}
        {view === 'students' && <StudentsView role={instructor.role} />}
        {view === 'programs' && <ProgramsView role={instructor.role} />}
        {view === 'curriculum' && <CurriculumView />}
        {view === 'classroom' && <ClassroomView />}
        {view === 'learning' && <LearningView />}
        {view === 'assessments' && <AssessmentsView role={instructor.role} />}
        {view === 'notifications' && ['owner', 'admin'].includes(instructor.role) && <NotificationsView />}
        {view === 'instructors' && instructor.role === 'owner' && <InstructorsView currentInstructorId={instructor.instructor_id} />}
        {view === 'audit' && ['owner', 'admin'].includes(instructor.role) && <AuditView />}
        {view === 'account' && <AccountView instructor={instructor} />}
      </div>
    </div>
  )
}

function InstructorLogin({ onLogin }) {
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')
  const [error, setError] = useState(null)
  const [busy, setBusy] = useState(false)

  const submit = async (e) => {
    e.preventDefault()
    setBusy(true); setError(null)
    try {
      const { instructor } = await adminApi.login(email, password)
      onLogin(instructor)
    } catch (e) {
      setError(e.message || 'Sign-in failed.')
    } finally {
      setBusy(false)
    }
  }

  return (
    <div className={styles.loginWrap}>
      <form className={styles.loginCard} onSubmit={submit}>
        <div className={styles.brand}>⚙ RootNode Admin</div>
        <p className={styles.subtitle}>Instructor sign-in. Not connected to student accounts.</p>
        {error && <div className={styles.errorBox}>{error}</div>}
        <label className={styles.label}>Email</label>
        <input className={styles.input} type="email" value={email} onChange={(e) => setEmail(e.target.value)} autoFocus autoComplete="username" />
        <label className={styles.label} style={{ marginTop: '0.75rem' }}>Password</label>
        <input className={styles.input} type="password" value={password} onChange={(e) => setPassword(e.target.value)} autoComplete="current-password" />
        <button className={styles.btn} style={{ marginTop: '1.25rem', width: '100%' }} disabled={busy || !email || !password}>
          {busy ? 'Signing in…' : 'Sign in'}
        </button>
      </form>
    </div>
  )
}