import { useState } from 'react'
import { apiFetch, ApiError } from '../../lib/auth'
import { Button } from '../ui/button'
import { Input } from '../ui/input'
import { useToast } from '../ui/toast'

interface SessionInfoData {
  course_title: string
  instructor_name: string | null
  duration_minutes: number
  allow_anonymous: boolean
}

interface JoinResult {
  participant_id: string
  session_info: SessionInfoData
}

interface JoinCodeInputProps {
  sessionCode: string
  joinMethod?: 'code' | 'link'
  onJoined: (participantId: string) => void
}

export function JoinCodeInput({ sessionCode, joinMethod = 'code', onJoined }: JoinCodeInputProps) {
  const { error: showError } = useToast()
  const [name, setName] = useState('')
  const [requiresName, setRequiresName] = useState(true)
  const [error, setError] = useState<string | null>(null)
  const [loading, setLoading] = useState(false)

  const handleJoin = async () => {
    setError(null)
    setLoading(true)
    try {
      const body = requiresName ? { name, ...(joinMethod === 'code' ? { code: sessionCode } : { session_code: sessionCode }) } : joinMethod === 'code' ? { code: sessionCode } : { session_code: sessionCode }
      const data = await apiFetch<JoinResult>(joinMethod === 'code' ? '/api/join-by-code' : '/api/join-by-link', {
        method: 'POST',
        body: JSON.stringify(body),
      })
      onJoined(data.participant_id)
    } catch (e) {
      if (e instanceof ApiError && e.code === 'NAME_REQUIRED') {
        setRequiresName(true)
        setError('Nama diperlukan untuk bergabung ke session ini.')
      } else if (e instanceof Error) {
        setError(e.message)
        showError('Join failed', e.message)
      }
    } finally {
      setLoading(false)
    }
  }

  return (
    <div className="w-full max-w-sm space-y-4">
      {joinMethod === 'code' && <div>
        <label className="mb-1 block text-sm font-medium text-body">Kode bergabung</label>
        <Input value={sessionCode} readOnly className="text-center font-mono text-lg font-semibold uppercase tracking-widest" />
      </div>}

      {requiresName && (
        <div>
          <label className="mb-1 block text-sm font-medium text-body">Nama peserta</label>
          <Input
            placeholder="Enter your name"
            value={name}
            onChange={(e) => setName(e.target.value)}
            maxLength={255}
          />
          <p className="mt-1 text-xs text-body">Isi nama Anda agar guru dapat mengenali respons Anda.</p>
        </div>
      )}

      {error && (
        <div className="rounded-lg bg-red-soft px-4 py-3 text-sm text-red">{error}</div>
      )}

      <Button className="w-full" onClick={handleJoin} loading={loading}>
        {joinMethod === 'link' ? 'Masuk ke session' : 'Join Session'}
      </Button>
    </div>
  )
}