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

interface CodeGeneratorModalProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  courseId: string
  sessionId: string
  onCreated: () => void
}

export function CodeGeneratorModal({
  open,
  onOpenChange,
  courseId,
  sessionId,
  onCreated,
}: CodeGeneratorModalProps) {
  const { success, error } = useToast()
  const [mode, setMode] = useState<'auto' | 'custom'>('auto')
  const [customCode, setCustomCode] = useState('')
  const [loading, setLoading] = useState(false)

  const reset = () => {
    setMode('auto')
    setCustomCode('')
    setLoading(false)
  }

  const handleGenerate = async () => {
    setLoading(true)
    try {
      const body = mode === 'auto' ? { auto_generate: true } : { code: customCode }
      await apiFetch(`/api/courses/${courseId}/sessions/${sessionId}/codes`, {
        method: 'POST',
        body: JSON.stringify(body),
      })
      success(mode === 'auto' ? 'Code generated' : 'Code created')
      onCreated()
      onOpenChange(false)
      reset()
    } catch (e) {
      error('Failed to generate code', e instanceof Error ? e.message : 'Unknown error')
    } finally {
      setLoading(false)
    }
  }

  return (
    <Dialog open={open} onOpenChange={onOpenChange} title="Generate Join Code" description="Create a code students can use to join this session.">
      <div className="space-y-4">
        <div className="flex gap-2">
          <button
            onClick={() => setMode('auto')}
            className={`flex-1 rounded-lg border px-3 py-2 text-sm font-medium transition ${
              mode === 'auto'
                ? 'border-ink bg-ink text-white'
                : 'border-line bg-paper text-body hover:bg-cream'
            }`}
          >
            Auto-generate
          </button>
          <button
            onClick={() => setMode('custom')}
            className={`flex-1 rounded-lg border px-3 py-2 text-sm font-medium transition ${
              mode === 'custom'
                ? 'border-ink bg-ink text-white'
                : 'border-line bg-paper text-body hover:bg-cream'
            }`}
          >
            Custom code
          </button>
        </div>

        {mode === 'custom' && (
          <div>
            <label className="mb-1 block text-sm font-medium text-body">Code</label>
            <Input
              placeholder="MATH-101"
              value={customCode}
              onChange={(e) => setCustomCode(e.target.value)}
              maxLength={50}
            />
            <p className="mt-1 text-xs text-body">3-50 characters, letters, numbers, and hyphens only.</p>
          </div>
        )}
      </div>

      <DialogFooter>
        <Button variant="outline" onClick={() => onOpenChange(false)}>
          Cancel
        </Button>
        <Button onClick={handleGenerate} loading={loading}>
          Generate
        </Button>
      </DialogFooter>
    </Dialog>
  )
}