"use client";

// ============================================================================
// Application Sidebar
// ============================================================================

import * as React from "react";
import {
  BarChart3,
  Folder,
  LayoutDashboard,
  Megaphone,
  ShoppingCart,
  TrendingUp,
  Settings2,
  ExternalLink,
} from "lucide-react";

import { NavMain } from "@/components/nav-main";
import { NavUser } from "@/components/nav-user";
import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarHeader,
  SidebarRail,
} from "@/components/ui/sidebar";
import { useAuth } from "@/components/auth/auth-provider";

const data = {
  navMain: [
    {
      title: "Главная",
      url: "/",
      icon: LayoutDashboard,
      isActive: true,
    },
    {
      title: "Внешние каналы",
      url: "/external-channels",
      icon: ExternalLink,
      items: [
        {
          title: "Каталог",
          url: "/external-channels",
        },
        {
          title: "Импорт",
          url: "/external-channels/import",
        },
      ],
    },
    {
      title: "Креативы",
      url: "/creatives",
      icon: Folder,
      items: [
        {
          title: "Все креативы",
          url: "/creatives",
        },
        {
          title: "Создать",
          url: "/creatives/new",
        },
      ],
    },
    {
      title: "Закупы",
      url: "/purchases",
      icon: ShoppingCart,
      items: [
        {
          title: "Все закупы",
          url: "/purchases",
        },
        {
          title: "Создать",
          url: "/purchases/new",
        },
      ],
    },
    {
      title: "Аналитика",
      url: "/analytics",
      icon: BarChart3,
      items: [
        {
          title: "Обзор",
          url: "/analytics",
        },
        {
          title: "Затраты",
          url: "/analytics/costs",
        },
        {
          title: "По каналам",
          url: "/analytics/channels",
        },
        {
          title: "По креативам",
          url: "/analytics/creatives",
        },
      ],
    },
  ],
};

export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
  const { user } = useAuth();

  return (
    <Sidebar collapsible="icon" {...props}>
      <SidebarHeader>
        <div className="flex items-center gap-2 px-2 py-2">
          <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary text-primary-foreground">
            <Megaphone className="h-4 w-4" />
          </div>
          <div className="grid flex-1 text-left text-sm leading-tight">
            <span className="truncate font-semibold">TGEX</span>
            <span className="truncate text-xs text-muted-foreground">
              Управление закупками
            </span>
          </div>
        </div>
      </SidebarHeader>
      <SidebarContent>
        <NavMain items={data.navMain} />
      </SidebarContent>
      <SidebarFooter>
        {user && (
          <NavUser
            user={{
              name: user.username || `User ${user.telegram_id}`,
              email: user.username
                ? `@${user.username}`
                : `ID: ${user.telegram_id}`,
              avatar: user.username
                ? `https://ui-avatars.com/api/?name=${user.username}`
                : `https://ui-avatars.com/api/?name=User`,
            }}
          />
        )}
      </SidebarFooter>
      <SidebarRail />
    </Sidebar>
  );
}