import React, { useState, useEffect, useCallback } from 'react';
import { useUser, useOrganization } from '@clerk/clerk-react';
import { Shield, UserCheck, UserX, Users, Search, RefreshCw, Crown, Eye, User as UserIcon, Upload, Info, Image as ImageIcon, Box, Database } from 'lucide-react';
import { clsx } from 'clsx';
import type { AppUser, UserRole } from '../types';
import { useAuth } from '../context/useAuth';
import api from '../services/api';
import { GeometrySettings } from '../components/admin/GeometrySettings';
import { BackupRestore } from '../components/admin/BackupRestore';

const roleLabels: Record<UserRole, { label: string; color: string; icon: React.ReactNode }> = {
    admin: { label: 'Administrador', color: 'bg-amber-500/20 text-amber-400 border-amber-500/30', icon: <Crown size={14} /> },
    user: { label: 'Usuário', color: 'bg-primary/20 text-primary border-primary/30', icon: <UserIcon size={14} /> },
    guest: { label: 'Convidado', color: 'bg-gray-500/20 text-gray-400 border-gray-500/30', icon: <Eye size={14} /> },
};

export const AdminDashboard: React.FC = () => {
    const { user } = useUser();
    const { organization } = useOrganization();
    const { isAdmin } = useAuth();
    const [users, setUsers] = useState<AppUser[]>([]);
    const [isLoading, setIsLoading] = useState(true);
    const [searchTerm, setSearchTerm] = useState('');
    const [filterRole, setFilterRole] = useState<UserRole | 'all'>('all');
    const [actionLoading, setActionLoading] = useState<string | null>(null);
    const [activeTab, setActiveTab] = useState<'users' | 'organization' | 'settings' | 'stock' | 'backup'>('users');
    const [logoLoading, setLogoLoading] = useState(false);

    const fetchUsers = useCallback(async () => {
        if (!user || !organization?.id) return;

        try {
            setIsLoading(true);
            const response = await api.get('/users');
            setUsers(response.data.map((u: AppUser) => ({ ...u, id: u._id || u.id })));
        } catch (error) {
            console.error('Error fetching users:', error);
        } finally {
            setIsLoading(false);
        }
    }, [user, organization?.id]);

    const syncOrganizationMembers = useCallback(async () => {
        if (!organization) return;

        try {
            setIsLoading(true);

            // Fetch ALL members from Clerk (handle pagination)
            console.log('Fetching members from Clerk organization:', organization.id);
            let allMembers: any[] = [];
            let hasMore = true;

            // Fetch all pages
            while (hasMore) {
                const clerkMembers = await organization.getMemberships();
                console.log(`Fetched members:`, clerkMembers.data.length);

                if (clerkMembers.data.length === 0) {
                    hasMore = false;
                } else {
                    allMembers = clerkMembers.data;
                    hasMore = false; // Clerk retorna todos de uma vez normalmente
                }
            }

            console.log('Total Clerk members fetched:', allMembers.length, allMembers);

            // Get current users from database
            const currentUsersResponse = await api.get('/users');
            const currentUsers = currentUsersResponse.data;
            console.log('Current users in database:', currentUsers.length, currentUsers);

            // Create a Set of Clerk user IDs for fast lookup
            const clerkUserIds = new Set(
                allMembers
                    .map(m => m.publicUserData?.userId)
                    .filter(id => id != null)
            );

            console.log('Clerk user IDs:', Array.from(clerkUserIds));

            // Step 1: Add/Update users from Clerk
            for (const membership of allMembers) {
                const clerkUser = membership.publicUserData;
                console.log('Processing membership:', membership);
                console.log('Public user data:', clerkUser);

                if (clerkUser) {
                    const syncData = {
                        clerkId: clerkUser.userId,
                        email: clerkUser.identifier || '',
                        name: `${clerkUser.firstName || ''} ${clerkUser.lastName || ''}`.trim() || clerkUser.identifier || 'Usuário',
                        organizationId: organization.id,
                        clerkRole: membership.role
                    };

                    console.log('Syncing user:', syncData);

                    try {
                        const response = await api.post('/users/sync', syncData);
                        console.log('Sync success for', clerkUser.userId, ':', response.data);
                    } catch (syncError) {
                        console.error('Error syncing member:', clerkUser.userId, syncError);
                    }
                }
            }

            // Step 2: Remove users from database that don't exist in Clerk anymore
            let removedCount = 0;
            for (const dbUser of currentUsers) {
                const clerkUserId = dbUser.clerkUserId || dbUser.clerkId;
                if (!clerkUserIds.has(clerkUserId)) {
                    console.log(`User ${dbUser.name} (${clerkUserId}) is in DB but not in Clerk - removing...`);
                    try {
                        await api.delete(`/users/${dbUser._id}`);
                        console.log(`Removed user ${dbUser.name} from database`);
                        removedCount++;
                    } catch (deleteError) {
                        console.error(`Error removing user ${dbUser.name}:`, deleteError);
                    }
                }
            }

            // Reload users after sync
            console.log('Reloading users from database...');
            await fetchUsers();

            const message = `Sincronização concluída!\n✅ ${allMembers.length} membros atualizados\n${removedCount > 0 ? `🗑️ ${removedCount} membros removidos` : ''}`;
            alert(message);
        } catch (error) {
            console.error('Error syncing organization members:', error);
            alert('Erro ao sincronizar membros. Verifique o console para mais detalhes.');
        } finally {
            setIsLoading(false);
        }
    }, [organization, fetchUsers]);

    useEffect(() => {
        fetchUsers();
    }, [fetchUsers]);

    const handleRoleChange = async (userId: string, newRole: UserRole) => {
        if (!user) return;

        setActionLoading(userId);
        try {
            const response = await api.patch(`/users/${userId}/role`, { role: newRole });
            const updated = response.data;
            setUsers(users.map(u => u.id === userId ? { ...updated, id: updated._id || updated.id } : u));
        } catch (error: unknown) {
            const err = error as { response?: { data?: { error?: string } } };
            console.error('Error updating role:', error);
            alert(err.response?.data?.error || 'Erro ao atualizar role');
        } finally {
            setActionLoading(null);
        }
    };

    const handleToggleBan = async (userId: string, isBanned: boolean) => {
        if (!user) return;

        setActionLoading(userId);
        try {
            const response = await api.patch(`/users/${userId}/ban`, { isBanned });
            const updated = response.data;
            setUsers(users.map(u => u.id === userId ? { ...updated, id: updated._id || updated.id } : u));
        } catch (error: unknown) {
            const err = error as { response?: { data?: { error?: string } } };
            console.error('Error toggling ban:', error);
            alert(err.response?.data?.error || 'Erro ao alterar status');
        } finally {
            setActionLoading(null);
        }
    };

    const filteredUsers = users.filter(u => {
        const matchesSearch = u.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
            u.email.toLowerCase().includes(searchTerm.toLowerCase());
        const matchesRole = filterRole === 'all' || u.role === filterRole;
        return matchesSearch && matchesRole;
    });

    const handleLogoUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
        const file = e.target.files?.[0];
        if (!file || !organization) return;

        // Validations
        const validTypes = ['image/png', 'image/jpeg', 'image/jpg', 'image/svg+xml'];
        if (!validTypes.includes(file.type)) {
            alert('Por favor, selecione uma imagem PNG, JPG ou SVG.');
            return;
        }

        if (file.size > 500 * 1024) {
            alert('O arquivo deve ter no máximo 500KB.');
            return;
        }

        setLogoLoading(true);
        try {
            await organization.setLogo({ file });
            alert('Logo atualizado com sucesso!');
        } catch (error) {
            console.error('Error uploading logo:', error);
            alert('Erro ao atualizar o logo.');
        } finally {
            setLogoLoading(false);
        }
    };

    if (!isAdmin()) {
        return (
            <div className="flex flex-col items-center justify-center min-h-[60vh] gap-4">
                <Shield size={64} className="text-error/50" />
                <h1 className="text-2xl font-bold text-text-main">Acesso Negado</h1>
                <p className="text-text-muted">Você não tem permissão para acessar esta página.</p>
            </div>
        );
    }

    return (
        <div className="space-y-8">
            {/* Header */}
            <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
                <div>
                    <h1 className="text-3xl font-black text-text-main tracking-tight flex items-center gap-3">
                        <div className="w-12 h-12 rounded-2xl bg-gradient-to-br from-amber-500 to-orange-600 flex items-center justify-center shadow-lg shadow-amber-500/30">
                            <Shield size={24} className="text-white" />
                        </div>
                        Administração
                    </h1>
                    <p className="text-text-muted mt-2">Configurações globais e gerenciamento de usuários</p>
                </div>
                {activeTab === 'users' && (
                    <div className="flex gap-2">
                        <button
                            onClick={syncOrganizationMembers}
                            disabled={isLoading}
                            className="flex items-center gap-2 px-4 py-2.5 bg-primary hover:bg-primary-dark text-white border border-primary-dark rounded-xl font-semibold transition-all disabled:opacity-50"
                        >
                            <Users size={18} className={isLoading ? 'animate-spin' : ''} />
                            Sincronizar Clerk
                        </button>
                        <button
                            onClick={fetchUsers}
                            disabled={isLoading}
                            className="flex items-center gap-2 px-4 py-2.5 bg-surface hover:bg-surface-hover border border-border/40 rounded-xl text-text-main font-semibold transition-all disabled:opacity-50"
                        >
                            <RefreshCw size={18} className={isLoading ? 'animate-spin' : ''} />
                            Atualizar
                        </button>
                    </div>
                )}
            </div>

            {/* Tabs Navigation */}
            <div className="flex p-1 bg-surface-soft rounded-xl border border-border/40 w-fit">
                <button
                    onClick={() => setActiveTab('users')}
                    className={clsx(
                        "flex items-center gap-2 px-6 py-2.5 text-sm font-bold rounded-lg transition-all",
                        activeTab === 'users'
                            ? "bg-surface text-primary shadow-sm border border-border/40"
                            : "text-text-muted hover:text-text-main hover:bg-surface-hover"
                    )}
                >
                    <Users size={16} />
                    Usuários
                </button>
                <button
                    onClick={() => setActiveTab('organization')}
                    className={clsx(
                        "flex items-center gap-2 px-6 py-2.5 text-sm font-bold rounded-lg transition-all",
                        activeTab === 'organization'
                            ? "bg-surface text-primary shadow-sm border border-border/40"
                            : "text-text-muted hover:text-text-main hover:bg-surface-hover"
                    )}
                >
                    <Upload size={16} />
                    Organização
                </button>
                <button
                    onClick={() => setActiveTab('settings')}
                    className={clsx(
                        "flex items-center gap-2 px-6 py-2.5 text-sm font-bold rounded-lg transition-all",
                        activeTab === 'settings'
                            ? "bg-surface text-primary shadow-sm border border-border/40"
                            : "text-text-muted hover:text-text-main hover:bg-surface-hover"
                    )}
                >
                    <Box size={16} />
                    Geometrias
                </button>
                <button
                    onClick={() => setActiveTab('backup')}
                    className={clsx(
                        "flex items-center gap-2 px-6 py-2.5 text-sm font-bold rounded-lg transition-all",
                        activeTab === 'backup'
                            ? "bg-surface text-primary shadow-sm border border-border/40"
                            : "text-text-muted hover:text-text-main hover:bg-surface-hover"
                    )}
                >
                    <Database size={16} />
                    Backup
                </button>
            </div>

            {activeTab === 'users' ? (
                <>
                    {/* Stats */}
                    <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
                        <div className="bg-surface rounded-2xl p-5 border border-border/40">
                            <div className="flex items-center gap-3">
                                <div className="w-10 h-10 rounded-xl bg-primary/20 flex items-center justify-center">
                                    <Users size={20} className="text-primary" />
                                </div>
                                <div>
                                    <p className="text-2xl font-black text-text-main">{users.length}</p>
                                    <p className="text-xs text-text-muted font-medium">Total</p>
                                </div>
                            </div>
                        </div>
                        <div className="bg-surface rounded-2xl p-5 border border-border/40">
                            <div className="flex items-center gap-3">
                                <div className="w-10 h-10 rounded-xl bg-amber-500/20 flex items-center justify-center">
                                    <Crown size={20} className="text-amber-400" />
                                </div>
                                <div>
                                    <p className="text-2xl font-black text-text-main">{users.filter(u => u.role === 'admin').length}</p>
                                    <p className="text-xs text-text-muted font-medium">Admins</p>
                                </div>
                            </div>
                        </div>
                        <div className="bg-surface rounded-2xl p-5 border border-border/40">
                            <div className="flex items-center gap-3">
                                <div className="w-10 h-10 rounded-xl bg-green-500/20 flex items-center justify-center">
                                    <UserCheck size={20} className="text-green-400" />
                                </div>
                                <div>
                                    <p className="text-2xl font-black text-text-main">{users.filter(u => u.role === 'user').length}</p>
                                    <p className="text-xs text-text-muted font-medium">Usuários</p>
                                </div>
                            </div>
                        </div>
                        <div className="bg-surface rounded-2xl p-5 border border-border/40">
                            <div className="flex items-center gap-3">
                                <div className="w-10 h-10 rounded-xl bg-red-500/20 flex items-center justify-center">
                                    <UserX size={20} className="text-red-400" />
                                </div>
                                <div>
                                    <p className="text-2xl font-black text-text-main">{users.filter(u => u.isBanned).length}</p>
                                    <p className="text-xs text-text-muted font-medium">Banidos</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    {/* Filters */}
                    <div className="flex flex-col sm:flex-row gap-4">
                        <div className="relative flex-1">
                            <Search size={18} className="absolute left-4 top-1/2 -translate-y-1/2 text-text-muted" />
                            <input
                                type="text"
                                placeholder="Buscar por nome ou email..."
                                value={searchTerm}
                                onChange={(e) => setSearchTerm(e.target.value)}
                                className="w-full pl-12 pr-4 py-3 bg-surface border border-border/40 rounded-xl text-text-main placeholder:text-text-muted focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all"
                            />
                        </div>
                        <select
                            value={filterRole}
                            onChange={(e) => setFilterRole(e.target.value as UserRole | 'all')}
                            aria-label="Filtrar por role"
                            className="px-4 py-3 bg-surface border border-border/40 rounded-xl text-text-main focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all"
                        >
                            <option value="all">Todos os Roles</option>
                            <option value="admin">Administradores</option>
                            <option value="user">Usuários</option>
                            <option value="guest">Convidados</option>
                        </select>
                    </div>

                    {/* Users Table */}
                    <div className="bg-surface rounded-2xl border border-border/40 overflow-hidden">
                        {isLoading ? (
                            <div className="flex items-center justify-center py-20">
                                <RefreshCw size={32} className="animate-spin text-primary" />
                            </div>
                        ) : filteredUsers.length === 0 ? (
                            <div className="flex flex-col items-center justify-center py-20 text-text-muted">
                                <Users size={48} className="mb-4 opacity-50" />
                                <p>Nenhum usuário encontrado</p>
                            </div>
                        ) : (
                            <div className="overflow-x-auto">
                                <table className="w-full">
                                    <thead>
                                        <tr className="border-b border-border/40 bg-surface-soft">
                                            <th className="text-left px-6 py-4 text-xs font-bold text-text-muted uppercase tracking-wider">Usuário</th>
                                            <th className="text-left px-6 py-4 text-xs font-bold text-text-muted uppercase tracking-wider">Email</th>
                                            <th className="text-left px-6 py-4 text-xs font-bold text-text-muted uppercase tracking-wider">Role</th>
                                            <th className="text-left px-6 py-4 text-xs font-bold text-text-muted uppercase tracking-wider">Status</th>
                                            <th className="text-right px-6 py-4 text-xs font-bold text-text-muted uppercase tracking-wider">Ações</th>
                                        </tr>
                                    </thead>
                                    <tbody className="divide-y divide-border/40">
                                        {filteredUsers.map((u) => {
                                            const roleInfo = roleLabels[u.role];
                                            const isCurrentUser = u.clerkId === user?.id;
                                            const isActionDisabled = actionLoading === u.id;

                                            return (
                                                <tr key={u.id} className={`hover:bg-surface-hover transition-colors ${u.isBanned ? 'opacity-60' : ''}`}>
                                                    <td className="px-6 py-4">
                                                        <div className="flex items-center gap-3">
                                                            <div className="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center text-primary font-bold">
                                                                {u.name.charAt(0).toUpperCase()}
                                                            </div>
                                                            <div>
                                                                <p className="font-semibold text-text-main">{u.name}</p>
                                                                {isCurrentUser && (
                                                                    <span className="text-xs text-primary font-medium">(Você)</span>
                                                                )}
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td className="px-6 py-4 text-text-secondary">{u.email}</td>
                                                    <td className="px-6 py-4">
                                                        <select
                                                            value={u.role}
                                                            onChange={(e) => handleRoleChange(u.id, e.target.value as UserRole)}
                                                            disabled={isCurrentUser || isActionDisabled || u.isBanned}
                                                            aria-label={`Alterar role de ${u.name}`}
                                                            className={`px-3 py-1.5 rounded-lg border text-sm font-semibold transition-all ${roleInfo.color} disabled:opacity-50 disabled:cursor-not-allowed bg-transparent`}
                                                        >
                                                            <option value="guest">Convidado</option>
                                                            <option value="user">Usuário</option>
                                                            <option value="admin">Administrador</option>
                                                        </select>
                                                    </td>
                                                    <td className="px-6 py-4">
                                                        {u.isBanned ? (
                                                            <span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-lg bg-red-500/20 text-red-400 border border-red-500/30 text-sm font-semibold">
                                                                <UserX size={14} />
                                                                Banido
                                                            </span>
                                                        ) : (
                                                            <span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-lg bg-green-500/20 text-green-400 border border-green-500/30 text-sm font-semibold">
                                                                <UserCheck size={14} />
                                                                Ativo
                                                            </span>
                                                        )}
                                                    </td>
                                                    <td className="px-6 py-4 text-right">
                                                        {!isCurrentUser && u.role !== 'admin' && (
                                                            <button
                                                                onClick={() => handleToggleBan(u.id, !u.isBanned)}
                                                                disabled={isActionDisabled}
                                                                className={`px-4 py-2 rounded-xl text-sm font-semibold transition-all ${u.isBanned
                                                                    ? 'bg-green-500/20 text-green-400 hover:bg-green-500/30'
                                                                    : 'bg-red-500/20 text-red-400 hover:bg-red-500/30'
                                                                    } disabled:opacity-50`}
                                                            >
                                                                {isActionDisabled ? (
                                                                    <RefreshCw size={16} className="animate-spin" />
                                                                ) : u.isBanned ? (
                                                                    'Desbanir'
                                                                ) : (
                                                                    'Banir'
                                                                )}
                                                            </button>
                                                        )}
                                                    </td>
                                                </tr>
                                            );
                                        })}
                                    </tbody>
                                </table>
                            </div>
                        )}
                    </div>
                </>
            ) : activeTab === 'organization' ? (
                <div className="space-y-6 animate-in fade-in slide-in-from-left-4 duration-300">
                    {/* Organization Settings Panel */}
                    <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                        <div className="bg-surface rounded-2xl p-6 border border-border/40 space-y-6">
                            <div className="flex items-center gap-3 pb-4 border-b border-border/20">
                                <div className="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center">
                                    <Upload size={20} className="text-primary" />
                                </div>
                                <div>
                                    <h2 className="text-lg font-bold text-text-main">Identidade Visual</h2>
                                    <p className="text-xs text-text-muted">Gerencie o logo da sua organização</p>
                                </div>
                            </div>

                            <div className="flex flex-col items-center gap-6 py-4">
                                {organization?.imageUrl ? (
                                    <div className="relative group">
                                        <div className="w-32 h-32 rounded-2xl border-2 border-primary/20 p-2 bg-white overflow-hidden shadow-xl">
                                            <img
                                                src={organization.imageUrl}
                                                alt={organization.name}
                                                className="w-full h-full object-contain"
                                            />
                                        </div>
                                        <div className="absolute -bottom-2 -right-2 bg-primary text-white p-2 rounded-lg shadow-lg opacity-0 group-hover:opacity-100 transition-opacity">
                                            <ImageIcon size={14} />
                                        </div>
                                    </div>
                                ) : (
                                    <div className="w-32 h-32 rounded-2xl border-2 border-dashed border-border/40 flex flex-col items-center justify-center bg-surface-soft text-text-muted gap-2">
                                        <ImageIcon size={32} className="opacity-20" />
                                        <span className="text-[10px] font-bold uppercase tracking-widest">Sem Logo</span>
                                    </div>
                                )}

                                <div className="w-full space-y-4">
                                    <label className="flex flex-col items-center justify-center w-full h-32 border-2 border-dashed border-border/40 rounded-2xl cursor-pointer hover:bg-surface-hover hover:border-primary/50 transition-all group">
                                        <div className="flex flex-col items-center justify-center pt-5 pb-6">
                                            <Upload className="w-8 h-8 text-text-muted group-hover:text-primary transition-colors mb-2" />
                                            <p className="text-sm text-text-main font-bold">Clique para alterar o logo</p>
                                            <p className="text-xs text-text-muted">ou arraste e solte o arquivo</p>
                                        </div>
                                        <input
                                            type="file"
                                            className="hidden"
                                            accept="image/png,image/jpeg,image/jpg,image/svg+xml"
                                            onChange={handleLogoUpload}
                                            disabled={logoLoading}
                                        />
                                    </label>

                                    {logoLoading && (
                                        <div className="flex items-center justify-center gap-2 text-primary font-bold animate-pulse">
                                            <RefreshCw size={16} className="animate-spin" />
                                            <span>Enviando logo...</span>
                                        </div>
                                    )}
                                </div>
                            </div>
                        </div>

                        <div className="bg-surface rounded-2xl p-6 border border-border/40 space-y-6">
                            <div className="flex items-center gap-3 pb-4 border-b border-border/20">
                                <div className="w-10 h-10 rounded-xl bg-amber-500/10 flex items-center justify-center">
                                    <Info size={20} className="text-amber-500" />
                                </div>
                                <div>
                                    <h2 className="text-lg font-bold text-text-main">Requisitos & Dicas</h2>
                                    <p className="text-xs text-text-muted">Regras para um visual impecável</p>
                                </div>
                            </div>

                            <div className="space-y-4">
                                <div className="p-4 bg-surface-soft rounded-xl border border-border/20">
                                    <h3 className="text-sm font-bold text-text-main flex items-center gap-2 mb-2">
                                        <div className="w-1.5 h-1.5 rounded-full bg-primary"></div>
                                        Formatos Suportados
                                    </h3>
                                    <p className="text-xs text-text-muted leading-relaxed">
                                        Aceitamos arquivos nos formatos <strong>PNG, JPG ou SVG</strong>. O formato SVG é recomendado para máxima nitidez em qualquer tamanho.
                                    </p>
                                </div>

                                <div className="p-4 bg-surface-soft rounded-xl border border-border/20">
                                    <h3 className="text-sm font-bold text-text-main flex items-center gap-2 mb-2">
                                        <div className="w-1.5 h-1.5 rounded-full bg-amber-500"></div>
                                        Dimensões Recomendadas
                                    </h3>
                                    <p className="text-xs text-text-muted leading-relaxed">
                                        Recomendamos uma imagem quadrada de no mínimo <strong>512x512 pixels</strong>. Logos horizontais podem não aparecer corretamente em todas as áreas.
                                    </p>
                                </div>

                                <div className="p-4 bg-surface-soft rounded-xl border border-border/20">
                                    <h3 className="text-sm font-bold text-text-main flex items-center gap-2 mb-2">
                                        <div className="w-1.5 h-1.5 rounded-full bg-red-500"></div>
                                        Limite de Tamanho
                                    </h3>
                                    <p className="text-xs text-text-muted leading-relaxed">
                                        O arquivo não deve ultrapassar <strong>500 KB</strong>. Arquivos maiores serão rejeitados automaticamente para garantir rapidez no carregamento.
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            ) : activeTab === 'settings' ? (
                <GeometrySettings />
            ) : activeTab === 'backup' ? (
                <BackupRestore />
            ) : (
                // Lazily load or direct render StockDashboard (Need to import it)
                <div className="bg-surface rounded-2xl border border-border/40 p-6">
                    <div className="text-center py-10">
                        <h2 className="text-xl font-bold text-text-main">Gestão de Estoque</h2>
                        <p className="text-text-muted mt-2">Acesse a nova página dedicada ao controle de estoque.</p>
                        <a
                            href="/stock"
                            className="mt-6 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-primary hover:bg-primary-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary"
                        >
                            Ir para Estoque
                        </a>
                    </div>
                </div>
            )}
        </div>
    );
};