"use client";

import * as React from "react";
import {
  Inbox,
  LayoutDashboard,
  Link2,
  Package,
  Send,
  Settings,
  Wallet,
} from "lucide-react";
import Link from "next/link";

import { Logo } from "@/components/logo";
import { NavMain } from "@/components/nav-main";
import { NavUser } from "@/components/nav-user";
import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
} from "@/components/ui/sidebar";

import type { ShellCompany, ShellUser } from "@/app/(dashboard)/dashboard-shell";

type NavItem = {
  title: string;
  url: string;
  icon?: typeof LayoutDashboard;
};

type NavGroup = {
  label: string;
  items: NavItem[];
};

function buildNavGroups(kind: ShellCompany["kind"]): NavGroup[] {
  const isLab = kind === "lab";

  const operationsItems: NavItem[] = [
    { title: "Gelen İşler", url: "/jobs/inbound", icon: Inbox },
    { title: "Giden İşler", url: "/jobs/outbound", icon: Send },
  ];

  if (isLab) {
    operationsItems.push({ title: "Ürünler", url: "/products", icon: Package });
  }

  return [
    {
      label: "Genel",
      items: [{ title: "Anasayfa", url: "/dashboard", icon: LayoutDashboard }],
    },
    {
      label: "Operasyon",
      items: operationsItems,
    },
    {
      label: "Finans",
      items: [{ title: "Finans", url: "/finance", icon: Wallet }],
    },
    {
      label: "Hesap",
      items: [
        { title: "Bağlantı Kur", url: "/connections", icon: Link2 },
        { title: "Ayarlar", url: "/settings/workspace", icon: Settings },
      ],
    },
  ];
}

export function AppSidebar({
  user,
  company,
  ...props
}: React.ComponentProps<typeof Sidebar> & {
  user: ShellUser;
  company: ShellCompany;
}) {
  const navGroups = buildNavGroups(company.kind);

  return (
    <Sidebar {...props}>
      <SidebarHeader>
        <SidebarMenu>
          <SidebarMenuItem>
            <SidebarMenuButton size="lg" asChild>
              <Link href="/dashboard">
                {company.logoUrl ? (
                  <div className="bg-background flex aspect-square size-8 items-center justify-center overflow-hidden rounded-lg border">
                    {/* eslint-disable-next-line @next/next/no-img-element */}
                    <img
                      src={company.logoUrl}
                      alt={`${company.name} logo`}
                      className="size-full object-contain"
                    />
                  </div>
                ) : (
                  <div className="bg-primary text-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
                    <Logo size={20} className="text-current" />
                  </div>
                )}
                <div className="grid flex-1 text-left text-sm leading-tight">
                  <span className="truncate font-medium">DLS</span>
                  <span className="text-muted-foreground truncate text-xs">{company.name}</span>
                </div>
              </Link>
            </SidebarMenuButton>
          </SidebarMenuItem>
        </SidebarMenu>
      </SidebarHeader>
      <SidebarContent>
        {navGroups.map((group) => (
          <NavMain key={group.label} label={group.label} items={group.items} />
        ))}
      </SidebarContent>
      <SidebarFooter>
        <NavUser user={user} />
      </SidebarFooter>
    </Sidebar>
  );
}