"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { ICONS } from "@/lib/icons";

const NAV = [
  { href: "/", label: "Dashboard", icon: ICONS.dashboard },
  { href: "/nhap-so", label: "Nhập số", icon: ICONS.nhapSo },
  { href: "/dong-tien", label: "Dòng tiền", icon: ICONS.dongTien },
  { href: "/cong-no", label: "Công nợ", icon: ICONS.congNo },
  { href: "/quy-trinh", label: "Quy trình", icon: ICONS.quyTrinh },
  { href: "/hanh-dong", label: "Hành động & Agent", icon: ICONS.hanhDong },
];

export function Sidebar() {
  const pathname = usePathname();
  return (
    <aside className="hidden md:flex w-64 shrink-0 flex-col border-r border-slate-100 bg-white px-4 py-5">
      <div className="flex items-center gap-2 px-2 pb-6">
        <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-teal-500 text-white">
          <ICONS.dongTien size={20} strokeWidth={1.75} />
        </div>
        <div>
          <div className="text-base font-bold leading-tight text-slate-800">CRM Dòng Tiền</div>
          <div className="text-[11px] text-slate-400 leading-tight">Tài chính vững mạnh</div>
        </div>
      </div>
      <nav className="flex flex-col gap-1">
        {NAV.map((item) => {
          const active = pathname === item.href;
          const Icon = item.icon;
          return (
            <Link
              key={item.href}
              href={item.href}
              className={`flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-medium transition ${
                active ? "bg-teal-500 text-white shadow-sm" : "text-slate-600 hover:bg-teal-50 hover:text-teal-700"
              }`}
            >
              <Icon size={18} strokeWidth={1.75} className={active ? "text-white" : "text-slate-400"} />
              {item.label}
            </Link>
          );
        })}
      </nav>
      <div className="mt-auto rounded-xl bg-gradient-to-br from-teal-50 to-teal-100 p-4 text-xs text-teal-800">
        <div className="font-semibold mb-1">Nguồn dữ liệu 100% thật</div>
        <div className="text-teal-700/80">Toàn bộ số liệu tính bằng công thức tài chính, không có dữ liệu giả lập.</div>
      </div>
    </aside>
  );
}