"use client";

import { useEffect, useState } from "react";
import DashboardPreview from "./DashboardPreview";

interface DynamicBrandingProps {
    currentStep: number;
    companyName?: string;
    subdomain?: string;
    primaryColor?: string;
    secondaryColor?: string;
    logoUrl?: string;
}

export default function DynamicBranding({
    currentStep,
    companyName = "",
    subdomain = "",
    primaryColor = "#0ea5e9",
    secondaryColor = "#0284c7",
    logoUrl = ""
}: DynamicBrandingProps) {
    const [activeTestimonial, setActiveTestimonial] = useState(0);

    const testimonials = [
        {
            text: "A implementação do Aggios transformou completamente a gestão da nossa agência. Conseguimos reduzir em 65% o tempo gasto com tarefas administrativas e aumentar nossa capacidade de atendimento.",
            author: "Carlos Eduardo Martins",
            position: "CEO",
            company: "Martins & Associados",
            rating: 5
        },
        {
            text: "Como diretora de operações, preciso de dados precisos em tempo real. O Aggios entrega exatamente isso. A plataforma é intuitiva e os relatórios são excepcionais para tomada de decisão estratégica.",
            author: "Patricia Almeida Santos",
            position: "Diretora de Operações",
            company: "Digital Solutions Group",
            rating: 5
        },
        {
            text: "Implementamos o Aggios há 6 meses e o ROI foi imediato. Melhor controle financeiro, visibilidade total dos projetos e uma equipe muito mais produtiva. Recomendo sem ressalvas.",
            author: "Roberto Henrique Costa",
            position: "Diretor Financeiro",
            company: "Costa & Partners",
            rating: 5
        },
        {
            text: "A integração com nossas ferramentas foi perfeita e o suporte técnico é simplesmente excepcional. O Aggios se tornou parte fundamental da nossa operação diária.",
            author: "Fernanda Silva Rodrigues",
            position: "Head de TI",
            company: "Tech Innovators",
            rating: 5
        }
    ];

    // Auto-rotate testimonials
    useEffect(() => {
        const interval = setInterval(() => {
            setActiveTestimonial((prev) => (prev + 1) % testimonials.length);
        }, 6000);
        return () => clearInterval(interval);
    }, [testimonials.length]);

    // Se for etapa 4, mostrar preview do dashboard
    if (currentStep === 4) {
        return (
            <div className="relative z-10 flex flex-col h-full w-full overflow-hidden bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900">
                {/* Decorative elements */}
                <div className="absolute inset-0 opacity-10">
                    <div className="absolute top-0 left-0 w-96 h-96 bg-blue-500 rounded-full blur-3xl" />
                    <div className="absolute bottom-0 right-0 w-96 h-96 bg-purple-500 rounded-full blur-3xl" />
                </div>

                <div className="relative z-10 flex flex-col justify-center items-center h-full p-12 text-white">
                    <div className="mb-6">
                        <h1 className="text-4xl font-bold tracking-tight text-white text-center mb-2">
                            aggios
                        </h1>
                        <p className="text-sm text-white/70 font-medium tracking-wide uppercase text-center">
                            Gestão Inteligente para Agências
                        </p>
                    </div>

                    <div className="max-w-lg text-center mb-8">
                        <h2 className="text-3xl font-bold mb-2 text-white">Preview do seu Painel</h2>
                        <p className="text-white/70 text-base">Veja como ficará seu dashboard personalizado</p>
                    </div>

                    <div className="w-full max-w-3xl mb-6">
                        <DashboardPreview
                            companyName={companyName}
                            subdomain={subdomain}
                            primaryColor={primaryColor}
                            secondaryColor={secondaryColor}
                            logoUrl={logoUrl}
                        />
                    </div>

                    <div className="text-center">
                        <p className="text-white/60 text-sm">
                            As cores e configurações são atualizadas em tempo real
                        </p>
                    </div>
                </div>
            </div>
        );
    }

    return (
        <div className="relative z-10 flex flex-col h-full w-full overflow-hidden bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900">
            {/* Decorative elements */}
            <div className="absolute inset-0 opacity-10">
                <div className="absolute top-20 right-20 w-96 h-96 bg-blue-500 rounded-full blur-3xl" />
                <div className="absolute bottom-20 left-20 w-80 h-80 bg-indigo-500 rounded-full blur-3xl" />
            </div>

            <div className="relative z-10 flex flex-col justify-between h-full p-12 text-white">
                <div className="mb-8">
                    <div className="inline-block">
                        <h1 className="text-4xl font-bold tracking-tight text-white mb-2">
                            aggios
                        </h1>
                        <p className="text-sm text-white/70 font-medium tracking-wide uppercase">
                            Gestão Inteligente para Agências
                        </p>
                    </div>
                </div>

                <div className="flex-1" />

                <div className="space-y-6">
                    <div className="mb-6">
                        <h3 className="text-sm font-semibold text-white/60 uppercase tracking-wider mb-1">
                            Depoimentos
                        </h3>
                        <p className="text-2xl font-bold text-white">
                            O que nossos clientes dizem
                        </p>
                    </div>

                    <div className="relative">
                        <div className="bg-white/5 backdrop-blur-md rounded-xl p-8 border border-white/10 shadow-2xl">
                            <div className="flex gap-1 mb-4">
                                {[...Array(testimonials[activeTestimonial].rating)].map((_, i) => (
                                    <i key={i} className="ri-star-fill text-yellow-400 text-lg" />
                                ))}
                            </div>

                            <div className="mb-4">
                                <i className="ri-double-quotes-l text-4xl text-white/20" />
                            </div>

                            <p className="text-white/95 text-lg leading-relaxed mb-6 min-h-[140px]">
                                {testimonials[activeTestimonial].text}
                            </p>

                            <div className="flex items-center gap-4 pt-6 border-t border-white/10">
                                <div className="relative w-14 h-14 rounded-full overflow-hidden ring-2 ring-white/20 bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center">
                                    <span className="text-white font-bold text-xl">
                                        {testimonials[activeTestimonial].author.split(' ').map(n => n[0]).join('')}
                                    </span>
                                </div>
                                <div className="flex-1">
                                    <p className="font-semibold text-white text-lg">
                                        {testimonials[activeTestimonial].author}
                                    </p>
                                    <p className="text-sm text-white/70">
                                        {testimonials[activeTestimonial].position}
                                    </p>
                                    <p className="text-sm text-white/50 font-medium">
                                        {testimonials[activeTestimonial].company}
                                    </p>
                                </div>
                            </div>
                        </div>

                        <div className="flex gap-2 justify-center mt-6">
                            {testimonials.map((_, index) => (
                                <button
                                    key={index}
                                    onClick={() => setActiveTestimonial(index)}
                                    className={`h-2 rounded-full transition-all duration-300 ${index === activeTestimonial
                                            ? "w-12 bg-white shadow-lg shadow-white/20"
                                            : "w-2 bg-white/30 hover:bg-white/50"
                                        }`}
                                    aria-label={`Ir para depoimento ${index + 1}`}
                                />
                            ))}
                        </div>
                    </div>

                    <div className="flex items-center justify-center gap-6 mt-8 pt-6 border-t border-white/10">
                        <div className="text-center">
                            <p className="text-2xl font-bold text-white">10.000+</p>
                            <p className="text-xs text-white/60 uppercase tracking-wide">Projetos</p>
                        </div>
                        <div className="w-px h-8 bg-white/20" />
                        <div className="text-center">
                            <p className="text-2xl font-bold text-white">98%</p>
                            <p className="text-xs text-white/60 uppercase tracking-wide">Satisfação</p>
                        </div>
                        <div className="w-px h-8 bg-white/20" />
                        <div className="text-center">
                            <p className="text-2xl font-bold text-white">5.000+</p>
                            <p className="text-xs text-white/60 uppercase tracking-wide">Usuários</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}