import { A, useLocation } from '@solidjs/router'
import { For, Show } from 'solid-js'
import { appNavRoutes } from '@/app/navigation'
import { cn } from '@/utils/cn'

interface SidebarProps {
  mobileOpen: boolean
  onCloseMobile: () => void
}

const SidebarContent = (props: { onNavigate?: () => void }) => {
  const location = useLocation()

  return (
    <div class="flex h-full flex-col p-6 scanlines">
      {/* BRUTAL BRAND */}
      <div class="flex items-center gap-4 pb-8 border-b-4 border-primary">
        <div class="relative grid h-14 w-14 place-items-center bg-primary border-4 border-fg shadow-brutal-sm">
          <span class="font-display text-2xl font-bold text-on-primary">S</span>
        </div>
        <div>
          <p class="font-display text-2xl font-bold leading-none text-fg uppercase tracking-tight">SEEN</p>
          <p class="mt-1 text-[9px] font-bold uppercase tracking-[0.2em] text-primary font-mono">CTRL CENTER</p>
        </div>
      </div>

      {/* NAVIGATION */}
      <nav class="flex-1 overflow-y-auto scrollbar-brutal pt-8" aria-label="Primary navigation">
        <p class="px-2 text-[9px] font-bold uppercase tracking-[0.2em] text-muted-fg font-mono mb-4">// NAVIGATE</p>
        <ul class="space-y-2">
          <For each={appNavRoutes}>
            {(route) => {
              const isActive = () => location.pathname === route.path
              const Icon = route.icon

              return (
                <li>
                  <A
                    href={route.path}
                    class={cn(
                      'group relative flex items-center gap-4 px-4 py-3 text-sm font-bold uppercase tracking-wide transition-all duration-100 border-3',
                      isActive()
                        ? 'bg-primary text-on-primary border-primary shadow-brutal-sm translate-x-[-4px]'
                        : 'bg-transparent text-fg border-outline hover:border-fg hover:translate-x-[-2px]',
                    )}
                    data-route={route.path}
                    onClick={props.onNavigate}
                  >
                    <div
                      class={cn(
                        'flex h-10 w-10 items-center justify-center border-2 transition-all duration-100',
                        isActive()
                          ? 'bg-on-primary text-primary border-on-primary'
                          : 'bg-surface-container text-fg border-outline group-hover:border-fg',
                      )}
                    >
                      <Icon class="h-5 w-5" />
                    </div>
                    <div class="min-w-0 flex-1">
                      <p class="font-bold text-xs tracking-wider">{route.label}</p>
                    </div>
                    <Show when={!route.implemented}>
                      <span class="bg-surface-high px-2 py-1 text-[8px] font-bold uppercase tracking-[0.15em] text-muted-fg border-2 border-outline">
                        SOON
                      </span>
                    </Show>
                  </A>
                </li>
              )
            }}
          </For>
        </ul>
      </nav>

      {/* FOOTER */}
      <div class="pt-6 border-t-4 border-outline">
        <div class="bg-surface-container px-4 py-3 border-3 border-outline">
          <div class="flex items-center justify-between">
            <span class="text-[10px] font-bold text-muted-fg tracking-tight font-mono">v0.1.0</span>
            <span class="text-[9px] font-bold text-primary uppercase tracking-wider font-mono">LIVE</span>
          </div>
        </div>
      </div>
    </div>
  )
}

export const Sidebar = (props: SidebarProps) => (
  <>
    {/* Desktop Sidebar */}
    <aside class="hidden h-full w-64 bg-surface border-r-4 border-outline lg:block">
      <SidebarContent />
    </aside>

    {/* Mobile Sidebar Overlay */}
    <div
      class={cn(
        'fixed inset-0 z-40 bg-black/90 transition-opacity duration-100 lg:hidden',
        props.mobileOpen ? 'opacity-100' : 'pointer-events-none opacity-0',
      )}
      onClick={props.onCloseMobile}
    >
      <aside
        class={cn(
          'h-full w-64 bg-surface transition-transform duration-100 border-r-4 border-primary',
          props.mobileOpen ? 'translate-x-0' : '-translate-x-full',
        )}
        onClick={(event) => event.stopPropagation()}
      >
        <SidebarContent onNavigate={props.onCloseMobile} />
      </aside>
    </div>
  </>
)
