import { Link } from "@tanstack/react-router";
import {
  LayoutDashboard,
  FileText,
  ListChecks,
  Users,
  Settings,
  TrendingUp,
} from "lucide-react";

import { Brand } from "@/components/brand/Brand";
import { Gem } from "@/components/brand/Gem";
import { useAuth } from "@/lib/auth";
import { formatRubisToHours } from "@/lib/format";
import { NavLink } from "./NavLink";

/**
 * Sidebar desktop — 240px wide, sticky.
 * - Brand en haut
 * - Nav verticale au centre
 * - Compteur rubis en bas (gratification permanente, cf. wireframe 4.1)
 *
 * Le compteur rubis dans le sidebar n'est pas négociable : c'est ce qui
 * fait dire au user "putain j'ai gagné 24h ce mois".
 */
export function AppSidebar({ rubisThisMonth = 0 }: { rubisThisMonth?: number }) {
  const { user: _user } = useAuth();

  return (
    <aside className="hidden lg:flex h-screen sticky top-0 w-[240px] shrink-0 flex-col border-r border-line bg-cream-2/60 px-4 py-6">
      <Link to="/" className="mb-10 px-2">
        <Brand />
      </Link>

      <nav className="flex flex-col gap-1">
        <NavLink to="/" icon={<LayoutDashboard size={17} />} label="Dashboard" />
        <NavLink to="/factures" icon={<FileText size={17} />} label="Factures" />
        <NavLink to="/plans" icon={<ListChecks size={17} />} label="Plans de relance" />
        <NavLink to="/clients" icon={<Users size={17} />} label="Clients" />
        <NavLink to="/insights" icon={<TrendingUp size={17} />} label="Insights" />
        <NavLink to="/parametres" icon={<Settings size={17} />} label="Paramètres" />
      </nav>

      <div className="mt-auto">
        <div className="rounded-soft border border-line bg-white px-3.5 py-3">
          <p className="text-[10.5px] font-semibold uppercase tracking-[0.12em] text-ink-3">
            Rubis ce mois
          </p>
          <div className="mt-1.5 flex items-end gap-2">
            <Gem size={18} />
            <span className="font-display text-[22px] font-bold leading-none tabular-nums">
              {rubisThisMonth}
            </span>
          </div>
          <p className="mt-1 text-[11px] text-ink-3">
            ≈ {formatRubisToHours(rubisThisMonth)} libérées
          </p>
        </div>
      </div>
    </aside>
  );
}
