"use client";

interface DashboardPreviewProps {
    companyName: string;
    subdomain: string;
    primaryColor: string;
    secondaryColor: string;
    logoUrl?: string;
}

export default function DashboardPreview({
    companyName,
    subdomain,
    primaryColor,
    secondaryColor,
    logoUrl
}: DashboardPreviewProps) {
    return (
        <div className="bg-white rounded-lg border-2 border-[#E5E5E5] overflow-hidden shadow-lg">
            {/* Header do Preview */}
            <div className="bg-[#F5F5F5] px-3 py-2 border-b border-[#E5E5E5] flex items-center gap-2">
                <div className="flex gap-1.5">
                    <div className="w-3 h-3 rounded-full bg-[#FF5F57]" />
                    <div className="w-3 h-3 rounded-full bg-[#FFBD2E]" />
                    <div className="w-3 h-3 rounded-full bg-[#28CA42]" />
                </div>
                <div className="flex-1 text-center">
                    <span className="text-xs text-[#7D7D7D]">
                        {subdomain || 'seu-dominio'}.aggios.app
                    </span>
                </div>
            </div>

            {/* Conteúdo do Preview - Dashboard */}
            <div className="aspect-video bg-[#F8F9FA] relative overflow-hidden">
                {/* Sidebar */}
                <div
                    className="absolute left-0 top-0 bottom-0 w-16 flex flex-col items-center py-4 gap-3"
                    style={{ backgroundColor: primaryColor }}
                >
                    {/* Logo/Initial */}
                    <div className="w-10 h-10 rounded-lg bg-white/20 flex items-center justify-center text-white font-bold text-sm overflow-hidden">
                        {logoUrl ? (
                            <img src={logoUrl} alt="Logo" className="w-full h-full object-cover" />
                        ) : (
                            <span>{(companyName || 'E')[0].toUpperCase()}</span>
                        )}
                    </div>
                    {/* Menu Icons */}
                    <div className="w-10 h-10 rounded-lg bg-white/10 flex items-center justify-center">
                        <i className="ri-dashboard-line text-white text-lg" />
                    </div>
                    <div className="w-10 h-10 rounded-lg flex items-center justify-center text-white/60">
                        <i className="ri-folder-line text-lg" />
                    </div>
                    <div className="w-10 h-10 rounded-lg flex items-center justify-center text-white/60">
                        <i className="ri-team-line text-lg" />
                    </div>
                    <div className="w-10 h-10 rounded-lg flex items-center justify-center text-white/60">
                        <i className="ri-settings-3-line text-lg" />
                    </div>
                </div>

                {/* Main Content */}
                <div className="ml-16 p-4">
                    {/* Top Bar */}
                    <div className="flex items-center justify-between mb-4">
                        <div>
                            <h2 className="text-sm font-bold text-[#000000]">
                                {companyName || 'Sua Empresa'}
                            </h2>
                            <p className="text-xs text-[#7D7D7D]">Dashboard</p>
                        </div>
                        <div className="flex gap-2">
                            <div className="w-6 h-6 rounded-full bg-[#E5E5E5]" />
                            <div className="w-6 h-6 rounded-full bg-[#E5E5E5]" />
                        </div>
                    </div>

                    {/* Stats Cards */}
                    <div className="grid grid-cols-3 gap-2 mb-3">
                        <div className="bg-white rounded-lg p-2 border border-[#E5E5E5]">
                            <div className="flex items-center gap-2 mb-1">
                                <div
                                    className="w-6 h-6 rounded flex items-center justify-center"
                                    style={{ backgroundColor: `${primaryColor}20` }}
                                >
                                    <i className="ri-folder-line text-xs" style={{ color: primaryColor }} />
                                </div>
                                <span className="text-[10px] text-[#7D7D7D]">Projetos</span>
                            </div>
                            <p className="text-sm font-bold" style={{ color: primaryColor }}>24</p>
                        </div>
                        <div className="bg-white rounded-lg p-2 border border-[#E5E5E5]">
                            <div className="flex items-center gap-2 mb-1">
                                <div
                                    className="w-6 h-6 rounded flex items-center justify-center"
                                    style={{ backgroundColor: secondaryColor ? `${secondaryColor}20` : '#10B98120' }}
                                >
                                    <i className="ri-team-line text-xs" style={{ color: secondaryColor || '#10B981' }} />
                                </div>
                                <span className="text-[10px] text-[#7D7D7D]">Clientes</span>
                            </div>
                            <p className="text-sm font-bold" style={{ color: secondaryColor || '#10B981' }}>15</p>
                        </div>
                        <div className="bg-white rounded-lg p-2 border border-[#E5E5E5]">
                            <div className="flex items-center gap-2 mb-1">
                                <div className="w-6 h-6 rounded flex items-center justify-center bg-[#7D7D7D]/10">
                                    <i className="ri-money-dollar-circle-line text-xs text-[#7D7D7D]" />
                                </div>
                                <span className="text-[10px] text-[#7D7D7D]">Receita</span>
                            </div>
                            <p className="text-sm font-bold text-[#7D7D7D]">R$ 45k</p>
                        </div>
                    </div>

                    {/* Chart Area */}
                    <div className="bg-white rounded-lg p-3 border border-[#E5E5E5]">
                        <div className="flex items-center justify-between mb-2">
                            <span className="text-xs font-semibold text-[#000000]">Desempenho</span>
                            <button
                                className="px-2 py-0.5 rounded text-[10px] text-white"
                                style={{ backgroundColor: primaryColor }}
                            >
                                Este mês
                            </button>
                        </div>
                        <div className="flex items-end gap-1 h-16">
                            {[40, 70, 45, 80, 60, 90, 75].map((height, i) => (
                                <div key={i} className="flex-1 flex flex-col justify-end">
                                    <div
                                        className="w-full rounded-t transition-all"
                                        style={{
                                            height: `${height}%`,
                                            backgroundColor: i === 6 ? primaryColor : `${primaryColor}40`
                                        }}
                                    />
                                </div>
                            ))}
                        </div>
                    </div>
                </div>
            </div>

            {/* Footer Preview */}
            <div className="bg-[#F5F5F5] px-3 py-2 text-center border-t border-[#E5E5E5]">
                <p className="text-[10px] text-[#7D7D7D]">
                    Preview do seu painel • As cores e layout podem ser ajustados
                </p>
            </div>
        </div>
    );
}