"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { useState } from "react";
import {
  LayoutDashboard, CheckSquare, FolderOpen, Users,
  DollarSign, BookOpen, Calendar, Target,
  User, ChevronLeft, ChevronRight, LogOut, Settings,
} from "lucide-react";
import { useAuthStore } from "@/store/authStore";
import { useRouter } from "next/navigation";
import toast from "react-hot-toast";
import { cn } from "@/lib/utils";

const NAV_ITEMS = [
  { href: "/", icon: LayoutDashboard, label: "Dashboard" },
  { href: "/gorevler", icon: CheckSquare, label: "Görevler" },
  { href: "/projeler", icon: FolderOpen, label: "Projeler" },
  { href: "/crm", icon: Users, label: "CRM" },
  { href: "/finans", icon: DollarSign, label: "Finans" },
  { href: "/notlar", icon: BookOpen, label: "Notlar" },
  { href: "/takvim", icon: Calendar, label: "Takvim" },
  { href: "/hedefler", icon: Target, label: "Hedefler" },
];

export function Sidebar() {
  const pathname = usePathname();
  const router = useRouter();
  const { user, logout } = useAuthStore();
  const [collapsed, setCollapsed] = useState(false);

  const handleLogout = async () => {
    await logout();
    toast.success("Başarıyla çıkış yapıldı.");
    router.push("/giris");
  };

  return (
    <aside
      className={cn(
        "flex flex-col h-full bg-[#1a1a1d] border-r border-surface-500",
        "transition-all duration-300",
        collapsed ? "w-16" : "w-60"
      )}
    >
      {/* Logo */}
      <div className="flex items-center gap-3 px-4 py-5 border-b border-surface-500">
        <div className="w-8 h-8 bg-brand-600 rounded-lg flex items-center justify-center flex-shrink-0 text-lg">
          🐯
        </div>
        {!collapsed && (
          <span className="font-semibold text-surface-100 text-base tracking-tight">
            KaplanOS
          </span>
        )}
        <button
          onClick={() => setCollapsed(!collapsed)}
          className="ml-auto p-1 rounded text-surface-500 hover:text-surface-300 hover:bg-surface-600 transition-colors"
        >
          {collapsed ? <ChevronRight size={14} /> : <ChevronLeft size={14} />}
        </button>
      </div>

      {/* Nav */}
      <nav className="flex-1 overflow-y-auto py-4 px-2 space-y-0.5">
        {NAV_ITEMS.map(({ href, icon: Icon, label }) => {
          const isActive = href === "/" ? pathname === "/" : pathname.startsWith(href);
          return (
            <Link key={href} href={href}>
              <div
                className={cn(
                  "flex items-center gap-3 px-3 py-2.5 rounded-lg transition-all duration-150 cursor-pointer group",
                  isActive
                    ? "bg-brand-600/15 text-brand-400 border border-brand-600/20"
                    : "text-surface-400 hover:text-surface-200 hover:bg-surface-600"
                )}
              >
                <Icon
                  size={18}
                  className={cn(
                    "flex-shrink-0 transition-colors",
                    isActive ? "text-brand-400" : "text-surface-500 group-hover:text-surface-300"
                  )}
                />
                {!collapsed && (
                  <span className="text-sm font-medium truncate">{label}</span>
                )}
              </div>
            </Link>
          );
        })}
      </nav>

      {/* User Bilgisi */}
      <div className="border-t border-surface-500 p-3 space-y-1">
        <Link href="/profil">
          <div className="flex items-center gap-3 px-3 py-2.5 rounded-lg hover:bg-surface-600 cursor-pointer transition-colors group">
            {user?.avatar_url ? (
              <img
                src={user.avatar_url}
                alt="Profil"
                className="w-7 h-7 rounded-full object-cover flex-shrink-0"
              />
            ) : (
              <div className="w-7 h-7 rounded-full bg-brand-600/30 flex items-center justify-center flex-shrink-0">
                <User size={14} className="text-brand-400" />
              </div>
            )}
            {!collapsed && (
              <div className="flex-1 min-w-0">
                <p className="text-sm font-medium text-surface-200 truncate">
                  {user?.full_name || user?.username}
                </p>
                <p className="text-xs text-surface-500 truncate">{user?.email}</p>
              </div>
            )}
          </div>
        </Link>

        <button
          onClick={handleLogout}
          className={cn(
            "w-full flex items-center gap-3 px-3 py-2 rounded-lg",
            "text-surface-500 hover:text-red-400 hover:bg-red-500/10",
            "transition-colors text-sm"
          )}
        >
          <LogOut size={16} className="flex-shrink-0" />
          {!collapsed && <span>Çıkış Yap</span>}
        </button>
      </div>
    </aside>
  );
}