"use client";

import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import {
  LayoutDashboard,
  Briefcase,
  Users,
  MessageSquare,
  Settings,
  Building2,
  BarChart3,
  Plus,
  Zap,
} from "lucide-react";
import Link from "next/link";
import { usePathname } from "next/navigation";

interface CompanySidebarProps {
  className?: string;
}

export function CompanySidebar({ className }: CompanySidebarProps) {
  const pathname = usePathname();

  const routes = [
    {
      label: "Dashboard",
      icon: LayoutDashboard,
      href: "/dashboard/company",
      active: pathname === "/dashboard/company",
    },
    {
      label: "My jobs",
      icon: Briefcase,
      href: "/dashboard/company/jobs",
      active: pathname?.startsWith("/dashboard/company/jobs"),
    },
    {
      label: "Applications",
      icon: Users,
      href: "/dashboard/company/applications",
      active: pathname?.startsWith("/dashboard/company/applications"),
    },
    {
      label: "Messages",
      icon: MessageSquare,
      href: "/dashboard/company/messages",
      active: pathname?.startsWith("/dashboard/company/messages"),
    },
    {
      label: "Reports",
      icon: BarChart3,
      href: "/dashboard/company/reports",
      active: pathname?.startsWith("/dashboard/company/reports"),
    },
    {
      label: "Company profile",
      icon: Building2,
      href: "/dashboard/company/profile",
      active: pathname?.startsWith("/dashboard/company/profile"),
    },
    {
      label: "Settings",
      icon: Settings,
      href: "/dashboard/company/settings",
      active: pathname?.startsWith("/dashboard/company/settings"),
    },
    {
      label: "Services (Gigs)",
      icon: Zap,
      href: "/dashboard/company/services",
      active: pathname?.startsWith("/dashboard/company/services"),
    },
  ];

  return (
    <div className={cn("pb-12 min-h-screen border-r bg-muted/10", className)}>
      <div className="space-y-4 py-4">
        <div className="px-3 py-2">
          <div className="flex items-center gap-3 mb-6 px-3">
            <Avatar className="h-10 w-10">
              <AvatarImage src="" />
              <AvatarFallback className="bg-primary/10 text-primary">
                <Building2 className="h-5 w-5" />
              </AvatarFallback>
            </Avatar>
            <div className="flex-1 min-w-0">
              <h2 className="text-lg font-semibold truncate">TechCorp</h2>
              <p className="text-xs text-muted-foreground truncate">Company</p>
            </div>
          </div>

          <Link href="/dashboard/company/jobs/new">
            <Button className="w-full mb-4" size="lg">
              <Plus className="h-4 w-4 mr-2" />
              New job
            </Button>
          </Link>

          <div className="space-y-1">
            {routes.map((route) => (
              <Link key={route.href} href={route.href}>
                <Button
                  variant={route.active ? "secondary" : "ghost"}
                  className={cn(
                    "w-full justify-start",
                    route.active && "bg-secondary"
                  )}
                >
                  <route.icon className="mr-2 h-4 w-4" />
                  {route.label}
                </Button>
              </Link>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}