import { createSignal, Show, type JSX } from "solid-js";
import { A, useLocation } from "@solidjs/router";
import { cn } from "~/lib/utils";

interface SidebarLink {
  label: string;
  href: string;
  icon: () => JSX.Element;
}

function OverviewIcon() {
  return (
    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
      <rect x="2" y="2" width="7" height="7" rx="1" fill="currentColor"/>
      <rect x="11" y="2" width="7" height="7" rx="1" fill="currentColor" opacity="0.5"/>
      <rect x="2" y="11" width="7" height="7" rx="1" fill="currentColor" opacity="0.5"/>
      <rect x="11" y="11" width="7" height="7" rx="1" fill="currentColor" opacity="0.3"/>
    </svg>
  );
}

function DarkWatchIcon() {
  return (
    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M10 2L2 6v6c0 4.4 3.6 8.4 8 9 4.4-.6 8-4.6 8-9V6l-8-4zm0 1.7L16 7.5v4.5c0 3.7-2.6 7-6 8-3.4-1-6-4.3-6-8V7.5l6-3.8z" fill="currentColor"/>
    </svg>
  );
}

function VoicePrintIcon() {
  return (
    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M9 2h2v3H9V2zM6 6h8v1.5H6V6zm-1 3h10v1.5H5V9zm0 3h10v1.5H5V12z" fill="currentColor"/>
    </svg>
  );
}

function SpamShieldIcon() {
  return (
    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M10 2l7 3.5v5c0 5.2-3.5 9.5-7 10.5-3.5-1-7-5.3-7-10.5v-5L10 2zm0 2.1L5 7.2v3.3c0 4.2 2.8 7.8 5 8.6 2.2-.8 5-4.4 5-8.6V7.2l-5-3.1z" fill="currentColor"/>
    </svg>
  );
}

function HomeTitleIcon() {
  return (
    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M10 3L3 8v9h5v-5h4v5h5V8l-7-5zm0 2.5L14 9H6l4-3.5z" fill="currentColor"/>
    </svg>
  );
}

function RemoveBrokersIcon() {
  return (
    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M7 3h6v2H7V3zm-1 4h8l1 1v1.5H5V8l1-1zm-1 4h10v7H5v-7zm2 2v3h6v-3H7z" fill="currentColor"/>
    </svg>
  );
}

function SettingsIcon() {
  return (
    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
      <circle cx="10" cy="10" r="2.5" fill="currentColor"/>
      <path d="M10 1.5l2.5 1v2.5L10 5l-2.5-1v-2.5L10 1.5z" fill="currentColor" opacity="0.3"/>
      <path d="M18.5 10l-1 2.5H15l-1-2.5 1-2.5h2.5l1 2.5z" fill="currentColor" opacity="0.3"/>
      <path d="M10 18.5l-2.5-1V15L10 14l2.5 1v2.5l-2.5 1z" fill="currentColor" opacity="0.3"/>
      <path d="M1.5 10l1-2.5H5l1 2.5-1 2.5H2.5l-1-2.5z" fill="currentColor" opacity="0.3"/>
    </svg>
  );
}

const sidebarLinks: SidebarLink[] = [
  { label: "Overview", href: "/dashboard", icon: OverviewIcon },
  { label: "DarkWatch", href: "/dashboard/darkwatch", icon: DarkWatchIcon },
  { label: "VoicePrint", href: "/dashboard/voiceprint", icon: VoicePrintIcon },
  { label: "SpamShield", href: "/dashboard/spamshield", icon: SpamShieldIcon },
  { label: "HomeTitle", href: "/dashboard/hometitle", icon: HomeTitleIcon },
  { label: "RemoveBrokers", href: "/dashboard/removebrokers", icon: RemoveBrokersIcon },
  { label: "Settings", href: "/dashboard/settings", icon: SettingsIcon },
];

interface SidebarProps {
  open: boolean;
  onClose: () => void;
}

export default function Sidebar(props: SidebarProps) {
  const location = useLocation();

  return (
    <>
      <aside
        class={cn(
          "fixed lg:static inset-y-0 left-0 z-40 w-64 bg-[var(--color-bg)] border-r border-[var(--color-border)] transform transition-transform duration-300 ease-in-out lg:transform-none overflow-y-auto",
          props.open ? "translate-x-0" : "-translate-x-full lg:translate-x-0",
        )}
      >
        <div class="p-6 border-b border-[var(--color-border)]">
          <A href="/dashboard" class="flex items-center gap-2">
            <svg width="24" height="28" viewBox="0 0 28 32" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M14 0L26 6V16C26 24 14 32 14 32S2 24 2 16V6L14 0Z" fill="url(#sidebar-shield-grad)"/>
              <path d="M10 16L13 19L19 13" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
              <defs>
                <linearGradient id="sidebar-shield-grad" x1="0" y1="0" x2="28" y2="32" gradientUnits="userSpaceOnUse">
                  <stop stop-color="var(--color-brand-primary)"/>
                  <stop offset="1" stop-color="var(--color-brand-accent)"/>
                </linearGradient>
              </defs>
            </svg>
            <span class="text-lg font-bold text-[var(--color-text-primary)]">ShieldAI</span>
          </A>
        </div>
        <nav class="p-4 space-y-1">
          {sidebarLinks.map((link) => {
            const Icon = link.icon;
            const isActive = location.pathname === link.href ||
              (link.href !== "/dashboard" && location.pathname.startsWith(link.href));
            return (
              <A
                href={link.href}
                class={cn(
                  "flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-colors",
                  isActive
                    ? "bg-[var(--color-brand-primary)]/10 text-[var(--color-brand-primary)]"
                    : "text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-bg-secondary)]",
                )}
                onClick={() => props.onClose()}
              >
                <Icon />
                {link.label}
              </A>
            );
          })}
        </nav>
      </aside>
      <Show when={props.open}>
        <div
          class="fixed inset-0 z-30 bg-black/50 lg:hidden"
          onClick={() => props.onClose()}
        />
      </Show>
    </>
  );
}
