import React, { useState } from 'react';
import { MedSidebar } from './MedSidebar.tsx';
import { Bell, Search, Settings, HelpCircle } from 'lucide-react';

interface MedLayoutProps {
    children: React.ReactNode;
    currentView: string;
    onNavigate: (view: any) => void;
}

export const MedLayout: React.FC<MedLayoutProps> = ({ children, currentView, onNavigate }) => {
    return (
        <div className="flex min-h-screen bg-[#020617] text-slate-200 overflow-hidden font-sans">
            {/* Sidebar */}
            <MedSidebar activeTab={currentView} setActiveTab={onNavigate} />

            {/* Main Content Area */}
            <div className="flex-1 ml-72 flex flex-col h-screen overflow-hidden">
                {/* Premium Top Bar */}
                <header className="h-24 px-10 flex items-center justify-between border-b border-white/5 bg-[#020617]/50 backdrop-blur-xl sticky top-0 z-40">
                    <div className="flex items-center gap-6 flex-1 max-w-xl">
                        <div className="relative group w-full">
                            <Search className="absolute left-4 top-1/2 -translate-y-1/2 text-slate-500 group-focus-within:text-cyan-400 transition-colors" size={18} />
                            <input
                                type="text"
                                placeholder="BUSCAR PACIENTES, AGENDAMENTOS OU GUIAS..."
                                className="w-full bg-white/5 border border-white/10 rounded-2xl py-3.5 pl-12 pr-6 text-xs font-bold uppercase tracking-widest focus:outline-none focus:border-cyan-500/50 focus:bg-white/[0.08] transition-all"
                            />
                        </div>
                    </div>

                    <div className="flex items-center gap-6">
                        <div className="flex items-center gap-2">
                            {[
                                { icon: Bell, alert: true },
                                { icon: HelpCircle, alert: false },
                                { icon: Settings, alert: false }
                            ].map((item, i) => (
                                <button key={i} className="w-12 h-12 rounded-2xl bg-white/5 border border-white/10 flex items-center justify-center hover:bg-white/10 transition-all relative">
                                    <item.icon size={20} className="text-slate-400" />
                                    {item.alert && <div className="absolute top-3 right-3 w-2.5 h-2.5 bg-cyan-500 border-2 border-[#020617] rounded-full"></div>}
                                </button>
                            ))}
                        </div>

                        <div className="h-10 w-px bg-white/10 mx-2"></div>

                        <div className="flex items-center gap-3 pl-2">
                            <div className="text-right">
                                <span className="text-[10px] font-black text-cyan-500 block leading-none uppercase tracking-widest">Acesso Premium</span>
                                <span className="text-xs font-black text-white uppercase tracking-tighter">Portal Médico Cassems</span>
                            </div>
                            <div className="w-12 h-12 rounded-full bg-gradient-to-tr from-cyan-500 to-blue-600 p-[2px] shadow-lg shadow-cyan-500/20">
                                <div className="w-full h-full rounded-full bg-slate-900 flex items-center justify-center text-xs font-black text-white">
                                    MED
                                </div>
                            </div>
                        </div>
                    </div>
                </header>

                {/* Dashboard/View Container */}
                <main className="flex-1 overflow-y-auto p-10 custom-scrollbar">
                    <div className="max-w-7xl mx-auto pb-20">
                        {children}
                    </div>
                </main>
            </div>

            <style>{`
                .custom-scrollbar::-webkit-scrollbar {
                    width: 6px;
                }
                .custom-scrollbar::-webkit-scrollbar-track {
                    background: transparent;
                }
                .custom-scrollbar::-webkit-scrollbar-thumb {
                    background: rgba(255, 255, 255, 0.05);
                    border-radius: 10px;
                }
                .custom-scrollbar::-webkit-scrollbar-thumb:hover {
                    background: rgba(255, 255, 255, 0.1);
                }
            `}</style>
        </div>
    );
};