import { NavLink, useParams, useNavigate } from "react-router-dom";
import { useProjectList } from "../hooks/useProjects";

const navItems = [
  { to: "", label: "Dashboard", icon: "/peon.webp" },
  { to: "features", label: "Features", icon: "/scroll.webp" },
  { to: "tasks", label: "Tasks", icon: "/shield.webp" },
  { to: "logs", label: "Work Logs", icon: "/project.webp" },
];

export default function Sidebar() {
  const { id } = useParams<{ id: string }>();
  const navigate = useNavigate();
  const { data: projects = [] } = useProjectList();

  return (
    <aside className="flex h-screen w-60 flex-col border-r border-[#2e3625] bg-[#0d120a]">
      <div className="border-b border-[#2e3625] p-4">
        <NavLink to="/" className="flex items-center gap-2 text-lg font-bold text-[#7ab648]">
          <img src="/peon.webp" alt="peon" className="h-7 w-7 rounded-full" />
          peon
        </NavLink>
      </div>

      <div className="border-b border-[#2e3625] p-4">
        <label className="mb-1 block text-xs text-[#8a8672]">Project</label>
        <select
          value={id || ""}
          onChange={(e) => navigate(`/projects/${e.target.value}`)}
          className="w-full rounded border border-[#2e3625] bg-[#1a1f14] px-2 py-1.5 text-sm text-[#d4d2c4] focus:border-[#5c5a4a] focus:outline-none"
        >
          {projects.map((p) => (
            <option key={p.id} value={p.id}>
              {p.id}
            </option>
          ))}
        </select>
      </div>

      <nav className="flex-1 p-4">
        <ul className="space-y-1">
          {navItems.map((item) => (
            <li key={item.to}>
              <NavLink
                to={`/projects/${id}/${item.to}`}
                end={item.to === ""}
                className={({ isActive }) =>
                  `flex items-center gap-2.5 rounded px-3 py-2 text-sm ${
                    isActive
                      ? "bg-[#1a1f14] text-[#d4d2c4] font-medium"
                      : "text-[#8a8672] hover:bg-[#1a1f14] hover:text-[#d4d2c4]"
                  }`
                }
              >
                <img src={item.icon} alt="" className="h-4 w-4 rounded-sm opacity-70" />
                {item.label}
              </NavLink>
            </li>
          ))}
        </ul>
      </nav>
    </aside>
  );
}
