'use client'

import { useState } from 'react'
import { Header } from '@/components/Header'
import { Footer } from '@/components/Footer'
import { api } from '@/lib/api'
import { Mail, ArrowLeft, CheckCircle, AlertCircle, Loader2 } from 'lucide-react'
import Link from 'next/link'
import clsx from 'clsx'

export default function ForgotPasswordPage() {
  const [email, setEmail] = useState('')
  const [loading, setLoading] = useState(false)
  const [success, setSuccess] = useState(false)
  const [error, setError] = useState<string | null>(null)

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

    try {
      await api.forgotPassword(email)
      setSuccess(true)
    } catch (err: any) {
      // Always show success message (security: don't reveal if email exists)
      setSuccess(true)
    } finally {
      setLoading(false)
    }
  }

  return (
    <div className="min-h-screen bg-[#020202] text-white relative overflow-x-hidden selection:bg-accent/30 selection:text-white">
      {/* Living Background Atmosphere */}
      <div className="fixed inset-0 pointer-events-none overflow-hidden">
        <div className="absolute inset-0 bg-[url('/noise.png')] opacity-[0.04] mix-blend-overlay z-10" />
        
        {/* Animated Orbs */}
        <div className="absolute top-[10%] right-[20%] w-[50vw] h-[50vw] bg-accent/5 rounded-full blur-[120px] animate-pulse-slow mix-blend-screen" />
        <div className="absolute bottom-[10%] left-[20%] w-[40vw] h-[40vw] bg-blue-500/5 rounded-full blur-[100px] animate-blob mix-blend-screen" />
        
        {/* Grid Overlay */}
        <div 
          className="absolute inset-0 opacity-[0.03] z-0"
          style={{
            backgroundImage: `linear-gradient(rgba(255,255,255,0.3) 0.5px, transparent 0.5px), linear-gradient(90deg, rgba(255,255,255,0.3) 0.5px, transparent 0.5px)`,
            backgroundSize: '40px 40px',
          }}
        />
      </div>

      <Header />
      
      <main className="min-h-screen flex items-center justify-center px-4 sm:px-6 py-20 relative z-10">
        <div className="w-full max-w-[450px] animate-fade-in">
          
          <div className="bg-[#050505] border border-white/10 relative p-8 sm:p-10 shadow-2xl">
             {/* Tech Corners */}
             <div className="absolute -top-px -left-px w-4 h-4 border-t border-l border-white/40" />
             <div className="absolute -top-px -right-px w-4 h-4 border-t border-r border-white/40" />
             <div className="absolute -bottom-px -left-px w-4 h-4 border-b border-l border-white/40" />
             <div className="absolute -bottom-px -right-px w-4 h-4 border-b border-r border-white/40" />

             {success ? (
                <div className="text-center">
                   <div className="w-16 h-16 bg-accent/10 border border-accent/20 flex items-center justify-center mx-auto mb-8 rounded-none">
                      <CheckCircle className="w-8 h-8 text-accent" />
                   </div>
                   <h1 className="font-display text-2xl text-white mb-4">
                      Protocol Initiated
                   </h1>
                   <p className="text-sm font-mono text-white/50 mb-8 leading-relaxed">
                      If <strong className="text-white">{email}</strong> exists in our database, a reset link has been dispatched. Link valid for 60 minutes.
                   </p>
                   
                   <button
                      onClick={() => setSuccess(false)}
                      className="text-xs font-bold uppercase tracking-[0.2em] text-white/40 hover:text-white transition-colors"
                   >
                      Try different email
                   </button>
                </div>
             ) : (
                <>
                   <div className="text-center mb-10">
                      <h1 className="font-display text-2xl text-white mb-2">
                         Reset Credentials
                      </h1>
                      <p className="text-xs font-mono text-white/40">
                         Enter your email to receive a recovery link.
                      </p>
                   </div>

                   <form onSubmit={handleSubmit} className="space-y-6">
                      {error && (
                         <div className="p-3 bg-red-500/10 border border-red-500/20">
                            <p className="text-red-500 text-xs font-mono text-center uppercase tracking-wider">{error}</p>
                         </div>
                      )}

                      <div className="group">
                         <label className="text-[10px] font-mono text-white/40 uppercase tracking-widest mb-2 block group-focus-within:text-white/70 transition-colors">Email Address</label>
                         <input
                            type="email"
                            value={email}
                            onChange={(e) => setEmail(e.target.value)}
                            placeholder="OPERATOR@POUNCE.CH"
                            required
                            autoComplete="email"
                            className="w-full bg-[#0A0A0A] border border-white/10 px-4 py-3 text-white font-mono text-sm placeholder:text-white/20 focus:outline-none focus:border-accent transition-all rounded-none"
                         />
                      </div>

                      <button
                         type="submit"
                         disabled={loading}
                         className="w-full py-4 bg-white text-black text-xs font-bold uppercase tracking-[0.2em] hover:bg-accent transition-all disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-3"
                         style={{ clipPath: 'polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px)' }}
                      >
                         {loading ? (
                            <Loader2 className="w-4 h-4 animate-spin" />
                         ) : (
                            'Send Reset Link'
                         )}
                      </button>
                   </form>
                </>
             )}

             <div className="mt-8 pt-8 border-t border-white/10 text-center">
                <Link
                   href="/login"
                   className="inline-flex items-center gap-2 text-xs font-mono text-white/40 hover:text-white transition-colors uppercase tracking-wider"
                >
                   <ArrowLeft className="w-3 h-3" />
                   Return to Login
                </Link>
             </div>
          </div>
        </div>
      </main>
      <Footer />
    </div>
  )
}
