import { useMemo, useState } from 'react'
import { Outlet, NavLink } from 'react-router'
import { useQuery } from '@tanstack/react-query'
import { useLogout } from '@/hooks/useAuth'
import { useTheme } from '@/hooks/useTheme'
import { apiFetch } from '@/lib/api'
import type { PlatformSettings } from '@/lib/types'

export default function AdminLayout() {
  const { mutate: logout } = useLogout()
  const { theme, toggleTheme } = useTheme('ui_theme', 'dark')
  const [logoBroken, setLogoBroken] = useState(false)
  const { data: settings } = useQuery<PlatformSettings>({
    queryKey: ['admin', 'settings'],
    queryFn: () => apiFetch<PlatformSettings>('/admin/settings'),
  })
  const primary = settings?.admin_primary_color || '#2563eb'
  const accent = settings?.admin_accent_color || '#0ea5e9'
  const isLight = theme === 'light'
  const shellStyle = useMemo(
    () => ({
      backgroundColor: 'var(--ui-bg)',
      color: 'var(--ui-text)',
      ['--brand-primary' as string]: primary,
      ['--brand-accent' as string]: accent,
    }),
    [primary, accent]
  )
  const asideStyle = useMemo(
    () => ({
      backgroundColor: 'var(--ui-sidebar)',
      borderColor: 'var(--ui-border)',
    }),
    []
  )
  const mainStyle = useMemo(
    () => ({
      background: isLight
        ? 'linear-gradient(180deg, #f8fbff 0%, #eef4fb 100%)'
        : 'linear-gradient(180deg, #0b1530 0%, #050b18 100%)',
    }),
    [isLight]
  )

  return (
    <div className="flex h-screen" style={shellStyle}>
      <aside className="w-64 border-r flex flex-col" style={asideStyle}>
        <div className="p-4 border-b" style={{ borderColor: 'var(--ui-border)' }}>
          {settings?.platform_logo && !logoBroken ? (
            <div className="mb-2 flex h-14 w-14 items-center justify-center rounded-md border bg-white p-1" style={{ borderColor: 'var(--ui-border)' }}>
              <img
                src={settings.platform_logo}
                alt=""
                className="h-full w-full object-contain"
                onError={() => setLogoBroken(true)}
                referrerPolicy="no-referrer"
              />
            </div>
          ) : (
            <div className="mb-2 h-14 w-14 rounded-md flex items-center justify-center text-sm font-semibold" style={{ backgroundColor: `${accent}22`, color: primary }}>
              TX
            </div>
          )}
          <h1 className="text-lg font-bold text-[var(--ui-text)]">{settings?.platform_name || 'TechXCar'}</h1>
          <p className="text-xs mt-0.5 text-[var(--ui-muted)]">{settings?.platform_subtitle || 'Administração Global'}</p>
        </div>
        <nav className="flex-1 p-3 space-y-1">
          <NavLink
            to="/admin"
            end
            className={({ isActive }) =>
              `flex items-center px-3 py-2 rounded-md text-sm transition-colors ${isActive ? 'text-white' : 'text-[var(--ui-muted)] hover:text-[var(--ui-text)]'}`
            }
            style={({ isActive }) => (isActive ? { backgroundColor: primary } : { backgroundColor: 'transparent' })}
          >
            Dashboard
          </NavLink>
          <NavLink
            to="/admin/tenants"
            className={({ isActive }) =>
              `flex items-center px-3 py-2 rounded-md text-sm transition-colors ${isActive ? 'text-white' : 'text-[var(--ui-muted)] hover:text-[var(--ui-text)]'}`
            }
            style={({ isActive }) => (isActive ? { backgroundColor: primary } : { backgroundColor: 'transparent' })}
          >
            Oficinas
          </NavLink>
          <NavLink
            to="/admin/settings"
            className={({ isActive }) =>
              `flex items-center px-3 py-2 rounded-md text-sm transition-colors ${isActive ? 'text-white' : 'text-[var(--ui-muted)] hover:text-[var(--ui-text)]'}`
            }
            style={({ isActive }) => (isActive ? { backgroundColor: primary } : { backgroundColor: 'transparent' })}
          >
            Definições Globais
          </NavLink>
        </nav>
        <div className="p-3 border-t" style={{ borderColor: 'var(--ui-border)' }}>
          <button
            onClick={toggleTheme}
            className="mb-2 w-full text-left px-3 py-2 text-sm rounded-md transition-colors text-[var(--ui-muted)] hover:text-[var(--ui-text)] hover:bg-[var(--ui-hover)]"
          >
            Tema: {theme === 'dark' ? 'Dark' : 'Light'}
          </button>
          <button
            onClick={() => logout()}
            className="w-full text-left px-3 py-2 text-sm rounded-md transition-colors text-[var(--ui-muted)] hover:text-[var(--ui-text)] hover:bg-[var(--ui-hover)]"
          >
            Terminar sessão
          </button>
        </div>
      </aside>
      <main className="flex-1 overflow-auto p-6 text-[var(--ui-text)]" style={mainStyle}>
        <Outlet />
      </main>
    </div>
  )
}