"use client";

import { Fragment } from 'react';
import { Dialog, Transition } from '@headlessui/react';
import { XMarkIcon, ArrowLeftOnRectangleIcon } from '@heroicons/react/24/outline';
import Navigation from './Navigation';
import { ShieldCheckIcon } from '@heroicons/react/24/solid';
import { UserInfo } from '../../../types';
import api from '../../../lib/api';

interface DrawerProps {
    sidebarOpen: boolean;
    setSidebarOpen: (open: boolean) => void;
    user: UserInfo | null;
}

export default function Drawer({ sidebarOpen, setSidebarOpen, user }: DrawerProps) {
    const handleLogout = async () => {
        try {
            await api.post('/auth/logout');
        } catch {
            // Ignore logout errors; just redirect
        } finally {
            window.location.href = '/login';
        }
    };

    return (
        <>
            <Transition.Root show={sidebarOpen} as={Fragment}>
                <Dialog as="div" className="relative z-50 lg:hidden" onClose={setSidebarOpen}>
                    <Transition.Child
                        as={Fragment}
                        enter="transition-opacity ease-linear duration-300"
                        enterFrom="opacity-0"
                        enterTo="opacity-100"
                        leave="transition-opacity ease-linear duration-300"
                        leaveFrom="opacity-100"
                        leaveTo="opacity-0"
                    >
                        <div className="fixed inset-0 bg-gray-900/80" />
                    </Transition.Child>

                    <div className="fixed inset-0 flex">
                        <Transition.Child
                            as={Fragment}
                            enter="transition ease-in-out duration-300 transform"
                            enterFrom="-translate-x-full"
                            enterTo="translate-x-0"
                            leave="transition ease-in-out duration-300 transform"
                            leaveFrom="translate-x-0"
                            leaveTo="-translate-x-full"
                        >
                            <Dialog.Panel className="relative mr-16 flex w-full max-w-xs flex-1">
                                <div className="flex grow flex-col gap-y-5 overflow-y-auto bg-gray-900 px-6 pb-4 ring-1 ring-white/10">
                                    <div className="flex h-16 shrink-0 items-center gap-3">
                                        <img src="/logo.svg" alt="VulnCheck Logo" className="h-10 w-10" />
                                        <span className="text-white font-extrabold text-xl font-mono tracking-tight">Vuln<span className="text-vulncheck-blue">Check</span></span>
                                    </div>
                                    <Navigation />
                                    <div className="mt-auto pb-4">
                                        {user && (
                                            <div className="mb-4 px-2 py-3 bg-gray-800/50 rounded-lg border border-gray-700/50">
                                                <div className="flex items-center gap-3">
                                                    <div className="h-8 w-8 rounded-full bg-vulncheck-blue/20 flex items-center justify-center border border-vulncheck-blue/30 text-vulncheck-blue font-bold font-mono">
                                                        {user.username.substring(0, 2).toUpperCase()}
                                                    </div>
                                                    <div className="flex flex-col overflow-hidden">
                                                        <span className="text-sm font-medium text-white truncate font-mono">{user.username}</span>
                                                        <span className="text-xs text-gray-400 uppercase tracking-wider font-mono text-[10px]">{user.role}</span>
                                                    </div>
                                                </div>
                                            </div>
                                        )}
                                        <button
                                            onClick={handleLogout}
                                            className="group flex w-full gap-x-3 rounded-md p-2 text-sm font-semibold leading-6 text-gray-400 hover:bg-gray-800 hover:text-white"
                                        >
                                            <ArrowLeftOnRectangleIcon className="h-6 w-6 shrink-0 text-gray-400 group-hover:text-white" aria-hidden="true" />
                                            Logout
                                        </button>
                                    </div>
                                </div>
                            </Dialog.Panel>
                        </Transition.Child>
                    </div>
                </Dialog>
            </Transition.Root>

            {/* Static sidebar for desktop */}
            <div className="hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-72 lg:flex-col">
                <div className="flex grow flex-col gap-y-5 bg-gray-900 px-6 pb-4 border-r border-white/5">
                    <div className="flex h-20 shrink-0 items-center gap-3">
                        <img src="/logo.svg" alt="VulnCheck Logo" className="h-12 w-12" />
                        <div className="flex flex-col">
                            <span className="text-white font-extrabold text-2xl font-mono tracking-tighter leading-none">Vuln<span className="text-vulncheck-blue">Check</span></span>
                            <span className="text-[10px] text-gray-500 font-mono tracking-widest uppercase mt-1">Enterprise Security</span>
                        </div>
                    </div>
                    <Navigation />
                    <div className="mt-auto pb-4">
                        {user && (
                            <div className="mb-4 px-2 py-3 bg-gray-800/50 rounded-lg border border-gray-700/50">
                                <div className="flex items-center gap-3">
                                    <div className="h-8 w-8 rounded-full bg-vulncheck-blue/20 flex items-center justify-center border border-vulncheck-blue/30 text-vulncheck-blue font-bold font-mono">
                                        {user.username.substring(0, 2).toUpperCase()}
                                    </div>
                                    <div className="flex flex-col overflow-hidden">
                                        <span className="text-sm font-medium text-white truncate font-mono">{user.username}</span>
                                        <span className="text-xs text-gray-400 uppercase tracking-wider font-mono text-[10px]">{user.role}</span>
                                    </div>
                                </div>
                            </div>
                        )}
                        <button
                            onClick={handleLogout}
                            className="group flex w-full gap-x-3 rounded-md p-2 text-sm font-semibold leading-6 text-gray-400 hover:bg-gray-800 hover:text-white"
                        >
                            <ArrowLeftOnRectangleIcon className="h-6 w-6 shrink-0 text-gray-400 group-hover:text-white" aria-hidden="true" />
                            Logout
                        </button>
                    </div>
                </div>
            </div>
        </>
    );
}
;
