import type { ReactNode } from "react";
import Link from "next/link";
import { ChevronDown, ChevronRight, type LucideIcon } from "lucide-react";

import { Separator } from "@/components/ui/separator";
import { cn } from "@/lib/utils";

type DashboardSidebarItem = {
  label: string;
  href: string;
  icon: LucideIcon;
  active?: boolean;
  expanded?: boolean;
  children?: DashboardSidebarItem[];
};

type DashboardSidebarProps = {
  items: DashboardSidebarItem[];
  iconSrc?: string;
  brandHref?: string;
  brandHoverLabel?: string;
  top?: ReactNode;
  footerItems?: DashboardSidebarItem[];
  footer?: ReactNode;
};

export function DashboardSidebar({
  items,
  iconSrc,
  brandHref = "/",
  brandHoverLabel,
  top,
  footerItems = [],
  footer,
}: DashboardSidebarProps) {
  function renderItem(item: DashboardSidebarItem, nested = false) {
    const Icon = item.icon;
    const hasChildren = Boolean(item.children?.length);
    const ChevronIcon = item.expanded ? ChevronDown : ChevronRight;

    return (
      <div key={item.href} className="space-y-1">
        <Link
          href={item.href}
          className={cn(
            "flex items-center gap-3 rounded-nested px-3 py-2 text-sm transition-colors",
            item.active
              ? "bg-primary text-primary-foreground"
              : "text-muted-foreground hover:bg-muted hover:text-foreground",
            nested ? "ml-4" : undefined,
          )}
        >
          <Icon className="h-4 w-4" />
          <span className="flex-1">{item.label}</span>
          {hasChildren ? <ChevronIcon className="h-4 w-4 opacity-70" /> : null}
        </Link>
        {item.expanded && item.children?.length ? item.children.map((child) => renderItem(child, true)) : null}
      </div>
    );
  }

  return (
    <div className="flex h-full flex-col bg-sidebar/40">
      <Link
        href={brandHref}
        className="group mx-4 mt-4 flex items-center gap-3 rounded-surface px-2 py-2 transition-colors hover:bg-muted/60"
      >
        <div className="overflow-hidden rounded-surface border border-border/70 bg-background shadow-sm transition-transform duration-200 group-hover:scale-105">
          {/* eslint-disable-next-line @next/next/no-img-element */}
          <img
            src={iconSrc || "/favicon.ico"}
            alt="Mohs Admin"
            className="h-9 w-9 object-cover"
          />
        </div>
        <div className="relative min-h-[2.5rem] min-w-0 flex-1 overflow-hidden">
          <div className="absolute inset-0 origin-left transition-all duration-200 group-hover:-translate-y-1 group-hover:opacity-0">
            <p className="truncate text-sm font-semibold text-foreground">Mohs Admin</p>
            <p className="truncate text-xs text-muted-foreground">Website owner workspace</p>
          </div>
          <div className="absolute inset-0 flex items-center">
            <p className="truncate text-sm font-semibold text-foreground opacity-0 transition-opacity duration-200 group-hover:opacity-100">
              {brandHoverLabel ?? "Back to Home"}
            </p>
          </div>
        </div>
      </Link>

      {top ? <div className="px-4 pt-2">{top}</div> : null}

      <Separator className="mb-4 mt-3" />

      <div className="flex-1 space-y-6 overflow-y-auto px-4 pb-4">
        <nav className="space-y-1">{items.map((item) => renderItem(item))}</nav>
      </div>

      {footer || footerItems.length ? (
        <>
          <Separator />
          <div className="space-y-2 p-4">
            {footerItems.length ? <nav className="space-y-1">{footerItems.map((item) => renderItem(item))}</nav> : null}
            {footerItems.length && footer ? <Separator /> : null}
            {footer}
          </div>
        </>
      ) : null}
    </div>
  );
}