import { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { useAuthStore } from '@/store/authStore'
import { authApi } from '@/api/auth'
import { toast } from '@/lib/toast'
import { PasswordInput } from '@/components/common/PasswordInput'
import { BrandLogo } from '@/components/common/BrandLogo'
import { cn } from '@/lib/utils'

export function ChangePasswordPage() {
  const navigate = useNavigate()
  const { user, logout } = useAuthStore()
  const isForced = user?.must_change_password ?? false

  const [currentPassword, setCurrentPassword] = useState('')
  const [newPassword, setNewPassword] = useState('')
  const [confirmPassword, setConfirmPassword] = useState('')
  const [isLoading, setIsLoading] = useState(false)
  const [error, setError] = useState('')

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setError('')

    if (!currentPassword || !newPassword || !confirmPassword) {
      setError('Please fill in all fields')
      return
    }

    if (newPassword !== confirmPassword) {
      setError('New passwords do not match')
      return
    }

    if (newPassword.length < 10) {
      setError('Password must be at least 10 characters')
      return
    }

    setIsLoading(true)
    try {
      await authApi.changePassword(currentPassword, newPassword)
      toast.success('Password changed successfully. Please sign in again.')
      await logout()
      navigate('/login', { replace: true })
    } catch (err: unknown) {
      if (err && typeof err === 'object' && 'response' in err) {
        const axiosErr = err as { response?: { data?: { detail?: string } } }
        setError(axiosErr.response?.data?.detail || 'Failed to change password')
      } else {
        setError('Failed to change password')
      }
    } finally {
      setIsLoading(false)
    }
  }

  return (
    <div className="flex min-h-screen items-center justify-center bg-black px-4">
      <div className="pointer-events-none fixed inset-0 bg-[radial-gradient(circle_at_50%_0%,rgba(100,100,120,0.03),transparent_50%)]" />

      <div className="relative w-full max-w-md space-y-8">
        <div className="text-center">
          <div className="mb-4 flex justify-center sm:mb-6">
            <div className="w-16 h-16 rounded-2xl bg-white flex items-center justify-center sm:w-20 sm:h-20">
              <BrandLogo size="lg" className="h-10 w-10 invert sm:h-12 sm:w-12" />
            </div>
          </div>
          <h1 className="text-3xl font-bold font-heading text-foreground tracking-tight">
            Change Password
          </h1>
          {isForced && (
            <div className="mt-4 rounded-xl border border-yellow-400/20 bg-yellow-400/10 p-3 text-sm text-yellow-400">
              You must change your password before continuing.
            </div>
          )}
        </div>

        <form onSubmit={handleSubmit} className="mt-8 space-y-6">
          <div className="bg-card border border-border rounded-xl p-6 space-y-4">
            {error && (
              <div className="rounded-xl border border-red-400/20 bg-red-400/10 p-3 text-sm text-red-400">
                {error}
              </div>
            )}

            <div>
              <label htmlFor="current-password" className="mb-1 block text-sm font-medium text-foreground">
                Current Password
              </label>
              <PasswordInput
                id="current-password"
                autoComplete="current-password"
                required
                value={currentPassword}
                onChange={(e) => setCurrentPassword(e.target.value)}
                className={cn(
                  'block w-full rounded-xl border border-border bg-card px-3 py-2',
                  'text-foreground placeholder:text-muted-foreground',
                  'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20',
                  'transition-colors'
                )}
              />
            </div>

            <div>
              <label htmlFor="new-password" className="mb-1 block text-sm font-medium text-foreground">
                New Password
              </label>
              <PasswordInput
                id="new-password"
                autoComplete="new-password"
                required
                value={newPassword}
                onChange={(e) => setNewPassword(e.target.value)}
                className={cn(
                  'block w-full rounded-xl border border-border bg-card px-3 py-2',
                  'text-foreground placeholder:text-muted-foreground',
                  'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20',
                  'transition-colors'
                )}
                placeholder="At least 10 characters"
              />
              <p className="mt-1 text-xs text-muted-foreground">
                Must include uppercase, lowercase, and a digit.
              </p>
            </div>

            <div>
              <label htmlFor="confirm-password" className="mb-1 block text-sm font-medium text-foreground">
                Confirm New Password
              </label>
              <PasswordInput
                id="confirm-password"
                autoComplete="new-password"
                required
                value={confirmPassword}
                onChange={(e) => setConfirmPassword(e.target.value)}
                className={cn(
                  'block w-full rounded-xl border border-border bg-card px-3 py-2',
                  'text-foreground placeholder:text-muted-foreground',
                  'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20',
                  'transition-colors'
                )}
              />
            </div>

            <button
              type="submit"
              disabled={isLoading}
              className={cn(
                'w-full rounded-xl px-4 py-2.5 text-sm font-semibold btn-press',
                'bg-gradient-brand text-white shadow-lg shadow-primary/20 hover:opacity-90',
                'focus:outline-none focus:ring-2 focus:ring-primary/30 focus:ring-offset-2 focus:ring-offset-black',
                'disabled:cursor-not-allowed disabled:opacity-50',
                'transition-all'
              )}
            >
              {isLoading ? 'Changing password...' : 'Change Password'}
            </button>
          </div>
        </form>
      </div>
    </div>
  )
}

export default ChangePasswordPage