import { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { useAuth } from './useAuth'

export const SetupForm = () => {
  const [password, setPassword] = useState('')
  const [confirmPassword, setConfirmPassword] = useState('')
  const [localError, setLocalError] = useState('')
  const { setup, error, isLoading } = useAuth()
  const navigate = useNavigate()

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

    if (password.length < 8) {
      setLocalError('Password must be at least 8 characters long')
      return
    }

    if (password !== confirmPassword) {
      setLocalError('Passwords do not match')
      return
    }

    try {
      await setup({ password })
      navigate('/')
    } catch {
      // Error is handled by the store
    }
  }

  const displayError = localError || error

  return (
    <div className="w-full max-w-md p-10 space-y-8 bg-white/80 dark:bg-gray-800/80 backdrop-blur-2xl rounded-[2rem] shadow-2xl shadow-accent-500/10 border border-white/50 dark:border-gray-700 transition-all">
      <div className="text-center">
        <div className="mx-auto w-16 h-16 bg-gradient-to-br from-accent-400 to-accent-600 rounded-2xl flex items-center justify-center shadow-lg shadow-accent-500/30 mb-6 transform -rotate-6 hover:rotate-0 transition-transform duration-300">
          <svg className="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8V7a4 4 0 00-8 0v4h8z" />
          </svg>
        </div>
        <h2 className="text-4xl font-heading font-bold tracking-tight text-gray-900 dark:text-white mb-2">
          Set up PaperJet
        </h2>
        <p className="text-base text-gray-500 dark:text-gray-400 font-medium">
          Create a master password to secure your documents. Make sure you remember it!
        </p>
      </div>

      <form className="mt-8 space-y-6" onSubmit={handleSubmit}>
        <div className="space-y-4">
          <div>
            <label className="block text-sm font-bold text-gray-700 dark:text-gray-300 mb-2 ml-1">
              Master Password
            </label>
            <input
              type="password"
              required
              className="w-full px-5 py-4 rounded-full border-2 border-transparent bg-white/60 dark:bg-gray-700/60 text-gray-900 dark:text-white focus:bg-white focus:ring-4 focus:ring-accent-500/20 focus:border-accent-400 outline-none transition-all placeholder-gray-400 dark:placeholder-gray-500 shadow-inner text-lg font-medium"
              placeholder="••••••••"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              disabled={isLoading}
            />
          </div>
          <div>
            <label className="block text-sm font-bold text-gray-700 dark:text-gray-300 mb-2 ml-1">
              Confirm Password
            </label>
            <input
              type="password"
              required
              className="w-full px-5 py-4 rounded-full border-2 border-transparent bg-white/60 dark:bg-gray-700/60 text-gray-900 dark:text-white focus:bg-white focus:ring-4 focus:ring-accent-500/20 focus:border-accent-400 outline-none transition-all placeholder-gray-400 dark:placeholder-gray-500 shadow-inner text-lg font-medium"
              placeholder="••••••••"
              value={confirmPassword}
              onChange={(e) => setConfirmPassword(e.target.value)}
              disabled={isLoading}
            />
          </div>
        </div>

        {displayError && (
          <div className="p-4 text-sm font-semibold text-red-600 bg-red-50 dark:bg-red-900/30 dark:text-red-400 rounded-2xl animate-in fade-in slide-in-from-top-2 border border-red-100 dark:border-red-800/50">
            {displayError}
          </div>
        )}

        <button
          type="submit"
          disabled={isLoading || !password || !confirmPassword}
          className="w-full flex justify-center py-4 px-6 border-2 border-transparent rounded-full shadow-lg text-lg font-bold text-white bg-gradient-to-r from-accent-500 to-accent-600 hover:from-accent-600 hover:to-accent-700 focus:outline-none focus:ring-4 focus:ring-accent-500/30 disabled:opacity-50 disabled:cursor-not-allowed transition-all active:scale-[0.98] hover:-translate-y-0.5"
        >
          {isLoading ? (
            <svg className="animate-spin -ml-1 mr-3 h-6 w-6 text-white" fill="none" viewBox="0 0 24 24">
              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
              <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
            </svg>
          ) : (
            'Complete Setup'
          )}
        </button>
      </form>
    </div>
  )
}