import { createSignal, onMount, onCleanup, Show, Suspense } from "solid-js";
import { A } from "@solidjs/router";
import { cn } from "~/lib/utils";
import { Button } from "~/components/ui";
import { useTheme } from "~/lib/theme";
import { useAuth } from "./useAuth";

function ShieldLogo() {
  return (
    <svg
      width="28"
      height="32"
      viewBox="0 0 28 32"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <defs>
        <linearGradient
          id="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>
      <path
        d="M14 0L26 6V16C26 24 14 32 14 32S2 24 2 16V6L14 0Z"
        fill="url(#shield-grad)"
      />
      <path
        d="M10 16L13 19L19 13"
        stroke="white"
        stroke-width="2.5"
        stroke-linecap="round"
        stroke-linejoin="round"
      />
    </svg>
  );
}

function ThemeToggle() {
  const { toggle, resolved } = useTheme();

  return (
    <button
      type="button"
      aria-label="Toggle theme"
      class="p-2 rounded-lg text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-bg-secondary)] transition-colors"
      onClick={toggle}
    >
      <Show
        when={resolved() === "dark"}
        fallback={
          <svg
            width="20"
            height="20"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          >
            <circle cx="12" cy="12" r="5" />
            <line x1="12" y1="1" x2="12" y2="3" />
            <line x1="12" y1="21" x2="12" y2="23" />
            <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
            <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
            <line x1="1" y1="12" x2="3" y2="12" />
            <line x1="21" y1="12" x2="23" y2="12" />
            <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
            <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
          </svg>
        }
      >
        <svg
          width="20"
          height="20"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        >
          <path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z" />
        </svg>
      </Show>
    </button>
  );
}

const navLinks = [
  { label: "Features", href: "/features" },
  { label: "Pricing", href: "/pricing" },
  { label: "Blog", href: "/blog" },
  { label: "Dashboard", href: "/dashboard" },
];

export default function Navbar() {
  const [mobileOpen, setMobileOpen] = createSignal(false);
  const [scrolled, setScrolled] = createSignal(false);
  const auth = useAuth();

  onMount(() => {
    const onScroll = () => {
      setScrolled(window.scrollY > 8);
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    onCleanup(() => window.removeEventListener("scroll", onScroll));
  });

  return (
    <nav
      class={cn(
        "fixed top-0 left-0 right-0 z-50 h-16 transition-all duration-300",
        scrolled()
          ? "glass border-b border-[var(--color-border)] shadow-sm"
          : "bg-transparent",
      )}
    >
      <div class="max-w-7xl mx-auto px-4 md:px-6 lg:px-8 h-16 flex items-center justify-between">
        <A href="/" class="flex items-center gap-2">
          <ShieldLogo />
          <span class="text-lg font-bold text-[var(--color-text-primary)]">
            ShieldAI
          </span>
        </A>

        <div class="hidden md:flex items-center gap-6">
          {navLinks.map(link => (
            <A
              href={link.href}
              class="text-sm font-medium text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] transition-colors"
            >
              {link.label}
            </A>
          ))}
        </div>

        <div class="hidden md:flex items-center gap-3">
          <ThemeToggle />
          <Show
            when={auth.isAuthenticated}
            fallback={
              <>
                <Button variant="secondary" size="sm">
                  <A href="/signin">Sign In</A>
                </Button>
                <Button variant="primary" size="sm">
                  <A href="/signup">Get Started</A>
                </Button>
              </>
            }
          >
            <Button variant="secondary" size="sm">
              <A href="/dashboard">Dashboard</A>
            </Button>
          </Show>
        </div>

        <div class="flex md:hidden items-center gap-2">
          <ThemeToggle />
          <button
            type="button"
            aria-label="Toggle menu"
            class="p-2 rounded-lg text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)]"
            onClick={() => setMobileOpen(v => !v)}
          >
            <Show
              when={mobileOpen()}
              fallback={
                <svg
                  width="24"
                  height="24"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                >
                  <line x1="3" y1="6" x2="21" y2="6" />
                  <line x1="3" y1="12" x2="21" y2="12" />
                  <line x1="3" y1="18" x2="21" y2="18" />
                </svg>
              }
            >
              <svg
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
              >
                <line x1="18" y1="6" x2="6" y2="18" />
                <line x1="6" y1="6" x2="18" y2="18" />
              </svg>
            </Show>
          </button>
        </div>
      </div>

      <Show when={mobileOpen()}>
        <div class="md:hidden glass border-t border-[var(--color-border)]">
          <div class="px-4 py-4 space-y-1">
            {navLinks.map(link => (
              <A
                href={link.href}
                class="block px-3 py-2 rounded-lg text-base font-medium text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-bg-secondary)] transition-colors"
                onClick={() => setMobileOpen(false)}
              >
                {link.label}
              </A>
            ))}
            <div class="pt-3 flex flex-col gap-2">
              <Show
                when={auth.isAuthenticated}
                fallback={
                  <>
                    <Button variant="secondary" class="w-full">
                      <A href="/signin">Sign In</A>
                    </Button>
                    <Button variant="primary" class="w-full">
                      <A href="/signup">Get Started</A>
                    </Button>
                  </>
                }
              >
                <Button variant="secondary" class="w-full">
                  <A href="/dashboard">Dashboard</A>
                </Button>
              </Show>
            </div>
          </div>
        </div>
      </Show>
    </nav>
  );
}