'use client'

import { useState } from 'react'
import Link from 'next/link'
import { useParams } from 'next/navigation'
import { acceptInvite } from '@/lib/api/agent'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card'
import { Button } from '@/components/ui/Button'
import { Input } from '@/components/ui/Input'
import { ErrorState } from '@/components/ui/ErrorState'

export default function InvitePage() {
  const params = useParams<{ token: string }>()
  const token = typeof params?.token === 'string' ? params.token : ''

  const [fullName, setFullName] = useState('')
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')
  const [confirm, setConfirm] = useState('')
  const [submitting, setSubmitting] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [done, setDone] = useState<{ email: string; business_name: string | null } | null>(null)

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault()
    setError(null)
    if (!token) {
      setError('This invite link is not valid.')
      return
    }
    if (password.length < 8) {
      setError('Password must be at least 8 characters.')
      return
    }
    if (password !== confirm) {
      setError('Passwords do not match.')
      return
    }
    setSubmitting(true)
    const res = await acceptInvite({ token, full_name: fullName.trim(), email: email.trim(), password })
    setSubmitting(false)
    if (!res.success) {
      setError(res.message)
      return
    }
    setDone({ email: res.data.email, business_name: res.data.business_name })
  }

  if (done) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-950 p-4">
        <Card className="w-full max-w-md">
          <CardContent className="p-6 text-center space-y-3">
            <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Welcome aboard!</h1>
            <p className="text-gray-500 dark:text-gray-400">
              Your account for {done.business_name || 'the business'} is ready.
            </p>
            <Link href="/login">
              <Button className="w-full">Sign in</Button>
            </Link>
          </CardContent>
        </Card>
      </div>
    )
  }

  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-950 p-4">
      <Card className="w-full max-w-md">
        <CardHeader>
          <CardTitle>Join your team</CardTitle>
          <p className="text-sm text-gray-500 dark:text-gray-400">
            You were invited as a stock keeper. Create your own password — nobody else
            will have it.
          </p>
        </CardHeader>
        <CardContent>
          {!token ? (
            <ErrorState message="This invitation link is not valid." />
          ) : (
            <form onSubmit={handleSubmit} className="space-y-4">
              <div>
                <label className="text-sm font-medium" htmlFor="inv-name">Full name</label>
                <Input
                  id="inv-name"
                  value={fullName}
                  onChange={e => setFullName(e.target.value)}
                  placeholder="Jean Mugisha"
                  required
                  maxLength={120}
                />
              </div>
              <div>
                <label className="text-sm font-medium" htmlFor="inv-email">Work email</label>
                <Input
                  id="inv-email"
                  type="email"
                  value={email}
                  onChange={e => setEmail(e.target.value)}
                  placeholder="jean@business.rw"
                  required
                  maxLength={160}
                />
              </div>
              <div>
                <label className="text-sm font-medium" htmlFor="inv-pass">Password</label>
                <Input
                  id="inv-pass"
                  type="password"
                  value={password}
                  onChange={e => setPassword(e.target.value)}
                  required
                  minLength={8}
                  maxLength={72}
                />
              </div>
              <div>
                <label className="text-sm font-medium" htmlFor="inv-confirm">Confirm password</label>
                <Input
                  id="inv-confirm"
                  type="password"
                  value={confirm}
                  onChange={e => setConfirm(e.target.value)}
                  required
                  minLength={8}
                  maxLength={72}
                />
              </div>
              {error && <ErrorState message={error} />}
              <Button type="submit" disabled={submitting} className="w-full">
                {submitting ? 'Creating account…' : 'Create my account'}
              </Button>
            </form>
          )}
        </CardContent>
      </Card>
    </div>
  )
}