'use client'

import { useState } from 'react'
import { createClient } from '@/lib/supabase/client'

export default function ChangePasswordForm() {
  const [current, setCurrent] = useState('')
  const [newPass, setNewPass] = useState('')
  const [confirm, setConfirm] = useState('')
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [success, setSuccess] = useState(false)

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setError(null)
    setSuccess(false)

    // Client-side validation
    if (!current || !newPass || !confirm) {
      setError('All fields are required.')
      return
    }
    if (newPass.length < 8) {
      setError('Password must be at least 8 characters.')
      return
    }
    if (newPass !== confirm) {
      setError('Passwords do not match.')
      return
    }
    if (newPass === current) {
      setError('New password must differ from current password.')
      return
    }

    setLoading(true)
    const supabase = createClient()

    // Get current user email for re-auth
    const { data: { user } } = await supabase.auth.getUser()
    if (!user?.email) {
      setError('Session expired, please log in again.')
      setLoading(false)
      return
    }

    // Re-authenticate with current password
    const { error: reauthError } = await supabase.auth.signInWithPassword({
      email: user.email,
      password: current,
    })
    if (reauthError) {
      setError('Current password is incorrect.')
      setLoading(false)
      return
    }

    // Update to new password
    const { error: updateError } = await supabase.auth.updateUser({ password: newPass })
    if (updateError) {
      setError(updateError.message)
      setLoading(false)
      return
    }

    setCurrent('')
    setNewPass('')
    setConfirm('')
    setSuccess(true)
    setLoading(false)
  }

  return (
    <div className="bg-white rounded-xl shadow-sm p-5">
      <h2 className="text-base font-semibold text-gray-900 mb-4">Change Password</h2>
      <form onSubmit={handleSubmit} className="space-y-4">
        <div>
          <label className="block text-sm font-semibold text-gray-800 mb-1">
            Current Password
          </label>
          <input
            type="password"
            value={current}
            onChange={e => setCurrent(e.target.value)}
            disabled={loading}
            autoComplete="current-password"
            className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent disabled:opacity-50"
          />
        </div>
        <div>
          <label className="block text-sm font-semibold text-gray-800 mb-1">
            New Password
          </label>
          <input
            type="password"
            value={newPass}
            onChange={e => setNewPass(e.target.value)}
            disabled={loading}
            autoComplete="new-password"
            className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent disabled:opacity-50"
          />
        </div>
        <div>
          <label className="block text-sm font-semibold text-gray-800 mb-1">
            Confirm New Password
          </label>
          <input
            type="password"
            value={confirm}
            onChange={e => setConfirm(e.target.value)}
            disabled={loading}
            autoComplete="new-password"
            className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent disabled:opacity-50"
          />
        </div>

        {error && <p className="text-xs text-red-600 mt-1">{error}</p>}
        {success && <p className="text-xs text-green-600 mt-1">Password changed successfully.</p>}

        <button
          type="submit"
          disabled={loading}
          className="bg-blue-600 text-white rounded-lg px-4 py-2 text-sm font-semibold disabled:opacity-50 hover:bg-blue-700"
        >
          {loading ? 'Saving…' : 'Update Password'}
        </button>
      </form>
    </div>
  )
}