"use client";

import { useState } from "react";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import { ScrollArea } from "@/components/ui/scroll-area";
import {
  Monitor,
  Layout as LayoutIcon,
  Calendar,
  Menu,
  Settings,
  ChevronLeft,
  BatteryWarning as BrandingWatermark,
  TwitchIcon,
} from "lucide-react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import {
  OrganizationList,
  OrganizationSwitcher,
  UserButton,
} from "@clerk/nextjs";

export default function Layout({ children }: { children: React.ReactNode }) {
  const [collapsed, setCollapsed] = useState(false);
  const pathname = usePathname();

  const routes = [
    {
      href: "/admin",
      label: "Dashboard",
      icon: LayoutIcon,
    },
    {
      href: "/admin/displays",
      label: "Displays",
      icon: Monitor,
    },
    {
      href: "/admin/twitch",
      label: "Twitch",
      icon: TwitchIcon,
    },
    {
      href: "/admin/events",
      label: "Events",
      icon: Calendar,
    },
    {
      href: "/admin/menu",
      label: "Menu",
      icon: Menu,
    },
    {
      href: "/admin/playlists",
      label: "Playlists",
      icon: BrandingWatermark,
    },
    {
      href: "/admin/settings",
      label: "Settings",
      icon: Settings,
    },
  ];

  return (
    <div className="h-screen flex">
      <div
        className={cn(
          "relative h-full bg-gradient-to-b from-violet-50 via-white to-sky-50 border-r border-purple-100 pt-4 flex flex-col transition-all duration-300",
          collapsed ? "w-16" : "w-60"
        )}
      >
        <Button
          variant="ghost"
          size="icon"
          className="absolute -right-4 top-2 z-50 rounded-full bg-white border-purple-100 shadow-xl hover:bg-purple-50 hover:text-purple-600"
          onClick={() => setCollapsed(!collapsed)}
        >
          <ChevronLeft
            className={cn("h-4 w-4 transition-all", collapsed && "rotate-180")}
          />
        </Button>

        <div
          className={cn(
            "px-4 py-2 flex items-center gap-x-2",
            collapsed && "justify-center"
          )}
        >
          <div className="p-2 rounded-xl bg-gradient-to-br from-purple-500 via-pink-500 to-blue-500">
            <Monitor className="h-6 w-6 text-white" />
          </div>
          {!collapsed && (
            <div>
              <h1 className="font-bold text-xl bg-gradient-to-r  from-purple-600 via-pink-500 to-blue-500 bg-clip-text text-transparent">
                Jotun Display
              </h1>
              <p className="text-xs text-gray-500">Management System</p>
            </div>
          )}
        </div>

        <ScrollArea className="flex-1 pt-8">
          <div className="space-y-2 px-2">
            {routes.map((route) => (
              <Link
                key={route.href}
                href={route.href}
                className={cn(
                  "flex items-center gap-x-2 text-gray-600 text-sm font-medium px-3 py-2 rounded-xl transition-all",
                  pathname === route.href
                    ? "bg-gradient-to-r from-purple-500/10 via-pink-500/10 to-blue-500/10 text-purple-600"
                    : "hover:bg-purple-50 hover:text-purple-600",
                  collapsed && "justify-center"
                )}
              >
                <route.icon
                  className={cn(
                    collapsed ? "h-5 w-5" : "h-4 w-4",
                    pathname === route.href && "text-purple-600"
                  )}
                />
                {!collapsed && (
                  <span
                    className={cn(
                      "transition-colors",
                      pathname === route.href && "text-purple-600"
                    )}
                  >
                    {route.label}
                  </span>
                )}
              </Link>
            ))}
          </div>
        </ScrollArea>

        <div className="p-4">
          <div
            className={cn(
              "p-3 rounded-xl bg-gradient-to-r from-purple-500/5 via-pink-500/5 to-blue-500/5 border border-purple-100",
              collapsed && "p-2"
            )}
          >
            {collapsed ? (
              <div className="flex justify-center">
                <Settings className="h-5 w-5 text-purple-600" />
              </div>
            ) : (
              <div className="flex items-center gap-3">
                <div className="h-8 w-8 rounded-lg bg-gradient-to-br from-purple-500 via-pink-500 to-blue-500 flex items-center justify-center">
                  <Settings className="h-4 w-4 text-white" />
                </div>
                <div>
                  <p className="text-sm font-medium text-gray-900">
                    Admin Mode
                  </p>
                  <p className="text-xs text-gray-500">System Settings</p>
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
      <main className="flex-1 min-w-0">
        <div className="h-full  p-8">
          <div className="content-end flex justify-end -mb-8  ">
            <OrganizationSwitcher />
          </div>
          {children}
        </div>
      </main>
    </div>
  );
}