'use client'

import { useState } from 'react'
import Link from 'next/link'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'

const ROLES = [
  { value: 'broker', label: 'Broker', desc: 'I book oversize loads and need visibility' },
  { value: 'carrier', label: 'Carrier / Dispatcher', desc: 'I run trucks and manage permits' },
  { value: 'driver', label: 'Driver', desc: 'I haul the loads' },
]

/**
 * Create-account page. During the pilot, submissions are captured as account
 * requests (stored via the early-access endpoint) and activated by the team —
 * self-serve activation arrives with account management.
 */
export default function SignupPage() {
  const [role, setRole] = useState('broker')
  const [email, setEmail] = useState('')
  const [company, setCompany] = useState('')
  const [state, setState] = useState<'idle' | 'sending' | 'done' | 'error'>('idle')
  const [message, setMessage] = useState('')

  async function submit(e: React.FormEvent) {
    e.preventDefault()
    if (state === 'sending') return
    setState('sending')
    try {
      const res = await fetch('/api/early-access', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email, role, source: company ? `signup · ${company}` : 'signup' }),
      })
      const json = await res.json().catch(() => ({}))
      if (res.ok) {
        setState('done')
        setMessage(json.message ?? '')
      } else {
        setState('error')
        setMessage(json.error ?? 'Something went wrong — please try again.')
      }
    } catch {
      setState('error')
      setMessage('Network error — please try again.')
    }
  }

  return (
    <main className="flex min-h-screen items-center justify-center bg-neutral-50 p-4">
      <Card className="w-full max-w-md">
        <CardHeader className="text-center">
          <div className="mx-auto mb-2 grid h-11 w-11 place-items-center rounded-xl bg-[#0f1b2d] text-lg font-extrabold text-[#f5a623]">
            H
          </div>
          <CardTitle className="text-xl">Create your account</CardTitle>
          <CardDescription>
            Brokers automatically receive a personal intake page.
          </CardDescription>
        </CardHeader>
        <CardContent>
          {state === 'done' ? (
            <div className="space-y-4 text-center">
              <p className="rounded-xl border border-green-200 bg-green-50 p-5 text-sm text-green-800">
                ✓ Request received! During the pilot, our team activates accounts personally —
                we&apos;ll email you your credentials shortly.
              </p>
              <Link href="/login" className="inline-block text-sm font-semibold underline">
                Back to sign in
              </Link>
            </div>
          ) : (
            <form onSubmit={submit} className="space-y-4">
              <div className="space-y-2">
                <Label>I am a…</Label>
                <div className="grid gap-2">
                  {ROLES.map((r) => (
                    <button
                      key={r.value}
                      type="button"
                      onClick={() => setRole(r.value)}
                      className={`rounded-xl border p-3 text-left transition ${
                        role === r.value
                          ? 'border-[#0f1b2d] bg-[#0f1b2d] text-white'
                          : 'hover:border-neutral-400'
                      }`}
                    >
                      <p className="text-sm font-bold">{r.label}</p>
                      <p className={`text-xs ${role === r.value ? 'text-neutral-300' : 'text-neutral-500'}`}>
                        {r.desc}
                      </p>
                    </button>
                  ))}
                </div>
              </div>
              <div className="space-y-2">
                <Label htmlFor="su-company">Company name</Label>
                <Input
                  id="su-company"
                  value={company}
                  onChange={(e) => setCompany(e.target.value)}
                  placeholder="Your company"
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="su-email">Work email</Label>
                <Input
                  id="su-email"
                  type="email"
                  required
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  placeholder="you@company.com"
                />
              </div>
              {state === 'error' && <p className="text-sm font-medium text-red-600">{message}</p>}
              <Button type="submit" className="w-full" disabled={state === 'sending'}>
                {state === 'sending' ? 'Submitting…' : 'Create account'}
              </Button>
              <p className="text-center text-xs text-neutral-500">
                Pilot phase: our team activates accounts personally and emails your credentials.
              </p>
              <p className="text-center text-sm text-neutral-500">
                Already have an account?{' '}
                <Link href="/login" className="font-medium text-neutral-900 underline">
                  Sign in
                </Link>
              </p>
            </form>
          )}
        </CardContent>
      </Card>
    </main>
  )
}