"use client";

import { useState } from "react";
import Link from "next/link";
import { Button, Input } from "@/components/ui";
import toast, { Toaster } from 'react-hot-toast';

export default function RecuperarSenhaPage() {
    const [isLoading, setIsLoading] = useState(false);
    const [email, setEmail] = useState("");
    const [emailSent, setEmailSent] = useState(false);

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

        // Validações básicas
        if (!email) {
            toast.error('Por favor, insira seu email');
            return;
        }

        if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
            toast.error('Por favor, insira um email válido');
            return;
        }

        setIsLoading(true);

        try {
            // Simular envio de email
            await new Promise((resolve) => setTimeout(resolve, 2000));

            setEmailSent(true);
            toast.success('Email de recuperação enviado com sucesso!');
        } catch (error) {
            toast.error('Erro ao enviar email. Tente novamente.');
        } finally {
            setIsLoading(false);
        }
    };

    return (
        <>
            <Toaster
                position="top-center"
                toastOptions={{
                    duration: 5000,
                    style: {
                        background: '#FFFFFF',
                        color: '#000000',
                        padding: '16px',
                        borderRadius: '8px',
                        border: '1px solid #E5E5E5',
                        boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
                    },
                    error: {
                        icon: '⚠️',
                        style: {
                            background: '#ff3a05',
                            color: '#FFFFFF',
                            border: 'none',
                        },
                    },
                    success: {
                        icon: '✓',
                        style: {
                            background: '#10B981',
                            color: '#FFFFFF',
                            border: 'none',
                        },
                    },
                }}
            />
            <div className="flex min-h-screen">
                {/* Lado Esquerdo - Formulário */}
                <div className="w-full lg:w-1/2 flex items-center justify-center px-6 sm:px-12 py-12">
                    <div className="w-full max-w-md">
                        {/* Logo mobile */}
                        <div className="lg:hidden text-center mb-8">
                            <div className="inline-block px-6 py-3 rounded-2xl" style={{ background: 'var(--gradient-primary)' }}>
                                <h1 className="text-3xl font-bold text-white">aggios</h1>
                            </div>
                        </div>

                        {!emailSent ? (
                            <>
                                {/* Header */}
                                <div className="mb-8">
                                    <h2 className="text-[28px] font-bold text-zinc-900 dark:text-white">
                                        Recuperar Senha
                                    </h2>
                                    <p className="text-[14px] text-zinc-600 dark:text-zinc-400 mt-2">
                                        Digite seu email e enviaremos um link para redefinir sua senha
                                    </p>
                                </div>

                                {/* Form */}
                                <form onSubmit={handleSubmit} className="space-y-5">
                                    <Input
                                        label="Email"
                                        type="email"
                                        placeholder="seu@email.com"
                                        leftIcon="ri-mail-line"
                                        value={email}
                                        onChange={(e) => setEmail(e.target.value)}
                                        required
                                    />

                                    <Button
                                        type="submit"
                                        variant="primary"
                                        className="w-full"
                                        size="lg"
                                        isLoading={isLoading}
                                    >
                                        Enviar link de recuperação
                                    </Button>
                                </form>

                                {/* Back to login */}
                                <div className="mt-6 text-center">
                                    <Link
                                        href="/login"
                                        className="text-[14px] gradient-text hover:underline inline-flex items-center gap-2 font-medium cursor-pointer"
                                    >
                                        <i className="ri-arrow-left-line" />
                                        Voltar para o login
                                    </Link>
                                </div>
                            </>
                        ) : (
                            <>
                                {/* Success Message */}
                                <div className="text-center">
                                    <div className="w-20 h-20 rounded-full bg-[#10B981]/10 flex items-center justify-center mx-auto mb-6">
                                        <i className="ri-mail-check-line text-4xl text-[#10B981]" />
                                    </div>

                                    <h2 className="text-[28px] font-bold text-zinc-900 dark:text-white mb-4">
                                        Email enviado!
                                    </h2>

                                    <p className="text-[14px] text-zinc-600 dark:text-zinc-400 mb-2">
                                        Enviamos um link de recuperação para:
                                    </p>

                                    <p className="text-[16px] font-semibold text-zinc-900 dark:text-white mb-6">
                                        {email}
                                    </p>

                                    <div className="p-6 bg-[#F0F9FF] border border-[#BAE6FD] rounded-md text-left mb-6">
                                        <div className="flex gap-4">
                                            <i className="ri-information-line text-[#0EA5E9] text-xl mt-0.5" />
                                            <div>
                                                <h4 className="text-sm font-semibold text-zinc-900 dark:text-white mb-1">
                                                    Verifique sua caixa de entrada
                                                </h4>
                                                <p className="text-xs text-zinc-600 dark:text-zinc-400">
                                                    Clique no link que enviamos para redefinir sua senha.
                                                    Se não receber em alguns minutos, verifique sua pasta de spam.
                                                </p>
                                            </div>
                                        </div>
                                    </div>

                                    <Button
                                        variant="outline"
                                        className="w-full mb-4"
                                        onClick={() => setEmailSent(false)}
                                    >
                                        Enviar novamente
                                    </Button>

                                    <Link
                                        href="/login"
                                        className="text-[14px] gradient-text hover:underline inline-flex items-center gap-2 font-medium cursor-pointer"
                                    >
                                        <i className="ri-arrow-left-line" />
                                        Voltar para o login
                                    </Link>
                                </div>
                            </>
                        )}
                    </div>
                </div>

                {/* Lado Direito - Branding */}
                <div className="hidden lg:flex lg:w-1/2 relative overflow-hidden" style={{ background: 'var(--gradient-primary)' }}>
                    <div className="relative z-10 flex flex-col justify-center items-center w-full p-12 text-white">
                        {/* Logo */}
                        <div className="mb-8">
                            <div className="inline-block px-6 py-3 rounded-2xl bg-white/10 backdrop-blur-sm border border-white/20">
                                <h1 className="text-5xl font-bold tracking-tight text-white">
                                    aggios
                                </h1>
                            </div>
                        </div>

                        {/* Conteúdo */}
                        <div className="max-w-lg text-center">
                            <div className="w-20 h-20 rounded-2xl bg-white/20 flex items-center justify-center mb-6 mx-auto">
                                <i className="ri-lock-password-line text-4xl" />
                            </div>
                            <h2 className="text-4xl font-bold mb-4">Recuperação segura</h2>
                            <p className="text-white/80 text-lg mb-8">
                                Protegemos seus dados com os mais altos padrões de segurança.
                                Seu link de recuperação é único e expira em 24 horas.
                            </p>

                            {/* Features */}
                            <div className="space-y-4 text-left">
                                <div className="flex items-start gap-3">
                                    <div className="w-6 h-6 rounded-full bg-white/20 flex items-center justify-center shrink-0 mt-0.5">
                                        <i className="ri-shield-check-line text-sm" />
                                    </div>
                                    <div>
                                        <h4 className="font-semibold mb-1">Criptografia de ponta</h4>
                                        <p className="text-white/70 text-sm">Seus dados são protegidos com tecnologia de última geração</p>
                                    </div>
                                </div>
                                <div className="flex items-start gap-3">
                                    <div className="w-6 h-6 rounded-full bg-white/20 flex items-center justify-center shrink-0 mt-0.5">
                                        <i className="ri-time-line text-sm" />
                                    </div>
                                    <div>
                                        <h4 className="font-semibold mb-1">Link temporário</h4>
                                        <p className="text-white/70 text-sm">O link expira em 24h para sua segurança</p>
                                    </div>
                                </div>
                                <div className="flex items-start gap-3">
                                    <div className="w-6 h-6 rounded-full bg-white/20 flex items-center justify-center shrink-0 mt-0.5">
                                        <i className="ri-customer-service-2-line text-sm" />
                                    </div>
                                    <div>
                                        <h4 className="font-semibold mb-1">Suporte disponível</h4>
                                        <p className="text-white/70 text-sm">Nossa equipe está pronta para ajudar caso precise</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {/* Círculos decorativos */}
                    <div className="absolute top-0 right-0 w-96 h-96 bg-white/5 rounded-full blur-3xl" />
                    <div className="absolute bottom-0 left-0 w-96 h-96 bg-white/5 rounded-full blur-3xl" />
                </div>
            </div>
        </>
    );
}