'use client'

import { useEffect, useState } from 'react'
import { getMe, updateProfile } from '@/lib/api/agent'
import { createClient } from '@/lib/supabase/client'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card'
import { Button } from '@/components/ui/Button'
import { Input } from '@/components/ui/Input'
import { Skeleton } from '@/components/ui/Skeleton'
import { ErrorState } from '@/components/ui/ErrorState'
import { useToast } from '@/components/ui/Toast'
import { KeyRound, Save, User } from 'lucide-react'

export default function ProfilePage() {
  const { toast } = useToast()
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)
  const [fullName, setFullName] = useState('')
  const [email, setEmail] = useState('')
  const [originalEmail, setOriginalEmail] = useState('')
  const [password, setPassword] = useState('')
  const [confirm, setConfirm] = useState('')
  const [saving, setSaving] = useState(false)

  useEffect(() => {
    getMe().then(res => {
      if (!res.success) {
        setError(res.message)
        setLoading(false)
        return
      }
      setFullName(res.data.full_name ?? '')
      setEmail(res.data.email ?? '')
      setOriginalEmail(res.data.email ?? '')
      setLoading(false)
    })
  }, [])

  async function handleSave(e: React.FormEvent) {
    e.preventDefault()
    const name = fullName.trim()
    if (!name) {
      toast({ title: 'Full name is required', variant: 'destructive' })
      return
    }
    const payload: { full_name: string; email?: string; password?: string } = {
      full_name: name,
    }
    if (email.trim() && email.trim() !== originalEmail) {
      if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.trim())) {
        toast({ title: 'Enter a valid email address', variant: 'destructive' })
        return
      }
      payload.email = email.trim()
    }
    if (password) {
      if (password.length < 8) {
        toast({ title: 'Password must be at least 8 characters', variant: 'destructive' })
        return
      }
      if (password !== confirm) {
        toast({ title: 'Passwords do not match', variant: 'destructive' })
        return
      }
      payload.password = password
    }

    setSaving(true)
    const res = await updateProfile(payload)
    setSaving(false)
    if (!res.success) {
      toast({ title: res.message, variant: 'destructive' })
      return
    }

    if (payload.full_name) {
      try {
        await createClient().auth.updateUser({ data: { full_name: payload.full_name } })
      } catch {
        /* session metadata is refreshed on next sign-in */
      }
    }
    setPassword('')
    setConfirm('')
    setOriginalEmail(email.trim())
    toast({
      title: 'Profile saved',
      description: 'Your account details are up to date.',
      variant: 'success',
    })
  }

  if (loading) {
    return (
      <div className="space-y-6">
        <Skeleton className="h-10 w-64" />
        <Skeleton className="h-40 w-full" />
      </div>
    )
  }

  if (error) return <ErrorState message={error} />

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-3xl font-bold text-gray-900 dark:text-white">Your Profile</h1>
        <p className="text-gray-500 dark:text-gray-400 mt-1">
          Edit the account details registered for this login.
        </p>
      </div>

      <form onSubmit={handleSave} className="space-y-6">
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2 text-lg">
              <User className="h-5 w-5" /> Account information
            </CardTitle>
          </CardHeader>
          <CardContent className="grid gap-4 md:grid-cols-2">
            <div>
              <label className="text-sm font-medium">Full name</label>
              <Input
                value={fullName}
                onChange={e => setFullName(e.target.value)}
                placeholder="Your name"
                maxLength={120}
              />
            </div>
            <div>
              <label className="text-sm font-medium">Email</label>
              <Input
                value={email}
                onChange={e => setEmail(e.target.value)}
                placeholder="you@example.com"
                maxLength={160}
              />
              <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
                {email !== originalEmail
                  ? 'Your sign-in email will change to this address.'
                  : 'This is the email used to sign in.'}
              </p>
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2 text-lg">
              <KeyRound className="h-5 w-5" /> Change password
            </CardTitle>
          </CardHeader>
          <CardContent className="grid gap-4 md:grid-cols-2">
            <div>
              <label className="text-sm font-medium">New password</label>
              <Input
                type="password"
                value={password}
                onChange={e => setPassword(e.target.value)}
                placeholder="At least 8 characters"
                maxLength={72}
              />
            </div>
            <div>
              <label className="text-sm font-medium">Confirm new password</label>
              <Input
                type="password"
                value={confirm}
                onChange={e => setConfirm(e.target.value)}
                placeholder="Repeat the new password"
                maxLength={72}
              />
            </div>
          </CardContent>
        </Card>

        <div className="flex justify-end">
          <Button type="submit" disabled={saving}>
            <Save className="h-4 w-4 mr-2" />
            {saving ? 'Saving…' : 'Save Changes'}
          </Button>
        </div>
      </form>
    </div>
  )
}