import React, { useState, useEffect } from 'react';
import { supabase } from '@/lib/supabase';
import {
    Users,
    Dumbbell,
    FileText,
    Settings,
    LogOut,
    LayoutDashboard,
    Video,
    CreditCard,
    Menu,
    X,
    Search,
    Bell,
    PlusCircle
} from 'lucide-react';
import { User } from '@/types';
import { StudentsList } from '@/components/professional/dashboard/StudentsList';
import { OverviewMock } from '@/components/professional/dashboard/Overview';
import { WorkoutsMock } from '@/components/professional/dashboard/Workouts';
import { PlaceholderModule } from '@/components/professional/common/PlaceholderModule';

interface ProfessionalDashboardProps {
    user: User;
    onExit: () => void;
    onLogout: () => void;
}

type Tab = 'overview' | 'students' | 'workouts' | 'assessments' | 'library' | 'financial' | 'settings';

const ProfessionalDashboard: React.FC<ProfessionalDashboardProps> = ({ user, onExit, onLogout }) => {
    const [activeTab, setActiveTab] = useState<Tab>('overview');
    const [isSidebarOpen, setIsSidebarOpen] = useState(false);

    return (
        <div className="min-h-screen bg-gray-50 flex font-sans text-gray-900">

            {/* Mobile Overlay */}
            {isSidebarOpen && (
                <div
                    className="fixed inset-0 bg-black/50 z-40 md:hidden"
                    onClick={() => setIsSidebarOpen(false)}
                />
            )}

            {/* Sidebar (SaaS Style - Dark) */}
            <aside className={`w-72 bg-[#0F172A] text-gray-400 fixed h-full z-50 transition-transform duration-300 ${isSidebarOpen ? 'translate-x-0' : '-translate-x-full'} md:translate-x-0 flex flex-col`}>
                <div className="p-6 flex items-center justify-between border-b border-gray-800">
                    <div className="flex items-center gap-3">
                        <div className="w-8 h-8 bg-brand-600 rounded-lg flex items-center justify-center text-white font-bold">
                            F
                        </div>
                        <span className="font-bold text-white text-lg tracking-tight">FoodSnap <span className="text-brand-500">Pro</span></span>
                    </div>
                    <button onClick={() => setIsSidebarOpen(false)} className="md:hidden text-gray-400 hover:text-white">
                        <X size={24} />
                    </button>
                </div>

                <div className="p-4">
                    <div className="flex items-center gap-3 p-3 bg-gray-800/50 rounded-xl mb-6">
                        <img src={user.avatar} alt="Pro" className="w-10 h-10 rounded-full bg-gray-700" />
                        <div className="overflow-hidden">
                            <p className="text-sm font-bold text-white truncate">{user.name}</p>
                            <p className="text-xs text-brand-400 font-medium truncate uppercase tracking-wider">Personal Trainer</p>
                        </div>
                    </div>

                    <nav className="space-y-1">
                        <NavItem
                            icon={<LayoutDashboard size={20} />}
                            label="Visão Geral"
                            active={activeTab === 'overview'}
                            onClick={() => setActiveTab('overview')}
                        />
                        <div className="pt-4 pb-2 px-3 text-xs font-bold uppercase tracking-wider text-gray-600">Gestão</div>
                        <NavItem
                            icon={<Users size={20} />}
                            label="Alunos"
                            active={activeTab === 'students'}
                            onClick={() => setActiveTab('students')}
                        />
                        <NavItem
                            icon={<CreditCard size={20} />}
                            label="Financeiro"
                            active={activeTab === 'financial'}
                            onClick={() => setActiveTab('financial')}
                        />

                        <div className="pt-4 pb-2 px-3 text-xs font-bold uppercase tracking-wider text-gray-600">Técnico</div>
                        <NavItem
                            icon={<Dumbbell size={20} />}
                            label="Treinos"
                            active={activeTab === 'workouts'}
                            onClick={() => setActiveTab('workouts')}
                        />
                        <NavItem
                            icon={<FileText size={20} />}
                            label="Avaliações"
                            active={activeTab === 'assessments'}
                            onClick={() => setActiveTab('assessments')}
                        />
                        <NavItem
                            icon={<Video size={20} />}
                            label="Biblioteca"
                            active={activeTab === 'library'}
                            onClick={() => setActiveTab('library')}
                        />
                    </nav>
                </div>

                <div className="mt-auto p-4 border-t border-gray-800">
                    <button
                        onClick={onExit}
                        className="w-full flex items-center gap-3 px-3 py-2 text-sm font-medium text-gray-400 hover:text-white hover:bg-gray-800 rounded-lg transition-colors mb-2"
                    >
                        <LogOut size={18} className="rotate-180" />
                        Voltar para Aluno
                    </button>
                </div>
            </aside>

            {/* Main Content Area */}
            <main className="flex-1 md:ml-72 min-h-screen flex flex-col">

                {/* Top Header */}
                <header className="bg-white border-b border-gray-200 h-16 px-4 md:px-8 flex items-center justify-between sticky top-0 z-30">
                    <div className="flex items-center gap-4">
                        <button onClick={() => setIsSidebarOpen(true)} className="md:hidden text-gray-600">
                            <Menu size={24} />
                        </button>
                        <h2 className="font-bold text-gray-900 text-lg capitalize">{activeTab === 'overview' ? 'Visão Geral' : activeTab}</h2>
                    </div>

                    <div className="flex items-center gap-4">
                        <button className="p-2 text-gray-400 hover:text-gray-600 relative">
                            <Bell size={20} />
                            <span className="absolute top-2 right-2 w-2 h-2 bg-red-500 rounded-full border border-white"></span>
                        </button>
                        <button className="bg-brand-600 hover:bg-brand-700 text-white px-4 py-2 rounded-lg text-sm font-bold flex items-center gap-2 shadow-sm transition-all">
                            <PlusCircle size={16} />
                            <span className="hidden sm:inline">Novo Aluno</span>
                        </button>
                    </div>
                </header>

                <div className="p-4 md:p-8">
                    {/* Dynamic Content */}
                    {activeTab === 'overview' && <OverviewMock />}
                    {activeTab === 'students' && <StudentsList user={user} />}
                    {activeTab === 'workouts' && <WorkoutsMock />}
                    {activeTab === 'assessments' && <PlaceholderModule title="Avaliação Física" desc="Formulário de dobras cutâneas, fotos comparativas e gráficos de evolução." icon={<FileText size={48} />} />}
                    {activeTab === 'library' && <PlaceholderModule title="Biblioteca de Exercícios" desc="Upload de vídeos, GIFs e gestão de banco de movimentos." icon={<Video size={48} />} />}
                    {activeTab === 'financial' && <PlaceholderModule title="Gestão Financeira" desc="Controle de mensalidades, planos e recebimentos." icon={<CreditCard size={48} />} />}
                </div>

            </main>
        </div>
    );
};

const NavItem = ({ icon, label, active, onClick }: any) => (
    <button
        onClick={onClick}
        className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-lg transition-all text-sm font-medium ${active
            ? 'bg-brand-600 text-white shadow-lg shadow-brand-900/20'
            : 'text-gray-400 hover:text-white hover:bg-gray-800'
            }`}
    >
        {icon}
        {label}
    </button>
);

export default ProfessionalDashboard;
