'use client'

import { Link } from '../common/Link'
import { usePathname } from 'next/navigation'
import {
    HomeIcon,
    MicrophoneIcon,
    BookOpenIcon,
    UserGroupIcon,
    UserIcon,
    ArrowRightOnRectangleIcon
} from '@heroicons/react/24/outline'
import { useAuth } from '@/lib/hooks/useAuth'

const navigation = [
    { name: 'Home', href: '/dashboard', icon: HomeIcon },
    { name: 'Podcasts', href: '/podcast', icon: MicrophoneIcon },
    { name: 'The Journal', href: '/thejournal', icon: BookOpenIcon },
    { name: 'Forum', href: 'https://forum.morethanadiagnosis.org', icon: UserGroupIcon },
    { name: 'Resources', href: '/resources', icon: BookOpenIcon },
    { name: 'Profile', href: '/profile', icon: UserIcon },
]

export function Sidebar() {
    const pathname = usePathname()
    const { logout } = useAuth()

    return (
        <div className="hidden md:flex md:w-64 md:flex-col md:fixed md:inset-y-0">
            <div className="flex-1 flex flex-col min-h-0 border-r border-gray-200 bg-white">
                <div className="flex-1 flex flex-col pt-5 pb-4 overflow-y-auto">
                    <div className="flex items-center flex-shrink-0 px-4 mb-8">
                        <span className="text-xl font-bold text-primary-600">MoreThanADiagnosis</span>
                    </div>
                    <nav className="mt-5 flex-1 px-2 space-y-1">
                        {navigation.map((item) => {
                            const isActive = pathname === item.href
                            return (
                                <Link
                                    key={item.name}
                                    href={item.href}
                                    variant="neutral"
                                    className={`group flex items-center px-2 py-2 text-sm font-medium rounded-md transition-colors ${isActive
                                        ? 'bg-primary-50 text-primary-700'
                                        : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900'
                                        }`}
                                >
                                    <item.icon
                                        className={`mr-3 flex-shrink-0 h-6 w-6 ${isActive ? 'text-primary-600' : 'text-gray-400 group-hover:text-gray-500'
                                            }`}
                                        aria-hidden="true"
                                    />
                                    {item.name}
                                </Link>
                            )
                        })}
                    </nav>
                </div>
                <div className="flex-shrink-0 flex border-t border-gray-200 p-4">
                    <button
                        onClick={() => logout()}
                        className="flex-shrink-0 w-full group block"
                    >
                        <div className="flex items-center">
                            <ArrowRightOnRectangleIcon className="inline-block h-5 w-5 text-gray-400 group-hover:text-gray-500" />
                            <div className="ml-3">
                                <p className="text-sm font-medium text-gray-700 group-hover:text-gray-900">
                                    Sign out
                                </p>
                            </div>
                        </div>
                    </button>
                </div>
            </div>
        </div>
    )
}