import { Home, Settings } from 'lucide-react';
import { Link } from '@tanstack/react-router';
import { APP_PATHS } from '@/routes';

/**
 * Sidebar component
 * @description Left sidebar navigation with icon menu
 * @returns Sidebar element
 */
export function Sidebar() {
    return (
        <aside className="fixed left-4 top-20 bottom-4 w-14 md:left-6 md:top-24 md:bottom-6 md:w-16 bg-gradient-to-b from-[#00A1A0] to-[#00166D] flex flex-col items-center py-4 md:py-6 gap-4 md:gap-6 z-50 rounded-xl md:rounded-2xl shadow-xl hidden md:flex">
            {/* Navigation Icons */}
            <nav className="flex flex-col items-center gap-5 flex-1 w-full">
                {/* Home - Active State */}
                <Link
                    to={APP_PATHS.dashboard}
                    className="sidebar-icon-v3 hover:bg-white/10"
                    activeProps={{ className: 'sidebar-icon-v3 bg-white/20 ring-1 ring-white/40' }}
                    aria-label="Home"
                >
                    <Home className="w-4 h-4 md:w-5 md:h-5 text-white" />
                </Link>

                <Link
                    to={APP_PATHS.agent}
                    className="sidebar-icon-v3 hover:bg-white/10"
                    activeProps={{ className: 'sidebar-icon-v3 bg-white/20 ring-1 ring-white/40' }}
                    aria-label="Agent"
                >
                    <img src="/Agent.svg" alt="Agent" className="w-9 h-9 md:w-[42px] md:h-[42px]" />
                </Link>
                <button className="sidebar-icon-v3" aria-label="KB">
                    <img src="/KB.svg" alt="KB" className="w-9 h-9 md:w-[42px] md:h-[42px]" />
                </button>
                <button className="sidebar-icon-v3" aria-label="Models">
                    <img src="/Models.svg" alt="Models" className="w-9 h-9 md:w-[42px] md:h-[42px]" />
                </button>
                <button className="sidebar-icon-v3" aria-label="Workflow">
                    <img src="/Workflow.svg" alt="Workflow" className="w-9 h-9 md:w-[42px] md:h-[42px]" />
                </button>
                <button className="sidebar-icon-v3" aria-label="Nav Item">
                    <img src="/Nav item.svg" alt="Nav Item" className="w-9 h-9 md:w-[42px] md:h-[42px]" />
                </button>
                <button className="sidebar-icon-v3" aria-label="LLM">
                    <img src="/LLM.svg" alt="LLM" className="w-9 h-9 md:w-[42px] md:h-[42px]" />
                </button>
                <button className="sidebar-icon-v3" aria-label="FT">
                    <img src="/FT.svg" alt="FT" className="w-9 h-9 md:w-[42px] md:h-[42px]" />
                </button>
                <button className="sidebar-icon-v3" aria-label="Task Watcher">
                    <img src="/Task watacher.svg" alt="Task Watcher" className="w-9 h-9 md:w-[42px] md:h-[42px]" />
                </button>
                <button className="sidebar-icon-v3" aria-label="Optimization">
                    <img src="/Optimization.svg" alt="Optimization" className="w-9 h-9 md:w-[42px] md:h-[42px]" />
                </button>
            </nav>

            {/* Bottom Icon */}
            <div className="flex flex-col gap-3 md:gap-4 mt-auto">
                <button className="sidebar-icon-v3" aria-label="Settings">
                    <Settings className="w-4 h-4 md:w-5 md:h-5 text-white" />
                </button>
            </div>
        </aside>
    );
}
