"use client";

import { useState } from "react";
import { createClient } from "@/utils/supabase/client";
import Link from "next/link";

export default function ForgotPassword() {
  const [email, setEmail] = useState("");
  const [loading, setLoading] = useState(false);
  const [message, setMessage] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);
  
  const supabase = createClient();

  const handleReset = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);
    setMessage(null);
    setError(null);

    const { error: resetError } = await supabase.auth.resetPasswordForEmail(email, {
      redirectTo: `${window.location.origin}/auth/callback?next=/reset-password`,
    });

    if (resetError) {
      setError(resetError.message);
    } else {
      setMessage("We've sent a password reset link to your inbox.");
    }
    
    setLoading(false);
  };

  return (
    <div className="min-h-screen flex flex-col sm:justify-center items-center pt-6 sm:pt-0 bg-[#f3f4f6] selection:bg-indigo-500 selection:text-white">
      
      {/* Brand Logo Area */}
      <div className="mb-6">
        <Link href="/" className="flex flex-col items-center gap-2 group">
          <div className="w-12 h-12 bg-indigo-600 rounded-xl flex items-center justify-center shadow-lg shadow-indigo-200 group-hover:scale-105 transition-transform duration-200">
            <svg className="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
            </svg>
          </div>
          <h1 className="text-2xl font-bold tracking-tight text-gray-900">
            Omugwor<span className="text-indigo-600">Admin</span>
          </h1>
        </Link>
      </div>

      {/* Main Card */}
      <div className="w-full sm:max-w-md mt-6 px-6 py-8 bg-white shadow-xl shadow-gray-200/50 overflow-hidden sm:rounded-xl border border-gray-100">
        
        <h2 className="text-lg font-bold text-gray-900 mb-2">Reset Password</h2>
        <p className="text-sm text-gray-600 mb-6 leading-relaxed">
          Forgot your password? No problem. Enter your admin email address and we will email you a password reset link.
        </p>

        {/* Success Message */}
        {message && (
          <div className="mb-6 flex items-center gap-3 p-4 text-sm text-green-800 border border-green-100 rounded-lg bg-green-50 animate-in fade-in slide-in-from-top-1">
            <svg className="w-5 h-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
            </svg>
            <p className="font-medium">{message}</p>
          </div>
        )}

        {/* Error Message */}
        {error && (
          <div className="mb-6 flex items-center gap-3 p-4 text-sm text-red-800 border border-red-100 rounded-lg bg-red-50">
            <svg className="w-5 h-5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
              <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
            </svg>
            <p className="font-medium">{error}</p>
          </div>
        )}

        <form onSubmit={handleReset} className="space-y-6">
          {/* Email Field */}
          <div>
            <label className="block text-sm font-semibold text-gray-700 ml-1" htmlFor="email">
              Admin Email
            </label>
            <input
              id="email"
              type="email"
              required
              autoFocus
              className="mt-1 block w-full px-4 py-3 bg-gray-50 border-gray-200 rounded-lg text-gray-900 focus:bg-white focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 border outline-none transition-all duration-200"
              placeholder="admin@omugwor.com"
              onChange={(e) => setEmail(e.target.value)}
            />
          </div>

          <div className="flex items-center justify-between gap-4">
            <Link 
              href="/login" 
              className="text-sm font-bold text-gray-600 hover:text-gray-900 transition-colors"
            >
              Back to Login
            </Link>

            <button
              type="submit"
              disabled={loading}
              className="flex justify-center items-center py-2.5 px-5 border border-transparent rounded-lg shadow-sm text-xs font-bold text-white bg-gray-900 hover:bg-gray-800 uppercase tracking-widest focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900 transition-all duration-150 disabled:opacity-70"
            >
              {loading ? (
                <svg className="animate-spin h-4 w-4 text-white" fill="none" viewBox="0 0 24 24">
                  <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
                  <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" />
                </svg>
              ) : (
                "Send Reset Link"
              )}
            </button>
          </div>
        </form>
      </div>

      {/* Footer */}
      <p className="mt-8 text-center text-xs text-gray-500 tracking-widest uppercase font-medium">
        Secure Admin Access Portal
      </p>
    </div>
  );
}