"use client";

import * as React from "react";
import {
  ClipboardText,
  Buildings,
  CreditCard,
  FileText,
  SquaresFour,
  Presentation,
  MagnifyingGlass,
  GearSix,
  TrendUp,
  Users,
  Wallet,
} from '@/lib/icons';
import Link from "next/link";

import { Logo } from "@/components/logo";
import { NavMain } from "@/components/nav-main";
import { NavUser } from "@/components/nav-user";
import { AcademySidebarBadge } from "@/components/academy/academy-sidebar-badge";
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: SquaresFour,
      },
    ],
  },
  {
    label: "Portföy",
    items: [
      {
        title: "İlanlar",
        url: "/properties",
        icon: Buildings,
      },
    ],
  },
  {
    label: "İlişkiler",
    items: [
      {
        title: "Müşteriler",
        url: "/customers",
        icon: Users,
        items: [
          { title: "Müşteri Listesi", url: "/customers" },
          { title: "Arama Kriterleri", url: "/customers/searches" },
          { title: "Eşleşmeler", url: "/customers/matches" },
        ],
      },
      {
        title: "Yatırımcılar",
        url: "/investors",
        icon: Wallet,
      },
    ],
  },
  {
    label: "Satış",
    items: [
      {
        title: "Sunumlar",
        url: "/presentations",
        icon: Presentation,
      },
      {
        title: "Aktiviteler",
        url: "/activities",
        icon: ClipboardText,
      },
      {
        title: "Finans",
        url: "/finance",
        icon: TrendUp,
      },
    ],
  },
  {
    label: "Hesap",
    items: [
      {
        title: "Çalışma Alanı",
        url: "/settings/workspace",
        icon: GearSix,
        items: [
          { title: "Ofis Bilgileri", url: "/settings/workspace" },
          { title: "Ekip Üyeleri", url: "/settings/members" },
        ],
      },
      {
        title: "Profil",
        url: "/settings/account",
        icon: FileText,
      },
      {
        title: "Plan & Faturalama",
        url: "/settings/billing",
        icon: CreditCard,
      },
    ],
  },
];

export function AppSidebar({
  user,
  company,
  pendingMatchCount = 0,
  ...props
}: React.ComponentProps<typeof Sidebar> & {
  user: ShellUser;
  company: ShellCompany;
  pendingMatchCount?: number;
}) {
  // Inject badge into the Eşleşmeler sub-item
  const groups = navGroups.map((group) => ({
    ...group,
    items: group.items.map((item) => ({
      ...item,
      items: item.items?.map((sub) =>
        sub.url === "/customers/matches" && pendingMatchCount > 0
          ? { ...sub, badge: pendingMatchCount }
          : sub,
      ),
    })),
  }));

  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">KovakEmlak</span>
                  <span className="text-muted-foreground truncate text-xs">{company.name}</span>
                </div>
              </Link>
            </SidebarMenuButton>
          </SidebarMenuItem>
        </SidebarMenu>
      </SidebarHeader>
      <SidebarContent>
        {groups.map((group) => (
          <NavMain key={group.label} label={group.label} items={group.items} />
        ))}
      </SidebarContent>
      <SidebarFooter>
        <AcademySidebarBadge />
        <NavUser user={user} />
      </SidebarFooter>
    </Sidebar>
  );
}
