"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { cn } from "@/lib/utils";
import { Building2, Linkedin, Search, BarChart3, Settings, Zap, ChevronLeft, ChevronRight } from "lucide-react";
import { useAppStore } from "@/lib/store";
import { useEffect, useState } from "react";

const navItems = [
  { href: "/airscale", icon: Building2, label: "AirScale → Email", color: "text-blue-400" },
  { href: "/linkedin", icon: Linkedin, label: "LinkedIn → Email", color: "text-blue-500" },
  { href: "/serp", icon: Search, label: "SERP → Email", color: "text-purple-400" },
  { href: "/results", icon: BarChart3, label: "Results & History", color: "text-green-400" },
  { href: "/settings", icon: Settings, label: "Settings", color: "text-gray-400" },
];

interface CredentialStatus {
  anymailfinder: boolean;
  apify: boolean;
  vayne: boolean;
}

export function Sidebar() {
  const pathname = usePathname();
  const { sidebarCollapsed, setSidebarCollapsed } = useAppStore();
  const [creds, setCreds] = useState<CredentialStatus>({ anymailfinder: false, apify: false, vayne: false });

  useEffect(() => {
    fetch("/api/credentials")
      .then(r => r.json())
      .then(d => setCreds(d))
      .catch(() => {});
  }, []);

  return (
    <aside
      className={cn(
        "relative flex flex-col border-r border-[#1e1e2e] bg-[#111118] transition-all duration-300",
        sidebarCollapsed ? "w-16" : "w-60"
      )}
    >
      {/* Logo */}
      <div className="flex items-center gap-2 px-4 py-5 border-b border-[#1e1e2e]">
        <div className="flex-shrink-0 w-8 h-8 rounded-lg bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center">
          <Zap className="w-4 h-4 text-white" />
        </div>
        {!sidebarCollapsed && (
          <span className="font-bold text-lg tracking-tight text-white">LeadFlow</span>
        )}
      </div>

      {/* Nav */}
      <nav className="flex-1 px-2 py-4 space-y-1">
        {navItems.map(({ href, icon: Icon, label, color }) => {
          const active = pathname === href || pathname.startsWith(href + "/");
          return (
            <Link
              key={href}
              href={href}
              className={cn(
                "flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-all",
                active
                  ? "bg-[#1e1e2e] text-white"
                  : "text-gray-400 hover:text-white hover:bg-[#1a1a28]"
              )}
            >
              <Icon className={cn("w-5 h-5 flex-shrink-0", active ? color : "")} />
              {!sidebarCollapsed && <span>{label}</span>}
            </Link>
          );
        })}
      </nav>

      {/* Credential status */}
      {!sidebarCollapsed && (
        <div className="px-4 py-4 border-t border-[#1e1e2e] space-y-2">
          <p className="text-xs text-gray-500 uppercase tracking-wider mb-3">API Status</p>
          {[
            { key: "anymailfinder", label: "Anymailfinder" },
            { key: "apify", label: "Apify" },
            { key: "vayne", label: "Vayne" },
          ].map(({ key, label }) => (
            <div key={key} className="flex items-center gap-2">
              <span className={cn("w-2 h-2 rounded-full flex-shrink-0", creds[key as keyof CredentialStatus] ? "bg-green-500" : "bg-red-500")} />
              <span className="text-xs text-gray-400">{label}</span>
            </div>
          ))}
        </div>
      )}

      {/* Collapse toggle */}
      <button
        onClick={() => setSidebarCollapsed(!sidebarCollapsed)}
        className="absolute -right-3 top-6 w-6 h-6 rounded-full bg-[#1e1e2e] border border-[#2e2e3e] flex items-center justify-center hover:bg-[#2e2e3e] transition-colors z-10"
      >
        {sidebarCollapsed ? <ChevronRight className="w-3 h-3 text-gray-400" /> : <ChevronLeft className="w-3 h-3 text-gray-400" />}
      </button>
    </aside>
  );
}