"use client";

import { useState, useEffect } from 'react';
import { Tab } from '@headlessui/react';
import { Dialog } from '@/components/ui';
import {
    BuildingOfficeIcon,
    SwatchIcon,
    PhotoIcon,
    UserGroupIcon,
    ShieldCheckIcon,
    BellIcon,
} from '@heroicons/react/24/outline';

const tabs = [
    { name: 'Dados da Agência', icon: BuildingOfficeIcon },
    { name: 'Personalização', icon: SwatchIcon },
    { name: 'Logo e Marca', icon: PhotoIcon },
    { name: 'Equipe', icon: UserGroupIcon },
    { name: 'Segurança', icon: ShieldCheckIcon },
    { name: 'Notificações', icon: BellIcon },
];

const themePresets = [
    { name: 'Marca', gradient: 'linear-gradient(135deg, #ff3a05, #ff0080)', colors: ['#ff3a05', '#ff0080'] },
    { name: 'Azul/Roxo', gradient: 'linear-gradient(135deg, #0066FF, #9333EA)', colors: ['#0066FF', '#9333EA'] },
    { name: 'Verde/Esmeralda', gradient: 'linear-gradient(135deg, #10B981, #059669)', colors: ['#10B981', '#059669'] },
    { name: 'Ciano/Azul', gradient: 'linear-gradient(135deg, #06B6D4, #3B82F6)', colors: ['#06B6D4', '#3B82F6'] },
    { name: 'Rosa/Roxo', gradient: 'linear-gradient(135deg, #EC4899, #A855F7)', colors: ['#EC4899', '#A855F7'] },
    { name: 'Vermelho/Laranja', gradient: 'linear-gradient(135deg, #EF4444, #F97316)', colors: ['#EF4444', '#F97316'] },
];

const DEFAULT_GRADIENT = 'linear-gradient(135deg, #ff3a05, #ff0080)';
const THEME_STORAGE_PREFIX = 'agency-theme:';

const setThemeVariables = (gradient: string) => {
    document.documentElement.style.setProperty('--gradient-primary', gradient);
    document.documentElement.style.setProperty('--gradient', gradient);
    document.documentElement.style.setProperty('--gradient-text', gradient.replace('90deg', 'to right'));
    document.documentElement.style.setProperty('--color-gradient-brand', gradient.replace('90deg', 'to right'));
};

export default function ConfiguracoesPage() {
    const [selectedTab, setSelectedTab] = useState(0);
    const [selectedTheme, setSelectedTheme] = useState(0);
    const [activeGradient, setActiveGradient] = useState(DEFAULT_GRADIENT);
    const [themeKey, setThemeKey] = useState('default');
    const [customColor1, setCustomColor1] = useState('#ff3a05');
    const [customColor2, setCustomColor2] = useState('#ff0080');
    const [showSuccessDialog, setShowSuccessDialog] = useState(false);
    const [successMessage, setSuccessMessage] = useState('');
    const [showSupportDialog, setShowSupportDialog] = useState(false);
    const [supportMessage, setSupportMessage] = useState('Para alterar estes dados, contate o suporte.');
    const [loading, setLoading] = useState(true);

    // Dados da agência (buscados da API)
    const [agencyData, setAgencyData] = useState({
        name: '',
        cnpj: '',
        email: '',
        phone: '',
        website: '',
        address: '',
        city: '',
        state: '',
        zip: '',
        razaoSocial: '',
        description: '',
        industry: '',
    });

    // Dados para alteração de senha
    const [passwordData, setPasswordData] = useState({
        currentPassword: '',
        newPassword: '',
        confirmPassword: '',
    });

    // Buscar dados da agência da API e inicializar tema salvo
    useEffect(() => {
        const fetchAgencyData = async () => {
            try {
                setLoading(true);
                const token = localStorage.getItem('token');
                const userData = localStorage.getItem('user');

                if (!token || !userData) {
                    console.error('Usuário não autenticado');
                    setLoading(false);
                    return;
                }

                const parsedUser = JSON.parse(userData);
                const hostname = window.location.hostname;
                const hostSubdomain = hostname.split('.')[0] || 'default';
                const key = parsedUser?.subdomain || parsedUser?.tenantId || hostSubdomain;

                setThemeKey(key);

                const savedGradient = localStorage.getItem(`${THEME_STORAGE_PREFIX}${key}`) || DEFAULT_GRADIENT;
                setActiveGradient(savedGradient);
                setThemeVariables(savedGradient);

                const presetIndex = themePresets.findIndex((theme) => theme.gradient === savedGradient);
                if (presetIndex >= 0) {
                    setSelectedTheme(presetIndex);
                    setCustomColor1(themePresets[presetIndex].colors[0]);
                    setCustomColor2(themePresets[presetIndex].colors[1]);
                }

                // Buscar dados da API
                const response = await fetch('/api/agency/profile', {
                    headers: {
                        'Authorization': `Bearer ${token}`,
                        'Content-Type': 'application/json',
                    },
                });

                if (response.ok) {
                    const data = await response.json();
                    setAgencyData({
                        name: data.name || '',
                        cnpj: data.cnpj || '',
                        email: data.email || '',
                        phone: data.phone || '',
                        website: data.website || '',
                        address: data.address || '',
                        city: data.city || '',
                        state: data.state || '',
                        zip: data.zip || '',
                        razaoSocial: data.razao_social || '',
                        description: data.description || '',
                        industry: data.industry || '',
                    });
                } else {
                    console.error('Erro ao buscar dados:', response.status);
                    // Fallback para localStorage se API falhar
                    const savedData = localStorage.getItem('cadastroData');
                    if (savedData) {
                        const data = JSON.parse(savedData);
                        const user = JSON.parse(userData);
                        setAgencyData({
                            name: data.formData?.companyName || '',
                            cnpj: data.formData?.cnpj || '',
                            email: data.formData?.email || user.email || '',
                            phone: data.contacts?.[0]?.phone || '',
                            website: data.formData?.website || '',
                            address: `${data.cepData?.logradouro || ''}, ${data.formData?.number || ''}`,
                            city: data.cepData?.localidade || '',
                            state: data.cepData?.uf || '',
                            zip: data.formData?.cep || '',
                            razaoSocial: data.cnpjData?.razaoSocial || '',
                            description: data.formData?.description || '',
                            industry: data.formData?.industry || '',
                        });
                    }
                }
            } catch (error) {
                console.error('Erro ao buscar dados da agência:', error);
                setSuccessMessage('Erro ao carregar dados da agência.');
                setShowSuccessDialog(true);
            } finally {
                setLoading(false);
            }
        };

        fetchAgencyData();
    }, []);

    const applyTheme = (gradient: string) => {
        setActiveGradient(gradient);
        setThemeVariables(gradient);
    };

    const applyCustomTheme = () => {
        const gradient = `linear-gradient(90deg, ${customColor1}, ${customColor2})`;
        setSelectedTheme(-1);
        applyTheme(gradient);
    };

    const handleSaveAgency = async () => {
        try {
            const token = localStorage.getItem('token');
            if (!token) {
                setSuccessMessage('Você precisa estar autenticado.');
                setShowSuccessDialog(true);
                return;
            }

            const response = await fetch('/api/agency/profile', {
                method: 'PUT',
                headers: {
                    'Authorization': `Bearer ${token}`,
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    name: agencyData.name,
                    cnpj: agencyData.cnpj,
                    email: agencyData.email,
                    phone: agencyData.phone,
                    website: agencyData.website,
                    address: agencyData.address,
                    city: agencyData.city,
                    state: agencyData.state,
                    zip: agencyData.zip,
                    razao_social: agencyData.razaoSocial,
                    description: agencyData.description,
                    industry: agencyData.industry,
                }),
            });

            if (response.ok) {
                setSuccessMessage('Dados da agência salvos com sucesso!');
            } else {
                setSuccessMessage('Erro ao salvar dados. Tente novamente.');
            }
        } catch (error) {
            console.error('Erro ao salvar:', error);
            setSuccessMessage('Erro ao salvar dados. Verifique sua conexão.');
        }
        setShowSuccessDialog(true);
    };

    const handleSaveTheme = () => {
        const gradientToSave = selectedTheme >= 0
            ? themePresets[selectedTheme].gradient
            : activeGradient;

        applyTheme(gradientToSave);
        if (themeKey) {
            localStorage.setItem(`${THEME_STORAGE_PREFIX}${themeKey}`, gradientToSave);
        }

        setSuccessMessage('Tema salvo com sucesso!');
        setShowSuccessDialog(true);
    };

    const handleChangePassword = async () => {
        // Validações
        if (!passwordData.currentPassword) {
            setSuccessMessage('Por favor, informe sua senha atual.');
            setShowSuccessDialog(true);
            return;
        }
        if (!passwordData.newPassword || passwordData.newPassword.length < 8) {
            setSuccessMessage('A nova senha deve ter pelo menos 8 caracteres.');
            setShowSuccessDialog(true);
            return;
        }
        if (passwordData.newPassword !== passwordData.confirmPassword) {
            setSuccessMessage('As senhas não coincidem.');
            setShowSuccessDialog(true);
            return;
        }

        try {
            const token = localStorage.getItem('token');
            if (!token) {
                setSuccessMessage('Você precisa estar autenticado.');
                setShowSuccessDialog(true);
                return;
            }

            const response = await fetch('/api/auth/change-password', {
                method: 'POST',
                headers: {
                    'Authorization': `Bearer ${token}`,
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    currentPassword: passwordData.currentPassword,
                    newPassword: passwordData.newPassword,
                }),
            });

            if (response.ok) {
                setPasswordData({ currentPassword: '', newPassword: '', confirmPassword: '' });
                setSuccessMessage('Senha alterada com sucesso!');
            } else {
                const error = await response.text();
                setSuccessMessage(error || 'Erro ao alterar senha. Verifique sua senha atual.');
            }
        } catch (error) {
            console.error('Erro ao alterar senha:', error);
            setSuccessMessage('Erro ao alterar senha. Verifique sua conexão.');
        }
        setShowSuccessDialog(true);
    };

    return (
        <div className="p-6 max-w-7xl mx-auto">
            {/* Header */}
            <div className="mb-8">
                <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">
                    Configurações
                </h1>
                <p className="text-gray-600 dark:text-gray-400">
                    Gerencie as configurações da sua agência
                </p>
            </div>

            {/* Loading State */}
            {loading ? (
                <div className="flex items-center justify-center py-12">
                    <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-gray-900 dark:border-gray-100"></div>
                </div>
            ) : (
                <>
                    {/* Tabs */}
                    <Tab.Group selectedIndex={selectedTab} onChange={setSelectedTab}>
                        <Tab.List className="flex space-x-1 rounded-xl bg-gray-100 dark:bg-gray-800 p-1 mb-8">
                            {tabs.map((tab) => {
                                const Icon = tab.icon;
                                return (
                                    <Tab
                                        key={tab.name}
                                        className={({ selected }) =>
                                            `w-full flex items-center justify-center space-x-2 rounded-lg py-2.5 text-sm font-medium leading-5 transition-all
                                    ${selected
                                                ? 'bg-white dark:bg-gray-900 text-gray-900 dark:text-white shadow'
                                                : 'text-gray-600 dark:text-gray-400 hover:bg-white/50 dark:hover:bg-gray-700/50 hover:text-gray-900 dark:hover:text-white'
                                            }`
                                        }
                                    >
                                        <Icon className="w-5 h-5" />
                                        <span className="hidden sm:inline">{tab.name}</span>
                                    </Tab>
                                );
                            })}
                        </Tab.List>

                        <Tab.Panels>
                            {/* Tab 1: Dados da Agência */}
                            <Tab.Panel className="rounded-xl bg-white dark:bg-gray-800 p-6 border border-gray-200 dark:border-gray-700">
                                <h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-6">
                                    Informações da Agência
                                </h2>

                                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                                    <div>
                                        <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                            Nome da Agência
                                        </label>
                                        <input
                                            type="text"
                                            value={agencyData.name}
                                            onChange={(e) => setAgencyData({ ...agencyData, name: e.target.value })}
                                            className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600 focus:outline-none"
                                        />
                                    </div>

                                    <div>
                                        <label className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 flex items-center justify-between">
                                            <span>CNPJ</span>
                                            <span className="text-xs text-gray-500">Alteração via suporte</span>
                                        </label>
                                        <input
                                            type="text"
                                            value={agencyData.cnpj}
                                            readOnly
                                            onClick={() => {
                                                setSupportMessage('Para alterar CNPJ, contate o suporte.');
                                                setShowSupportDialog(true);
                                            }}
                                            className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-white focus:outline-none cursor-pointer"
                                        />
                                    </div>

                                    <div>
                                        <label className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 flex items-center justify-between">
                                            <span>E-mail (acesso)</span>
                                            <span className="text-xs text-gray-500">Alteração via suporte</span>
                                        </label>
                                        <input
                                            type="email"
                                            value={agencyData.email}
                                            readOnly
                                            onClick={() => {
                                                setSupportMessage('Para alterar o e-mail de acesso, contate o suporte.');
                                                setShowSupportDialog(true);
                                            }}
                                            className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-white focus:outline-none cursor-pointer"
                                        />
                                    </div>

                                    <div>
                                        <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                            Telefone / WhatsApp
                                        </label>
                                        <input
                                            type="tel"
                                            value={agencyData.phone}
                                            onChange={(e) => setAgencyData({ ...agencyData, phone: e.target.value })}
                                            className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600 focus:outline-none"
                                        />
                                    </div>

                                    <div className="md:col-span-2">
                                        <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                            Website
                                        </label>
                                        <input
                                            type="url"
                                            value={agencyData.website}
                                            onChange={(e) => setAgencyData({ ...agencyData, website: e.target.value })}
                                            className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600 focus:outline-none"
                                        />
                                    </div>

                                    <div>
                                        <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                            CEP
                                        </label>
                                        <input
                                            type="text"
                                            value={agencyData.zip}
                                            onChange={(e) => setAgencyData({ ...agencyData, zip: e.target.value })}
                                            className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600 focus:outline-none"
                                        />
                                    </div>

                                    <div className="md:col-span-2">
                                        <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                            Endereço
                                        </label>
                                        <input
                                            type="text"
                                            value={agencyData.address}
                                            onChange={(e) => setAgencyData({ ...agencyData, address: e.target.value })}
                                            className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600 focus:outline-none"
                                        />
                                    </div>

                                    <div>
                                        <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                            Cidade
                                        </label>
                                        <input
                                            type="text"
                                            value={agencyData.city}
                                            onChange={(e) => setAgencyData({ ...agencyData, city: e.target.value })}
                                            className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600 focus:outline-none"
                                        />
                                    </div>

                                    <div>
                                        <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                            Estado
                                        </label>
                                        <input
                                            type="text"
                                            value={agencyData.state}
                                            onChange={(e) => setAgencyData({ ...agencyData, state: e.target.value })}
                                            className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600 focus:outline-none"
                                        />
                                    </div>


                                </div>

                                <div className="mt-6 flex justify-end">
                                    <button
                                        onClick={handleSaveAgency}
                                        className="px-6 py-2 rounded-lg text-white font-medium transition-all hover:scale-105"
                                        style={{ background: 'var(--gradient-primary)' }}
                                    >
                                        Salvar Alterações
                                    </button>
                                </div>
                            </Tab.Panel>

                            {/* Tab 2: Personalização */}
                            <Tab.Panel className="rounded-xl bg-white dark:bg-gray-800 p-6 border border-gray-200 dark:border-gray-700">
                                <h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-6">
                                    Personalização do Dashboard
                                </h2>

                                {/* Temas Pré-definidos */}
                                <div className="mb-8">
                                    <h3 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-4">
                                        Temas Pré-definidos
                                    </h3>
                                    <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
                                        {themePresets.map((theme, idx) => (
                                            <button
                                                key={theme.name}
                                                onClick={() => {
                                                    setSelectedTheme(idx);
                                                    applyTheme(theme.gradient);
                                                }}
                                                className={`p-4 rounded-xl border-2 transition-all hover:scale-105 ${selectedTheme === idx
                                                    ? 'border-gray-900 dark:border-gray-100'
                                                    : 'border-gray-200 dark:border-gray-700'
                                                    }`}
                                            >
                                                <div
                                                    className="w-full h-24 rounded-lg mb-3"
                                                    style={{ background: theme.gradient }}
                                                />
                                                <p className="text-sm font-medium text-gray-900 dark:text-white">
                                                    {theme.name}
                                                </p>
                                            </button>
                                        ))}
                                    </div>
                                </div>

                                {/* Cores Customizadas */}
                                <div className="mb-8">
                                    <h3 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-4">
                                        Cores Personalizadas
                                    </h3>
                                    <div className="flex items-center space-x-4">
                                        <div>
                                            <label className="block text-xs text-gray-600 dark:text-gray-400 mb-2">
                                                Cor Primária
                                            </label>
                                            <input
                                                type="color"
                                                value={customColor1}
                                                onChange={(e) => setCustomColor1(e.target.value)}
                                                className="w-20 h-20 rounded-lg cursor-pointer border-2 border-gray-300 dark:border-gray-600"
                                            />
                                        </div>
                                        <div>
                                            <label className="block text-xs text-gray-600 dark:text-gray-400 mb-2">
                                                Cor Secundária
                                            </label>
                                            <input
                                                type="color"
                                                value={customColor2}
                                                onChange={(e) => setCustomColor2(e.target.value)}
                                                className="w-20 h-20 rounded-lg cursor-pointer border-2 border-gray-300 dark:border-gray-600"
                                            />
                                        </div>
                                        <div className="flex-1">
                                            <label className="block text-xs text-gray-600 dark:text-gray-400 mb-2">
                                                Preview
                                            </label>
                                            <div
                                                className="h-20 rounded-lg"
                                                style={{ background: `linear-gradient(90deg, ${customColor1}, ${customColor2})` }}
                                            />
                                        </div>
                                        <button
                                            onClick={applyCustomTheme}
                                            className="px-4 py-2 bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 rounded-lg font-medium hover:scale-105 transition-all"
                                        >
                                            Aplicar
                                        </button>
                                    </div>
                                </div>

                                <div className="mt-6 flex justify-end">
                                    <button
                                        onClick={handleSaveTheme}
                                        className="px-6 py-2 rounded-lg text-white font-medium transition-all hover:scale-105"
                                        style={{ background: 'var(--gradient-primary)' }}
                                    >
                                        Salvar Tema
                                    </button>
                                </div>
                            </Tab.Panel>

                            {/* Tab 3: Logo e Marca */}
                            <Tab.Panel className="rounded-xl bg-white dark:bg-gray-800 p-6 border border-gray-200 dark:border-gray-700">
                                <h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-6">
                                    Logo e Identidade Visual
                                </h2>

                                <div className="space-y-6">
                                    <div>
                                        <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-4">
                                            Logo Principal
                                        </label>
                                        <div className="border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-xl p-8 text-center">
                                            <PhotoIcon className="w-12 h-12 mx-auto text-gray-400 mb-3" />
                                            <p className="text-sm text-gray-600 dark:text-gray-400 mb-2">
                                                Arraste e solte sua logo aqui ou clique para fazer upload
                                            </p>
                                            <p className="text-xs text-gray-500 dark:text-gray-500">
                                                PNG, JPG ou SVG (máx. 2MB)
                                            </p>
                                            <button className="mt-4 px-4 py-2 bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 rounded-lg text-sm font-medium hover:scale-105 transition-all">
                                                Selecionar Arquivo
                                            </button>
                                        </div>
                                    </div>

                                    <div>
                                        <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-4">
                                            Favicon
                                        </label>
                                        <div className="border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-xl p-8 text-center">
                                            <PhotoIcon className="w-12 h-12 mx-auto text-gray-400 mb-3" />
                                            <p className="text-sm text-gray-600 dark:text-gray-400 mb-2">
                                                Upload do favicon (ícone da aba do navegador)
                                            </p>
                                            <p className="text-xs text-gray-500 dark:text-gray-500">
                                                ICO ou PNG 32x32 pixels
                                            </p>
                                            <button className="mt-4 px-4 py-2 bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 rounded-lg text-sm font-medium hover:scale-105 transition-all">
                                                Selecionar Arquivo
                                            </button>
                                        </div>
                                    </div>
                                </div>

                                <div className="mt-6 flex justify-end">
                                    <button
                                        className="px-6 py-2 rounded-lg text-white font-medium transition-all hover:scale-105"
                                        style={{ background: 'var(--gradient-primary)' }}
                                    >
                                        Salvar Alterações
                                    </button>
                                </div>
                            </Tab.Panel>

                            {/* Tab 4: Equipe */}
                            <Tab.Panel className="rounded-xl bg-white dark:bg-gray-800 p-6 border border-gray-200 dark:border-gray-700">
                                <h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-6">
                                    Gerenciamento de Equipe
                                </h2>

                                <div className="text-center py-12">
                                    <UserGroupIcon className="w-16 h-16 mx-auto text-gray-300 dark:text-gray-600 mb-4" />
                                    <p className="text-gray-600 dark:text-gray-400 mb-4">
                                        Em breve: gerenciamento completo de usuários e permissões
                                    </p>
                                    <button className="px-6 py-2 bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 rounded-lg font-medium hover:scale-105 transition-all">
                                        Convidar Membro
                                    </button>
                                </div>
                            </Tab.Panel>

                            {/* Tab 5: Segurança */}
                            <Tab.Panel className="rounded-xl bg-white dark:bg-gray-800 p-6 border border-gray-200 dark:border-gray-700">
                                <h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-6">
                                    Segurança e Privacidade
                                </h2>

                                {/* Alteração de Senha */}
                                <div className="max-w-2xl">
                                    <h3 className="text-md font-medium text-gray-900 dark:text-white mb-4">
                                        Alterar Senha
                                    </h3>

                                    <div className="space-y-4">
                                        <div>
                                            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                                Senha Atual
                                            </label>
                                            <input
                                                type="password"
                                                value={passwordData.currentPassword}
                                                onChange={(e) => setPasswordData({ ...passwordData, currentPassword: e.target.value })}
                                                className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600 focus:outline-none"
                                                placeholder="Digite sua senha atual"
                                            />
                                        </div>

                                        <div>
                                            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                                Nova Senha
                                            </label>
                                            <input
                                                type="password"
                                                value={passwordData.newPassword}
                                                onChange={(e) => setPasswordData({ ...passwordData, newPassword: e.target.value })}
                                                className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600 focus:outline-none"
                                                placeholder="Digite a nova senha (mínimo 8 caracteres)"
                                            />
                                        </div>

                                        <div>
                                            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                                Confirmar Nova Senha
                                            </label>
                                            <input
                                                type="password"
                                                value={passwordData.confirmPassword}
                                                onChange={(e) => setPasswordData({ ...passwordData, confirmPassword: e.target.value })}
                                                className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600 focus:outline-none"
                                                placeholder="Digite a nova senha novamente"
                                            />
                                        </div>

                                        <div className="pt-4">
                                            <button
                                                onClick={handleChangePassword}
                                                className="px-6 py-2 rounded-lg text-white font-medium transition-all hover:scale-105"
                                                style={{ background: 'var(--gradient-primary)' }}
                                            >
                                                Alterar Senha
                                            </button>
                                        </div>
                                    </div>

                                    {/* Recursos Futuros */}
                                    <div className="mt-8 pt-8 border-t border-gray-200 dark:border-gray-700">
                                        <h3 className="text-md font-medium text-gray-900 dark:text-white mb-4">
                                            Recursos em Desenvolvimento
                                        </h3>
                                        <div className="space-y-3 text-sm text-gray-600 dark:text-gray-400">
                                            <div className="flex items-center space-x-2">
                                                <ShieldCheckIcon className="w-5 h-5" />
                                                <span>Autenticação em duas etapas (2FA)</span>
                                            </div>
                                            <div className="flex items-center space-x-2">
                                                <ShieldCheckIcon className="w-5 h-5" />
                                                <span>Histórico de acessos</span>
                                            </div>
                                            <div className="flex items-center space-x-2">
                                                <ShieldCheckIcon className="w-5 h-5" />
                                                <span>Dispositivos conectados</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </Tab.Panel>

                            {/* Tab 6: Notificações */}
                            <Tab.Panel className="rounded-xl bg-white dark:bg-gray-800 p-6 border border-gray-200 dark:border-gray-700">
                                <h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-6">
                                    Preferências de Notificações
                                </h2>

                                <div className="text-center py-12">
                                    <BellIcon className="w-16 h-16 mx-auto text-gray-300 dark:text-gray-600 mb-4" />
                                    <p className="text-gray-600 dark:text-gray-400">
                                        Em breve: configuração de notificações por e-mail, push e mais
                                    </p>
                                </div>
                            </Tab.Panel>
                        </Tab.Panels>
                    </Tab.Group>
                </>
            )}

            {/* Dialog de Sucesso */}
            <Dialog
                isOpen={showSuccessDialog}
                onClose={() => setShowSuccessDialog(false)}
                title="Sucesso"
                size="sm"
            >
                <Dialog.Body>
                    <p className="text-center py-4">{successMessage}</p>
                </Dialog.Body>
                <Dialog.Footer>
                    <button
                        onClick={() => setShowSuccessDialog(false)}
                        className="px-6 py-2 rounded-lg text-white font-medium transition-all hover:scale-105"
                        style={{ background: 'var(--gradient-primary)' }}
                    >
                        OK
                    </button>
                </Dialog.Footer>
            </Dialog>

            {/* Dialog de Suporte */}
            <Dialog
                isOpen={showSupportDialog}
                onClose={() => setShowSupportDialog(false)}
                title="Contatar suporte"
            >
                <Dialog.Body>
                    <p className="text-sm text-gray-700 dark:text-gray-200">{supportMessage}</p>
                    <p className="mt-3 text-sm text-gray-500">Envie um e-mail para suporte@aggios.app ou abra um chamado para ajuste desses dados.</p>
                </Dialog.Body>
                <Dialog.Footer>
                    <button
                        onClick={() => setShowSupportDialog(false)}
                        className="px-4 py-2 bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 rounded-lg font-medium hover:scale-105 transition-all"
                    >
                        Fechar
                    </button>
                </Dialog.Footer>
            </Dialog>
        </div>
    );
}