"use client";

import React from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { cn } from "@/lib/utils";
import {
  Building2,
  LayoutDashboard,
  Users,
  FileText,
  Target,
  Send,
  LogOut,
  ChevronLeft,
  ChevronRight,
  Menu,
  X,
} from "lucide-react";
import { Button } from "@/components/ui/button";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { Separator } from "@/components/ui/separator";

const navItems = [
  { href: "/dashboard", label: "Dashboard", icon: LayoutDashboard },
  { href: "/dashboard/sellers", label: "Seller Leads", icon: FileText },
  { href: "/dashboard/buyers", label: "Buyers", icon: Users },
  { href: "/dashboard/matches", label: "Matches", icon: Target },
  { href: "/dashboard/outreach", label: "Outreach", icon: Send },
];

export function Sidebar() {
  const pathname = usePathname();
  const [collapsed, setCollapsed] = React.useState(false);
  const [mobileOpen, setMobileOpen] = React.useState(false);

  React.useEffect(() => {
    setMobileOpen(false);
  }, [pathname]);

  return (
    <>
      {/* Mobile top bar */}
      <div className="md:hidden fixed top-0 left-0 right-0 z-50 flex h-14 items-center justify-between px-4 bg-white/90 backdrop-blur-md border-b border-navy-100">
        <Link href="/dashboard" className="flex items-center gap-2">
          <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-navy-800 to-navy-900">
            <Building2 className="h-4 w-4 text-gold-400" />
          </div>
          <span className="text-lg font-bold text-navy-900">
            CRE<span className="text-gold-500">dispo</span>
          </span>
        </Link>
        <button
          onClick={() => setMobileOpen(!mobileOpen)}
          className="flex h-10 w-10 items-center justify-center rounded-lg text-navy-600 hover:bg-navy-50 transition-colors"
          aria-label="Toggle menu"
        >
          {mobileOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
        </button>
      </div>

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

      {/* Mobile slide-out menu */}
      <aside
        className={cn(
          "md:hidden fixed left-0 top-14 bottom-0 z-50 w-64 bg-white border-r border-navy-100 transition-transform duration-300 ease-in-out flex flex-col",
          mobileOpen ? "translate-x-0" : "-translate-x-full"
        )}
      >
        <nav className="flex-1 px-3 py-4 space-y-1 overflow-y-auto">
          {navItems.map((item) => {
            const isActive =
              pathname === item.href ||
              (item.href !== "/dashboard" && pathname.startsWith(item.href));

            return (
              <Link
                key={item.href}
                href={item.href}
                className={cn(
                  "flex items-center gap-3 rounded-lg px-3 py-3 text-sm font-medium transition-all min-h-[44px] active:scale-[0.98]",
                  isActive
                    ? "bg-gradient-to-r from-navy-800 to-navy-900 text-white shadow-sm"
                    : "text-navy-600 hover:bg-navy-50 hover:text-navy-900"
                )}
              >
                <item.icon className={cn("h-5 w-5 flex-shrink-0", isActive && "text-gold-400")} />
                <span>{item.label}</span>
              </Link>
            );
          })}
        </nav>

        <Separator />

        <div className="p-3">
          <div className="flex items-center gap-3 rounded-lg px-3 py-2.5">
            <Avatar className="h-8 w-8">
              <AvatarFallback className="bg-navy-100 text-navy-700 text-xs">JD</AvatarFallback>
            </Avatar>
            <div className="flex-1 min-w-0">
              <p className="text-sm font-medium text-navy-900 truncate">John Doe</p>
              <p className="text-xs text-navy-500 truncate">john@brokerage.com</p>
            </div>
            <Link href="/login">
              <Button variant="ghost" size="icon" className="h-8 w-8">
                <LogOut className="h-4 w-4 text-navy-400" />
              </Button>
            </Link>
          </div>
        </div>
      </aside>

      {/* Desktop sidebar */}
      <aside
        className={cn(
          "hidden md:flex fixed left-0 top-0 z-40 h-screen flex-col border-r border-navy-100 bg-gradient-to-b from-white to-navy-25 transition-all duration-300",
          collapsed ? "w-16" : "w-64"
        )}
      >
        {/* Logo */}
        <div className="flex h-16 items-center justify-between px-4 border-b border-navy-100">
          {!collapsed && (
            <Link href="/dashboard" className="flex items-center gap-2">
              <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-navy-800 to-navy-900 shadow-sm">
                <Building2 className="h-4 w-4 text-gold-400" />
              </div>
              <span className="text-lg font-bold text-navy-900">
                CRE<span className="text-gold-500">dispo</span>
              </span>
            </Link>
          )}
          {collapsed && (
            <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-navy-800 to-navy-900 mx-auto shadow-sm">
              <Building2 className="h-4 w-4 text-gold-400" />
            </div>
          )}
        </div>

        {/* Navigation */}
        <nav className="flex-1 px-3 py-4 space-y-1 overflow-y-auto">
          {navItems.map((item) => {
            const isActive =
              pathname === item.href ||
              (item.href !== "/dashboard" && pathname.startsWith(item.href));

            return (
              <Link
                key={item.href}
                href={item.href}
                className={cn(
                  "flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-all active:scale-[0.98]",
                  isActive
                    ? "bg-gradient-to-r from-navy-800 to-navy-900 text-white shadow-sm"
                    : "text-navy-600 hover:bg-navy-50 hover:text-navy-900"
                )}
                title={collapsed ? item.label : undefined}
              >
                <item.icon className={cn("h-5 w-5 flex-shrink-0", isActive && "text-gold-400")} />
                {!collapsed && <span>{item.label}</span>}
              </Link>
            );
          })}
        </nav>

        <Separator />

        {/* Bottom section */}
        <div className="p-3 space-y-1">
          <button
            onClick={() => setCollapsed(!collapsed)}
            className="flex items-center gap-3 w-full rounded-lg px-3 py-2.5 text-sm font-medium text-navy-500 hover:bg-navy-50 hover:text-navy-900 transition-colors"
          >
            {collapsed ? (
              <ChevronRight className="h-5 w-5 flex-shrink-0" />
            ) : (
              <>
                <ChevronLeft className="h-5 w-5 flex-shrink-0" />
                <span>Collapse</span>
              </>
            )}
          </button>

          {!collapsed && (
            <div className="flex items-center gap-3 rounded-lg px-3 py-2.5">
              <Avatar className="h-8 w-8">
                <AvatarFallback className="bg-navy-100 text-navy-700 text-xs">JD</AvatarFallback>
              </Avatar>
              <div className="flex-1 min-w-0">
                <p className="text-sm font-medium text-navy-900 truncate">John Doe</p>
                <p className="text-xs text-navy-500 truncate">john@brokerage.com</p>
              </div>
              <Link href="/login">
                <Button variant="ghost" size="icon" className="h-8 w-8">
                  <LogOut className="h-4 w-4 text-navy-400" />
                </Button>
              </Link>
            </div>
          )}
        </div>
      </aside>
    </>
  );
}
