'use client';

import { useEffect, useState } from 'react';
import { CheckCircleIcon, ClockIcon, UserCircleIcon } from '@heroicons/react/24/solid';
import { SparklesIcon } from '@heroicons/react/24/outline';
import Link from 'next/link';

interface SucessoClientProps {
    branding: {
        name: string;
        logo_url?: string;
        primary_color: string;
    };
    accentColor: string;
    submittedAt: string;
}

const timeline = [
    {
        title: 'Cadastro recebido',
        description: 'Confirmamos seus dados e senha automaticamente.',
        status: 'done' as const,
    },
    {
        title: 'Análise da equipe',
        description: 'Nossa equipe valida seus dados e configura seu acesso.',
        status: 'current' as const,
    },
    {
        title: 'Acesso liberado',
        description: 'Você receberá aviso e poderá fazer login com sua senha.',
        status: 'upcoming' as const,
    },
];

export default function SucessoClient({ branding, accentColor, submittedAt }: SucessoClientProps) {
    const [customerName, setCustomerName] = useState<string | null>(null);
    const [customerEmail, setCustomerEmail] = useState<string | null>(null);
    const [isLoading, setIsLoading] = useState(true);

    useEffect(() => {
        const name = sessionStorage.getItem('customer_name');
        const email = sessionStorage.getItem('customer_email');
        setCustomerName(name);
        setCustomerEmail(email);
        setIsLoading(false);

        // Limpar sessionStorage após carregar
        if (name || email) {
            sessionStorage.removeItem('customer_name');
            sessionStorage.removeItem('customer_email');
        }
    }, []);

    const primaryColor = branding.primary_color || '#3b82f6';
    const firstName = customerName?.split(' ')[0] || 'Cliente';

    return (
        <div className="min-h-screen bg-gradient-to-br from-gray-50 via-white to-gray-100 py-12 px-4 sm:px-6 lg:px-8">
            <div className="max-w-3xl mx-auto space-y-8">
                <div className="text-center space-y-4">
                    {branding.logo_url ? (
                        <img src={branding.logo_url} alt={branding.name} className="mx-auto h-16 w-auto object-contain" />
                    ) : (
                        <div className="mx-auto h-16 w-16 rounded-2xl flex items-center justify-center text-white text-2xl font-semibold" style={{ backgroundColor: primaryColor }}>
                            {branding.name?.substring(0, 2).toUpperCase() || 'AG'}
                        </div>
                    )}
                    <p className="text-sm uppercase tracking-[0.25em] text-gray-500 font-medium">Portal do Cliente</p>
                </div>

                <div className="bg-white rounded-3xl shadow-2xl overflow-hidden border border-gray-200">
                    <div className="h-3" style={{ backgroundImage: `linear-gradient(120deg, ${primaryColor}, ${accentColor})` }} />

                    <div className="p-8 sm:p-12 space-y-8">
                        {/* Header Premium com Nome */}
                        <div className="flex flex-col items-center text-center space-y-6">
                            <div className="relative">
                                <div className="h-24 w-24 rounded-full flex items-center justify-center bg-gradient-to-br from-green-100 to-emerald-50 shadow-lg">
                                    <CheckCircleIcon className="h-14 w-14 text-green-600" />
                                </div>
                                <div className="absolute -bottom-1 -right-1 h-8 w-8 rounded-full bg-white flex items-center justify-center shadow-md">
                                    <SparklesIcon className="h-5 w-5 text-amber-500" />
                                </div>
                            </div>

                            {!isLoading && customerName ? (
                                <div className="space-y-2">
                                    <h1 className="text-3xl sm:text-4xl font-bold text-gray-900">
                                        Tudo certo, {firstName}! 🎉
                                    </h1>
                                    <p className="text-lg text-gray-600">
                                        Seu cadastro foi enviado com sucesso
                                    </p>
                                </div>
                            ) : (
                                <div className="space-y-2">
                                    <h1 className="text-3xl sm:text-4xl font-bold text-gray-900">
                                        Cadastro enviado com sucesso! 🎉
                                    </h1>
                                    <p className="text-lg text-gray-600">
                                        Recebemos todas as suas informações
                                    </p>
                                </div>
                            )}

                            <div className="bg-blue-50 border border-blue-200 rounded-2xl p-4 max-w-lg">
                                <div className="flex items-start gap-3">
                                    <UserCircleIcon className="h-6 w-6 text-blue-600 flex-shrink-0 mt-0.5" />
                                    <div className="text-left">
                                        <p className="text-sm font-semibold text-blue-900">Sua senha está segura</p>
                                        <p className="text-sm text-blue-700 mt-1">
                                            Você já definiu sua senha de acesso. Assim que a agência liberar seu cadastro,
                                            você poderá fazer login imediatamente no portal.
                                        </p>
                                    </div>
                                </div>
                            </div>

                            {!isLoading && customerEmail && (
                                <p className="text-sm text-gray-500">
                                    Login: <span className="font-mono font-semibold text-gray-700">{customerEmail}</span>
                                </p>
                            )}

                            <p className="text-xs text-gray-400">Enviado em {submittedAt}</p>
                        </div>

                        {/* Timeline */}
                        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                            {timeline.map((item, idx) => (
                                <div
                                    key={item.title}
                                    className={`rounded-2xl border-2 p-5 flex flex-col gap-3 transition-all ${item.status === 'done'
                                        ? 'border-green-200 bg-green-50/50'
                                        : item.status === 'current'
                                            ? 'border-indigo-300 bg-indigo-50/50 shadow-lg'
                                            : 'border-gray-200 bg-gray-50'
                                        }`}
                                >
                                    <div className="flex items-center justify-between">
                                        <div className={`h-10 w-10 rounded-full flex items-center justify-center font-bold ${item.status === 'done'
                                            ? 'bg-green-500 text-white'
                                            : item.status === 'current'
                                                ? 'bg-indigo-500 text-white'
                                                : 'bg-gray-200 text-gray-400'
                                            }`}>
                                            {idx + 1}
                                        </div>
                                        {item.status === 'current' && (
                                            <div className="flex space-x-1">
                                                <div className="w-2 h-2 rounded-full bg-indigo-500 animate-pulse" />
                                                <div className="w-2 h-2 rounded-full bg-indigo-500 animate-pulse" style={{ animationDelay: '0.2s' }} />
                                                <div className="w-2 h-2 rounded-full bg-indigo-500 animate-pulse" style={{ animationDelay: '0.4s' }} />
                                            </div>
                                        )}
                                    </div>
                                    <div>
                                        <p className="text-sm font-semibold text-gray-900">{item.title}</p>
                                        <p className="text-sm text-gray-600 mt-1">{item.description}</p>
                                    </div>
                                </div>
                            ))}
                        </div>

                        {/* Informações */}
                        <div className="bg-gradient-to-br from-gray-50 to-white rounded-2xl p-6 border border-gray-200">
                            <p className="font-semibold text-gray-900 mb-3 flex items-center gap-2">
                                <ClockIcon className="h-5 w-5 text-amber-500" />
                                O que acontece agora?
                            </p>
                            <ul className="space-y-2 text-sm text-gray-700">
                                <li className="flex items-start gap-2">
                                    <span className="text-green-500 font-bold mt-0.5">✓</span>
                                    <span>Nossa equipe valida seus dados e configura seu ambiente no portal</span>
                                </li>
                                <li className="flex items-start gap-2">
                                    <span className="text-green-500 font-bold mt-0.5">✓</span>
                                    <span>Assim que aprovado, você receberá aviso pelos contatos informados</span>
                                </li>
                                <li className="flex items-start gap-2">
                                    <span className="text-green-500 font-bold mt-0.5">✓</span>
                                    <span>Use o login <strong>{customerEmail || 'seu e-mail'}</strong> e a senha que você criou para acessar</span>
                                </li>
                                <li className="flex items-start gap-2">
                                    <span className="text-amber-500 font-bold mt-0.5">!</span>
                                    <span>Em caso de urgência, fale com a equipe {branding.name} pelo telefone ou WhatsApp</span>
                                </li>
                            </ul>
                        </div>

                        {/* CTAs */}
                        <div className="space-y-3 pt-4">
                            <Link
                                href="/login"
                                className="w-full inline-flex items-center justify-center gap-2 rounded-xl px-6 py-4 text-white font-semibold shadow-lg transition-all hover:shadow-xl hover:-translate-y-0.5"
                                style={{ backgroundImage: `linear-gradient(120deg, ${primaryColor}, ${accentColor})` }}
                            >
                                Ir para o login do cliente
                            </Link>
                            <Link
                                href="/"
                                className="w-full inline-flex items-center justify-center gap-2 rounded-xl px-6 py-3 font-semibold border-2 border-gray-300 text-gray-700 hover:bg-gray-50 transition-colors"
                            >
                                Voltar para o site da agência
                            </Link>
                        </div>
                    </div>
                </div>

                <div className="text-center text-sm text-gray-500 bg-white/70 backdrop-blur-sm rounded-xl p-4 border border-gray-200">
                    Precisa ajustar alguma informação? Entre em contato com a equipe <strong>{branding.name}</strong> pelos
                    canais que você informou no cadastro.
                </div>
            </div>
        </div>
    );
}