'use client'

import { useState } from 'react'
import { useRouter } from 'next/navigation'
import Link from 'next/link'
import { toast } from 'sonner'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Card, CardHeader, CardTitle, CardDescription, CardContent } from '@/components/ui/card'
import { authAPI } from '@/lib/api'

export default function ForgotPasswordPage() {
    const router = useRouter()
    const [email, setEmail] = useState('')
    const [isLoading, setIsLoading] = useState(false)
    const [emailSent, setEmailSent] = useState(false)

    const handleSubmit = async (e: React.FormEvent) => {
        e.preventDefault()
        setIsLoading(true)

        try {
            await authAPI.forgotPassword(email)
            setEmailSent(true)
            toast.success('Check your email for password reset instructions')
        } catch (error: any) {
            console.error('Forgot password error:', error)
            // Show generic success message for security (prevent email enumeration)
            setEmailSent(true)
            toast.success('Check your email for password reset instructions')
        } finally {
            setIsLoading(false)
        }
    }

    return (
        <div className="flex min-h-screen items-center justify-center bg-gradient-to-br from-background to-muted p-4">
            <div className="w-full max-w-md">
                {/* Logo */}
                <div className="mb-8 text-center">
                    <Link href="/" className="inline-block">
                        <div className="flex items-center justify-center gap-2">
                            <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary">
                                <svg className="h-6 w-6 text-primary-foreground" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                                </svg>
                            </div>
                            <span className="text-2xl font-bold">Website Monitor</span>
                        </div>
                    </Link>
                </div>

                <Card>
                    <CardHeader>
                        <CardTitle>Reset Password</CardTitle>
                        <CardDescription>
                            {emailSent
                                ? 'Check your email for instructions'
                                : 'Enter your email to receive password reset instructions'}
                        </CardDescription>
                    </CardHeader>
                    <CardContent>
                        {!emailSent ? (
                            <form onSubmit={handleSubmit} className="space-y-4">
                                <Input
                                    label="Email"
                                    type="email"
                                    value={email}
                                    onChange={(e) => setEmail(e.target.value)}
                                    placeholder="you@example.com"
                                    required
                                    disabled={isLoading}
                                />

                                <Button
                                    type="submit"
                                    className="w-full"
                                    disabled={isLoading}
                                >
                                    {isLoading ? 'Sending...' : 'Send Reset Link'}
                                </Button>

                                <div className="text-center text-sm">
                                    <Link
                                        href="/login"
                                        className="text-primary hover:underline"
                                    >
                                        Back to Login
                                    </Link>
                                </div>
                            </form>
                        ) : (
                            <div className="space-y-4">
                                <div className="rounded-lg bg-green-50 p-4 text-center">
                                    <div className="mx-auto mb-2 flex h-12 w-12 items-center justify-center rounded-full bg-green-100">
                                        <svg className="h-6 w-6 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                            <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>
                                    </div>
                                    <p className="font-medium text-green-900">Email Sent!</p>
                                    <p className="mt-1 text-sm text-green-700">
                                        If an account exists with <strong>{email}</strong>, you will receive password reset instructions shortly.
                                    </p>
                                </div>

                                <div className="text-sm text-muted-foreground">
                                    <p className="mb-2">{"Didn't receive an email?"}</p>
                                    <ul className="ml-4 list-disc space-y-1">
                                        <li>Check your spam folder</li>
                                        <li>Make sure you entered the correct email</li>
                                        <li>Wait a few minutes and try again</li>
                                    </ul>
                                </div>

                                <Button
                                    variant="outline"
                                    className="w-full"
                                    onClick={() => {
                                        setEmailSent(false)
                                        setEmail('')
                                    }}
                                >
                                    Try Different Email
                                </Button>

                                <div className="text-center text-sm">
                                    <Link
                                        href="/login"
                                        className="text-primary hover:underline"
                                    >
                                        Back to Login
                                    </Link>
                                </div>
                            </div>
                        )}
                    </CardContent>
                </Card>
            </div>
        </div>
    )
}