import { createFileRoute, useNavigate } from '@tanstack/react-router'
import { useState } from 'react'
import { ApiError, apiFetch } from '../lib/auth'
import { Badge } from '../components/ui/badge'
import { Button } from '../components/ui/button'
import { Card, CardContent, CardHeader, CardTitle } from '../components/ui/card'
import { Input } from '../components/ui/input'
import { Toaster, useToast } from '../components/ui/toast'

export const Route = createFileRoute('/join')({ component: JoinPage })

interface JoinResult {
  participant_id: string
  session_info: {
    course_title: string
    instructor_name: string | null
    duration_minutes: number
    allow_anonymous: boolean
  }
}

function JoinPage() {
  const navigate = useNavigate()
  const { error: showError } = useToast()
  const [code, setCode] = useState('')
  const [name, setName] = useState('')
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)

  const handleJoin = async () => {
    const normalizedCode = code.trim().toUpperCase()
    setError(null)
    if (!normalizedCode) {
      setError('Masukkan kode session dari guru.')
      return
    }
    setLoading(true)
    try {
      const result = await apiFetch<JoinResult>('/api/join-by-code', {
        method: 'POST',
        body: JSON.stringify({ code: normalizedCode, name: name.trim() || undefined }),
      })
      navigate({ to: '/session/$id/status-board', params: { id: result.participant_id } })
    } catch (cause) {
      const message = cause instanceof ApiError && cause.code === 'NAME_REQUIRED'
        ? 'Nama diperlukan untuk mengikuti session ini.'
        : cause instanceof Error ? cause.message : 'Session gagal dimuat.'
      setError(message)
      showError('Belum dapat masuk', message)
    } finally {
      setLoading(false)
    }
  }

  return (
    <div className="min-h-screen bg-cream px-4 py-8 sm:px-6 lg:px-8">
      <main className="mx-auto grid min-h-[calc(100vh-4rem)] w-full max-w-4xl items-center gap-8 lg:grid-cols-[1fr_1.1fr]">
        <section className="hidden lg:block">
          <Badge variant="success">Untuk peserta</Badge>
          <h1 className="mt-5 text-4xl font-bold tracking-tight text-ink">Masuk ke ruang belajar Anda.</h1>
          <p className="mt-4 max-w-md text-base leading-7 text-body">Gunakan kode dari guru untuk memberi tahu kondisi belajar Anda secara cepat dan tenang.</p>
          <div className="mt-8 space-y-4 text-sm text-body">
            <p className="flex gap-3"><span className="font-bold text-clay">01</span><span><strong className="block text-ink">Minta kode session</strong>Guru akan membagikan kode kelas kepada Anda.</span></p>
            <p className="flex gap-3"><span className="font-bold text-clay">02</span><span><strong className="block text-ink">Masukkan kode</strong>Tidak perlu membuat akun peserta.</span></p>
            <p className="flex gap-3"><span className="font-bold text-clay">03</span><span><strong className="block text-ink">Pilih status</strong>Tap Green, Yellow, atau Red sesuai kondisi Anda.</span></p>
          </div>
        </section>

        <Card className="mx-auto w-full max-w-md">
          <CardHeader>
            <p className="text-sm font-semibold text-clay lg:hidden">Untuk peserta</p>
            <CardTitle className="text-2xl">Masuk dengan kode</CardTitle>
            <p className="text-sm leading-6 text-body">Masukkan kode yang diberikan oleh guru untuk bergabung ke session.</p>
          </CardHeader>
          <CardContent className="space-y-5">
            <div>
              <label htmlFor="join-code" className="mb-1.5 block text-sm font-medium text-ink">Kode session</label>
              <Input id="join-code" autoFocus value={code} onChange={(event) => { setCode(event.target.value.toUpperCase()); setError(null) }} placeholder="SIGNAL-ABC-123" className="h-12 text-center font-mono text-lg font-semibold uppercase tracking-wider" maxLength={50} />
               <p className="mt-2 text-xs text-muted">Contoh: SIGNAL-ABC-123</p>
            </div>
            <div>
              <label htmlFor="join-name" className="mb-1.5 block text-sm font-medium text-ink">Nama peserta <span className="font-normal text-muted">(jika diminta)</span></label>
              <Input id="join-name" value={name} onChange={(event) => setName(event.target.value)} placeholder="Nama Anda" maxLength={255} />
            </div>
            {error && <div role="alert" className="rounded-lg bg-red-soft px-3 py-2.5 text-sm text-red">{error}</div>}
            <Button className="h-12 w-full" size="lg" onClick={handleJoin} loading={loading}>Masuk ke session</Button>
            <p className="text-center text-xs leading-5 text-muted">Tidak perlu membuat akun untuk bergabung sebagai peserta.</p>
          </CardContent>
        </Card>
      </main>
      <Toaster />
    </div>
  )
}