"use client";

import * as React from "react";
import {
  Briefcase,
  Calendar,
  CheckSquare,
  CreditCard,
  FileText,
  LayoutDashboard,
  Package,
  Receipt,
  Settings,
  TrendingUp,
  Users,
  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";

const navGroups = [
  {
    label: "Genel",
    items: [
      {
        title: "Genel bakış",
        url: "/dashboard",
        icon: LayoutDashboard,
      },
    ],
  },
  {
    label: "İşletme",
    items: [
      {
        title: "Müşteri Adayları",
        url: "/leads",
        icon: TrendingUp,
      },
      {
        title: "Müşteriler",
        url: "/customers",
        icon: Users,
      },
      {
        title: "Hizmetler",
        url: "/services",
        icon: Briefcase,
      },
      {
        title: "Yazılımlarımız",
        url: "/software",
        icon: Package,
      },
    ],
  },
  {
    label: "Operasyon",
    items: [
      {
        title: "Takvim",
        url: "/calendar",
        icon: Calendar,
      },
      {
        title: "Görevler",
        url: "/tasks",
        icon: CheckSquare,
      },
    ],
  },
  {
    label: "Finans",
    items: [
      {
        title: "Gelir / Gider",
        url: "/finance",
        icon: Wallet,
      },
      {
        title: "Bankalar",
        url: "/finance/banks",
        icon: Briefcase,
        items: [
          { title: "Banka hesapları", url: "/finance/banks" },
          { title: "Krediler", url: "/finance/loans" },
          { title: "Kredi kartları", url: "/finance/cards" },
        ],
      },
      {
        title: "Faturalar",
        url: "/invoices",
        icon: Receipt,
      },
      {
        title: "Rapor",
        url: "/finance/reports",
        icon: FileText,
      },
    ],
  },
  {
    label: "Hesap",
    items: [
      {
        title: "Çalışma alanı",
        url: "/settings/workspace",
        icon: Settings,
        items: [
          { title: "Şirket bilgileri", url: "/settings/workspace" },
          { title: "Ekip üyeleri", url: "/settings/members" },
          { title: "Faturalama", url: "/settings/billing" },
        ],
      },
      {
        title: "Profil",
        url: "/settings/account",
        icon: FileText,
      },
      {
        title: "Plan",
        url: "/pricing",
        icon: CreditCard,
      },
    ],
  },
];

export function AppSidebar({
  user,
  company,
  ...props
}: React.ComponentProps<typeof Sidebar> & {
  user: ShellUser;
  company: ShellCompany;
}) {
  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">İşletmem</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>
  );
}
