"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import {
  Shield,
  Scan,
  Library,
  FileCheck,
  Menu,
  X,
  Folder,
} from "lucide-react";
import { useState } from "react";
import { cn } from "@/lib/utils";
import { useProjectPath } from "@/lib/hooks/useProjectPath";
import { hasCustomProjectPath } from "@/lib/project/storage";
import { Input } from "@/components/ui/input";

const navigation = [
  { name: "Scans", href: "/scans", icon: Scan },
  { name: "Claims", href: "/claims", icon: FileCheck },
  { name: "Corpus", href: "/corpus", icon: Library },
];

export function Sidebar() {
  const pathname = usePathname();
  const [mobileOpen, setMobileOpen] = useState(false);
  const { projectPath, setProjectPath, isLoading } = useProjectPath();

  return (
    <>
      {/* Mobile menu button */}
      <button
        onClick={() => setMobileOpen(!mobileOpen)}
        className="fixed top-4 left-4 z-50 p-2 rounded-md bg-sidebar border border-sidebar-border lg:hidden"
        aria-label="Toggle menu"
      >
        {mobileOpen ? (
          <X className="h-5 w-5 text-sidebar-foreground" />
        ) : (
          <Menu className="h-5 w-5 text-sidebar-foreground" />
        )}
      </button>

      {/* Mobile overlay */}
      {mobileOpen && (
        <div
          className="fixed inset-0 z-40 bg-black/50 lg:hidden"
          onClick={() => setMobileOpen(false)}
        />
      )}

      {/* Sidebar */}
      <aside
        className={cn(
          "fixed inset-y-0 left-0 z-40 w-64 bg-sidebar border-r border-sidebar-border transition-transform duration-200 lg:translate-x-0",
          mobileOpen ? "translate-x-0" : "-translate-x-full"
        )}
      >
        <div className="flex h-full flex-col">
          {/* Logo */}
          <div className="flex h-16 items-center gap-2 px-6 border-b border-sidebar-border">
            <Shield className="h-6 w-6 text-sidebar-primary" />
            <span className="text-lg font-semibold text-sidebar-foreground">
              Aphoria
            </span>
          </div>

          {/* Navigation */}
          <nav className="flex-1 px-3 py-4 space-y-1">
            {navigation.map((item) => {
              const isActive = pathname === item.href;
              return (
                <Link
                  key={item.name}
                  href={item.href}
                  onClick={() => setMobileOpen(false)}
                  className={cn(
                    "flex items-center gap-3 px-3 py-2 rounded-md text-sm font-medium transition-colors",
                    isActive
                      ? "bg-sidebar-accent text-sidebar-accent-foreground"
                      : "text-sidebar-foreground/70 hover:bg-sidebar-accent/50 hover:text-sidebar-foreground"
                  )}
                >
                  <item.icon className="h-5 w-5" />
                  {item.name}
                </Link>
              );
            })}
          </nav>

          {/* Project Path Selector */}
          <div className="px-3 py-4 border-t border-sidebar-border">
            <label className="text-xs text-sidebar-foreground/70 mb-2 flex items-center gap-2">
              <Folder className="h-3 w-3" />
              Project Path
              {!isLoading && hasCustomProjectPath() && (
                <span className="text-green-500" title="Custom path set">
                  ●
                </span>
              )}
            </label>
            <Input
              value={isLoading ? "" : projectPath}
              onChange={(e) => setProjectPath(e.target.value)}
              placeholder="/path/to/project"
              className="h-8 text-xs bg-sidebar-accent/50"
              disabled={isLoading}
            />
            {!isLoading && (
              <p className="text-xs text-sidebar-foreground/50 mt-1">
                {hasCustomProjectPath() ? "Custom path" : "Default path"}
              </p>
            )}
          </div>

          {/* Footer */}
          <div className="px-6 py-4 border-t border-sidebar-border">
            <p className="text-xs text-sidebar-foreground/50">
              Aphoria Dashboard v0.1.0
            </p>
          </div>
        </div>
      </aside>
    </>
  );
}
