import { useState } from "react";
import { NavLink, Link } from "react-router-dom";
import { Search, Shield, X } from "lucide-react";
import { cn } from "@/lib/utils";
import { NAV_SECTIONS, ALL_NAV_ITEMS } from "./nav";

export function DocSidebar() {
  const [query, setQuery] = useState("");

  const filtered =
    query.trim().length > 0
      ? ALL_NAV_ITEMS.filter(
          (i) =>
            i.title.toLowerCase().includes(query.toLowerCase()) ||
            i.section.toLowerCase().includes(query.toLowerCase())
        )
      : null;

  return (
    <aside className="w-72 shrink-0 hidden lg:flex flex-col h-full border-r bg-background">
      {/* Logo */}
      <div className="flex items-center gap-2 px-5 py-4 border-b">
        <div className="h-7 w-7 rounded-md bg-primary flex items-center justify-center">
          <Shield className="h-4 w-4 text-primary-foreground" />
        </div>
        <div>
          <Link to="/docs" className="font-bold text-sm hover:text-primary transition-colors">
            Veylant IA Docs
          </Link>
          <span className="ml-2 text-xs bg-muted text-muted-foreground px-1.5 py-0.5 rounded font-mono">
            v1.0.0
          </span>
        </div>
      </div>

      {/* Search */}
      <div className="px-4 py-3 border-b">
        <div className="relative">
          <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" />
          <input
            type="text"
            placeholder="Search docs..."
            value={query}
            onChange={(e) => setQuery(e.target.value)}
            className="w-full pl-8 pr-7 py-1.5 text-sm bg-muted rounded-md border-0 outline-none focus:ring-1 focus:ring-primary placeholder:text-muted-foreground"
          />
          {query && (
            <button
              onClick={() => setQuery("")}
              className="absolute right-2.5 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
            >
              <X className="h-3.5 w-3.5" />
            </button>
          )}
        </div>
      </div>

      {/* Nav */}
      <nav className="flex-1 overflow-y-auto py-4 px-3">
        {filtered ? (
          /* Search results */
          <div>
            <p className="text-xs text-muted-foreground px-2 mb-2">
              {filtered.length} result{filtered.length !== 1 ? "s" : ""}
            </p>
            {filtered.length === 0 ? (
              <p className="text-sm text-muted-foreground px-2">No pages found.</p>
            ) : (
              <ul className="space-y-0.5">
                {filtered.map((item) => (
                  <li key={item.path}>
                    <NavLink
                      to={item.path}
                      end={item.path === "/docs"}
                      onClick={() => setQuery("")}
                      className={({ isActive }) =>
                        cn(
                          "flex flex-col px-3 py-2 rounded-md text-sm transition-colors",
                          isActive
                            ? "bg-primary/10 text-primary font-semibold border-l-2 border-primary"
                            : "text-muted-foreground hover:text-foreground hover:bg-muted"
                        )
                      }
                    >
                      <span>{item.title}</span>
                      <span className="text-xs text-muted-foreground mt-0.5">{item.section}</span>
                    </NavLink>
                  </li>
                ))}
              </ul>
            )}
          </div>
        ) : (
          /* Full nav tree */
          <div className="space-y-6">
            {NAV_SECTIONS.map((section) => (
              <div key={section.title}>
                <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wider px-3 mb-1.5">
                  {section.title}
                </p>
                <ul className="space-y-0.5">
                  {section.items.map((item) => (
                    <li key={item.path}>
                      <NavLink
                        to={item.path}
                        end={item.path === "/docs"}
                        className={({ isActive }) =>
                          cn(
                            "block px-3 py-1.5 rounded-md text-sm transition-colors",
                            isActive
                              ? "bg-primary/10 text-primary font-semibold border-l-2 border-primary pl-[10px]"
                              : "text-muted-foreground hover:text-foreground hover:bg-muted"
                          )
                        }
                      >
                        {item.title}
                      </NavLink>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        )}
      </nav>

      {/* Footer */}
      <div className="px-4 py-3 border-t">
        <Link
          to="/dashboard"
          className="flex items-center gap-2 text-xs text-muted-foreground hover:text-foreground transition-colors"
        >
          <Shield className="h-3.5 w-3.5" />
          Back to Dashboard
        </Link>
      </div>
    </aside>
  );
}
