'use client'

import { useState } from 'react'
import { useRouter, useParams } 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 ResetPasswordPage() {
    const router = useRouter()
    const params = useParams()
    const token = params.token as string

    const [password, setPassword] = useState('')
    const [confirmPassword, setConfirmPassword] = useState('')
    const [isLoading, setIsLoading] = useState(false)
    const [success, setSuccess] = useState(false)

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

        // Client-side validation
        if (password !== confirmPassword) {
            toast.error('Passwords do not match')
            return
        }

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

        if (!/[A-Z]/.test(password)) {
            toast.error('Password must contain at least one uppercase letter')
            return
        }

        if (!/[a-z]/.test(password)) {
            toast.error('Password must contain at least one lowercase letter')
            return
        }

        if (!/[0-9]/.test(password)) {
            toast.error('Password must contain at least one number')
            return
        }

        setIsLoading(true)

        try {
            await authAPI.resetPassword(token, password)
            setSuccess(true)
            toast.success('Password reset successfully!')

            // Redirect to login after 2 seconds
            setTimeout(() => {
                router.push('/login')
            }, 2000)
        } catch (error: any) {
            console.error('Reset password error:', error)
            const message = error.response?.data?.message || 'Failed to reset password. The link may have expired.'
            toast.error(message)
        } 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>Set New Password</CardTitle>
                        <CardDescription>
                            {success
                                ? 'Your password has been reset'
                                : 'Choose a strong password for your account'}
                        </CardDescription>
                    </CardHeader>
                    <CardContent>
                        {!success ? (
                            <form onSubmit={handleSubmit} className="space-y-4">
                                <Input
                                    label="New Password"
                                    type="password"
                                    value={password}
                                    onChange={(e) => setPassword(e.target.value)}
                                    placeholder="••••••••"
                                    required
                                    disabled={isLoading}
                                    hint="At least 8 characters, including uppercase, lowercase, and number"
                                />

                                <Input
                                    label="Confirm Password"
                                    type="password"
                                    value={confirmPassword}
                                    onChange={(e) => setConfirmPassword(e.target.value)}
                                    placeholder="••••••••"
                                    required
                                    disabled={isLoading}
                                />

                                {/* Password Requirements */}
                                <div className="rounded-lg bg-muted/50 p-3 text-xs">
                                    <p className="mb-2 font-medium">Password must contain:</p>
                                    <ul className="space-y-1">
                                        <li className={password.length >= 8 ? 'text-green-600' : 'text-muted-foreground'}>
                                            {password.length >= 8 ? '✓' : '○'} At least 8 characters
                                        </li>
                                        <li className={/[A-Z]/.test(password) ? 'text-green-600' : 'text-muted-foreground'}>
                                            {/[A-Z]/.test(password) ? '✓' : '○'} One uppercase letter
                                        </li>
                                        <li className={/[a-z]/.test(password) ? 'text-green-600' : 'text-muted-foreground'}>
                                            {/[a-z]/.test(password) ? '✓' : '○'} One lowercase letter
                                        </li>
                                        <li className={/[0-9]/.test(password) ? 'text-green-600' : 'text-muted-foreground'}>
                                            {/[0-9]/.test(password) ? '✓' : '○'} One number
                                        </li>
                                        <li className={password === confirmPassword && password.length > 0 ? 'text-green-600' : 'text-muted-foreground'}>
                                            {password === confirmPassword && password.length > 0 ? '✓' : '○'} Passwords match
                                        </li>
                                    </ul>
                                </div>

                                <Button
                                    type="submit"
                                    className="w-full"
                                    disabled={isLoading}
                                >
                                    {isLoading ? 'Resetting...' : 'Reset Password'}
                                </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="M5 13l4 4L19 7" />
                                        </svg>
                                    </div>
                                    <p className="font-medium text-green-900">Password Reset Successfully!</p>
                                    <p className="mt-1 text-sm text-green-700">
                                        You can now log in with your new password.
                                    </p>
                                </div>

                                <p className="text-center text-sm text-muted-foreground">
                                    Redirecting to login page...
                                </p>

                                <Button
                                    className="w-full"
                                    onClick={() => router.push('/login')}
                                >
                                    Go to Login
                                </Button>
                            </div>
                        )}
                    </CardContent>
                </Card>
            </div>
        </div>
    )
}