'use client'

import { useState, useTransition } from 'react'
import { Button, Card } from '@/components/ui'
import { loginParent, loginStudent } from '../actions'

export function LoginForms({
  students,
}: {
  students: { slug: string; name: string }[]
}) {
  const [mode, setMode] = useState<'student' | 'parent'>('student')
  const [error, setError] = useState<string | null>(null)
  const [pending, start] = useTransition()

  function submit(action: (fd: FormData) => Promise<{ error?: string } | void>) {
    return (formData: FormData) => {
      setError(null)
      start(async () => {
        const result = await action(formData)
        if (result && 'error' in result && result.error) setError(result.error)
      })
    }
  }

  return (
    <div className="space-y-4">
      {mode === 'student' ? (
        <Card>
          <form action={submit(loginStudent)} className="space-y-4">
            <div className="space-y-2">
              <label className="block text-sm font-medium">Who are you?</label>
              <div className="grid gap-2">
                {students.map((s) => (
                  <label
                    key={s.slug}
                    className="flex cursor-pointer items-center gap-3 rounded-lg border border-[var(--color-line)] px-3 py-2.5 text-sm has-checked:border-[var(--color-accent)] has-checked:bg-[var(--color-accent-soft)]"
                  >
                    <input
                      type="radio"
                      name="slug"
                      value={s.slug}
                      required
                      className="accent-[var(--color-accent)]"
                    />
                    {s.name}
                  </label>
                ))}
              </div>
            </div>
            <div className="space-y-1.5">
              <label htmlFor="passcode" className="block text-sm font-medium">
                Passcode
              </label>
              <input
                id="passcode"
                name="passcode"
                type="password"
                required
                autoComplete="off"
                className="w-full rounded-lg border border-[var(--color-line)] bg-white px-3 py-2 text-base outline-none focus:border-[var(--color-accent)]"
              />
            </div>
            {error && <p className="text-sm text-[#9b3232]">{error}</p>}
            <Button type="submit" disabled={pending} className="w-full">
              {pending ? 'Checking…' : 'Start'}
            </Button>
          </form>
        </Card>
      ) : (
        <Card>
          <form action={submit(loginParent)} className="space-y-4">
            <div className="space-y-1.5">
              <label htmlFor="email" className="block text-sm font-medium">
                Email
              </label>
              <input
                id="email"
                name="email"
                type="email"
                required
                autoComplete="username"
                className="w-full rounded-lg border border-[var(--color-line)] bg-white px-3 py-2 text-base outline-none focus:border-[var(--color-accent)]"
              />
            </div>
            <div className="space-y-1.5">
              <label htmlFor="password" className="block text-sm font-medium">
                Password
              </label>
              <input
                id="password"
                name="password"
                type="password"
                required
                autoComplete="current-password"
                className="w-full rounded-lg border border-[var(--color-line)] bg-white px-3 py-2 text-base outline-none focus:border-[var(--color-accent)]"
              />
            </div>
            {error && <p className="text-sm text-[#9b3232]">{error}</p>}
            <Button type="submit" disabled={pending} className="w-full">
              {pending ? 'Checking…' : 'Sign in'}
            </Button>
          </form>
        </Card>
      )}

      <button
        type="button"
        onClick={() => {
          setError(null)
          setMode(mode === 'student' ? 'parent' : 'student')
        }}
        className="w-full text-center text-xs text-[var(--color-muted)] hover:text-[var(--color-ink)]"
      >
        {mode === 'student' ? "I'm a parent" : "I'm one of the boys"}
      </button>
    </div>
  )
}