"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 = '#FF3A05',
    secondaryColor = '#FF0080',
    logoUrl = ''
}: DynamicBrandingProps) {
    const [activeTestimonial, setActiveTestimonial] = useState(0);

    const testimonials = [
        {
            text: "Com o Aggios, nossa produtividade aumentou 40%. Gestão de projetos nunca foi tão simples!",
            author: "Maria Silva",
            company: "DigitalWorks",
            avatar: "MS"
        },
        {
            text: "Reduzi 60% do tempo gasto com controle financeiro. Tudo centralizado em um só lugar.",
            author: "João Santos",
            company: "TechHub",
            avatar: "JS"
        },
        {
            text: "A melhor decisão para nossa agência. Dashboard intuitivo e relatórios incríveis!",
            author: "Ana Costa",
            company: "CreativeFlow",
            avatar: "AC"
        }
    ];

    const stepContent = [
        {
            icon: "ri-user-heart-line",
            title: "Bem-vindo ao Aggios!",
            description: "Vamos criar sua conta em poucos passos",
            benefits: [
                "✓ Acesso completo ao painel",
                "✓ Gestão ilimitada de projetos",
                "✓ Suporte prioritário"
            ]
        },
        {
            icon: "ri-building-line",
            title: "Configure sua Empresa",
            description: "Personalize de acordo com seu negócio",
            benefits: [
                "✓ Dashboard personalizado",
                "✓ Gestão de equipe e clientes",
                "✓ Controle financeiro integrado"
            ]
        },
        {
            icon: "ri-map-pin-line",
            title: "Quase lá!",
            description: "Informações de localização e contato",
            benefits: [
                "✓ Multi-contatos configuráveis",
                "✓ Integração com WhatsApp",
                "✓ Notificações em tempo real"
            ]
        },
        {
            icon: "ri-global-line",
            title: "Seu Domínio Exclusivo",
            description: "Escolha como acessar seu painel",
            benefits: [
                "✓ Subdomínio personalizado",
                "✓ SSL incluído gratuitamente",
                "✓ Domínio próprio (opcional)"
            ]
        },
        {
            icon: "ri-palette-line",
            title: "Personalize as Cores",
            description: "Deixe com a cara da sua empresa",
            benefits: [
                "✓ Preview em tempo real",
                "✓ Paleta de cores customizada",
                "✓ Identidade visual única"
            ]
        }
    ];

    const content = stepContent[currentStep - 1] || stepContent[0];

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

    // Se for etapa 5, mostrar preview do dashboard
    if (currentStep === 5) {
        return (
            <div className="relative z-10 flex flex-col justify-center items-center w-full p-12">
                {/* 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 bg-linear-to-r from-white to-white/80 bg-clip-text text-transparent">
                            aggios
                        </h1>
                    </div>
                </div>

                {/* Conteúdo */}
                <div className="max-w-lg text-center">
                    <h2 className="text-3xl font-bold mb-2 text-white">Preview do seu Painel</h2>
                    <p className="text-white/80 text-lg">Veja como ficará seu dashboard personalizado</p>
                </div>

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

                {/* Info */}
                <div className="mt-6 text-center">
                    <p className="text-white/70 text-sm">
                        As cores e configurações são atualizadas em tempo real
                    </p>
                </div>

                {/* Decorative circles */}
                <div className="absolute -bottom-32 -left-32 w-96 h-96 rounded-full bg-white/5" />
                <div className="absolute -top-16 -right-16 w-64 h-64 rounded-full bg-white/5" />
            </div>
        );
    }

    return (
        <div className="relative z-10 flex flex-col justify-between w-full p-12 text-white">
            {/* Logo e Conteúdo da Etapa */}
            <div className="flex flex-col justify-center flex-1">
                {/* 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 bg-linear-to-r from-white to-white/80 bg-clip-text text-transparent">
                            aggios
                        </h1>
                    </div>
                </div>

                {/* Ícone e Título da Etapa */}
                <div className="mb-6">
                    <div className="w-16 h-16 rounded-2xl bg-white/20 flex items-center justify-center mb-4">
                        <i className={`${content.icon} text-3xl`} />
                    </div>
                    <h2 className="text-3xl font-bold mb-2">{content.title}</h2>
                    <p className="text-white/80 text-lg">{content.description}</p>
                </div>

                {/* Benefícios */}
                <div className="space-y-3 mb-8">
                    {content.benefits.map((benefit, index) => (
                        <div
                            key={index}
                            className="flex items-center gap-3 text-white/90 animate-fade-in"
                            style={{ animationDelay: `${index * 100}ms` }}
                        >
                            <span className="text-lg">{benefit}</span>
                        </div>
                    ))}
                </div>
            </div>

            {/* Carrossel de Depoimentos */}
            <div className="relative">
                <div className="bg-white/10 backdrop-blur-sm rounded-2xl p-6 border border-white/20">
                    <div className="mb-4">
                        <i className="ri-double-quotes-l text-3xl text-white/40" />
                    </div>
                    <p className="text-white/95 mb-4 min-h-[60px]">
                        {testimonials[activeTestimonial].text}
                    </p>
                    <div className="flex items-center gap-3">
                        <div className="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center font-semibold">
                            {testimonials[activeTestimonial].avatar}
                        </div>
                        <div>
                            <p className="font-semibold text-white">
                                {testimonials[activeTestimonial].author}
                            </p>
                            <p className="text-sm text-white/70">
                                {testimonials[activeTestimonial].company}
                            </p>
                        </div>
                    </div>
                </div>

                {/* Indicadores */}
                <div className="flex gap-2 justify-center mt-4">
                    {testimonials.map((_, index) => (
                        <button
                            key={index}
                            onClick={() => setActiveTestimonial(index)}
                            className={`h-1.5 rounded-full transition-all ${index === activeTestimonial
                                ? "w-8 bg-white"
                                : "w-1.5 bg-white/40 hover:bg-white/60"
                                }`}
                            aria-label={`Ir para depoimento ${index + 1}`}
                        />
                    ))}
                </div>
            </div>

            {/* Decorative circles */}
            <div className="absolute -bottom-32 -left-32 w-96 h-96 rounded-full bg-white/5" />
            <div className="absolute -top-16 -right-16 w-64 h-64 rounded-full bg-white/5" />
        </div>
    );
}