"use client";

import Link from "next/link";
import { usePathname, useRouter } from "next/navigation";
import {
  LayoutDashboard, ArrowLeftRight, CalendarClock, Target, Settings2, Users, Landmark, LogOut, Plus,
} from "lucide-react";
import type { Workspace } from "@/lib/types";

const NAV = [
  { href: "", label: "Dashboard", icon: LayoutDashboard },
  { href: "/lancamentos", label: "Lançamentos", icon: ArrowLeftRight },
  { href: "/pagar-receber", label: "Pagar e receber", icon: CalendarClock },
  { href: "/orcamento", label: "Orçamento e metas", icon: Target },
  { href: "/cadastros", label: "Contas e categorias", icon: Settings2 },
  { href: "/membros", label: "Membros", icon: Users },
  { href: "/open-finance", label: "Open Finance", icon: Landmark },
];

export function Sidebar({
  ws, workspaces, userName, signOut,
}: {
  ws: Workspace;
  workspaces: Workspace[];
  userName: string;
  signOut: () => Promise<void>;
}) {
  const pathname = usePathname();
  const router = useRouter();
  const base = `/w/${ws.id}`;

  return (
    <aside className="flex w-full flex-col border-b border-stone-200 bg-white md:h-screen md:w-60 md:shrink-0 md:border-b-0 md:border-r md:sticky md:top-0">
      <div className="p-4">
        <label className="label">Carteira</label>
        <select
          className="input font-medium"
          value={ws.id}
          onChange={(e) => (e.target.value === "__new" ? router.push(`${base}/cadastros#nova-carteira`) : router.push(`/w/${e.target.value}`))}
        >
          <optgroup label="Pessoal">
            {workspaces.filter((w) => w.kind === "pessoal").map((w) => <option key={w.id} value={w.id}>{w.name}</option>)}
          </optgroup>
          <optgroup label="Empresa">
            {workspaces.filter((w) => w.kind === "empresa").map((w) => <option key={w.id} value={w.id}>{w.name}</option>)}
          </optgroup>
          <option value="__new">+ Nova carteira…</option>
        </select>
      </div>

      <nav className="flex gap-1 overflow-x-auto px-2 pb-2 md:flex-col md:overflow-visible md:pb-0">
        {NAV.map(({ href, label, icon: Icon }) => {
          const full = base + href;
          const active = href === "" ? pathname === base : pathname.startsWith(full);
          return (
            <Link
              key={href}
              href={full}
              className={`flex shrink-0 items-center gap-2.5 rounded-lg px-3 py-2 text-sm transition-colors ${
                active ? "bg-brand-50 font-medium text-brand-700" : "text-stone-600 hover:bg-stone-100"
              }`}
            >
              <Icon size={16} /> {label}
            </Link>
          );
        })}
      </nav>

      <div className="mt-auto hidden border-t border-stone-200 p-4 md:block">
        <Link href={`${base}/lancamentos?novo=1`} className="btn-primary mb-3 w-full"><Plus size={16} /> Novo lançamento</Link>
        <div className="flex items-center justify-between text-sm">
          <span className="truncate text-stone-600">{userName}</span>
          <form action={signOut}>
            <button className="btn-ghost" title="Sair"><LogOut size={14} /></button>
          </form>
        </div>
      </div>
    </aside>
  );
}