import { Outlet, NavLink, useNavigate, Link } from 'react-router-dom'
import { LayoutDashboard, Package, Settings, LogOut, FlaskConical, Activity, Library, Plus, SlidersHorizontal, Building2, GitBranch, Image, BellRing, Receipt, Server, Upload, Menu, X } from 'lucide-react'
import { useAuthStore } from '../../store/auth'
import { clsx } from 'clsx'
import { useState } from 'react'
import { useQuery } from '@tanstack/react-query'
import { getWorkerActivity } from '../../api/worker'
import { listOrders } from '../../api/orders'
import NotificationCenter from './NotificationCenter'

const nav = [
  { to: '/', icon: LayoutDashboard, label: 'Dashboard', end: true },
  { to: '/orders', icon: Package, label: 'Orders' },
  { to: '/products', icon: Library, label: 'Products' },
  { to: '/materials', icon: FlaskConical, label: 'Materials' },
  { to: '/activity', icon: Activity, label: 'Activity' },
  { to: '/preferences', icon: SlidersHorizontal, label: 'Preferences' },
  { to: '/upload', icon: Upload, label: 'Upload' },
]

export default function Layout() {
  const { user, logout } = useAuthStore()
  const navigate = useNavigate()
  const [sidebarOpen, setSidebarOpen] = useState(false)

  const { data: activity } = useQuery({
    queryKey: ['worker-activity'],
    queryFn: getWorkerActivity,
    refetchInterval: 60_000,
    staleTime: 30_000,
  })

  const { data: draftOrders } = useQuery({
    queryKey: ['orders', 'draft-count'],
    queryFn: () => listOrders({ status: 'draft' }),
    staleTime: 10_000,
    refetchInterval: 30_000,
  })
  const draftCount = draftOrders?.length ?? 0

  function handleLogout() {
    logout()
    navigate('/login')
  }

  return (
    <div className="flex h-screen overflow-hidden bg-surface-alt">
      {/* Mobile top header bar */}
      <header className="fixed top-0 left-0 right-0 z-30 md:hidden bg-surface border-b border-border-default h-12 flex items-center px-4 gap-3">
        <button
          onClick={() => setSidebarOpen(true)}
          className="text-content-secondary hover:text-content transition-colors"
          aria-label="Open navigation"
        >
          <Menu size={20} />
        </button>
        <span className="flex-1 text-sm font-semibold text-content">Schaeffler Automat</span>
        <NotificationCenter />
      </header>

      {/* Overlay backdrop (mobile only) */}
      {sidebarOpen && (
        <div
          className="fixed inset-0 z-30 md:hidden"
          style={{ backgroundColor: 'rgba(0,0,0,0.4)' }}
          onClick={() => setSidebarOpen(false)}
        />
      )}

      {/* Sidebar */}
      <aside
        className={clsx(
          'fixed left-0 top-0 h-full z-40 w-60 bg-surface border-r border-border-default flex flex-col transform transition-transform duration-200',
          'md:relative md:translate-x-0 md:flex-shrink-0',
          sidebarOpen ? 'translate-x-0' : '-translate-x-full',
        )}
      >
        <div className="p-5 border-b border-border-default">
          <div className="flex items-center gap-3">
            <div className="w-8 h-8 bg-accent rounded flex items-center justify-center">
              <span className="text-accent-text text-sm font-bold">S</span>
            </div>
            <div className="flex-1">
              <p className="font-semibold text-content text-sm">Schaeffler</p>
              <p className="text-xs text-content-muted">Automat</p>
            </div>
            {/* NotificationCenter in sidebar header (desktop); hidden on mobile (shown in top bar) */}
            <span className="hidden md:block">
              <NotificationCenter />
            </span>
            {/* Close button — mobile only */}
            <button
              onClick={() => setSidebarOpen(false)}
              className="md:hidden text-content-secondary hover:text-content transition-colors"
              aria-label="Close navigation"
            >
              <X size={20} />
            </button>
          </div>
        </div>

        <nav className="flex-1 p-3 space-y-1 overflow-y-auto">
          {/* New Order — primary CTA at the top */}
          <Link
            to="/orders/new"
            onClick={() => setSidebarOpen(false)}
            className="flex items-center gap-2 px-3 py-2.5 mb-3 rounded-md text-sm font-semibold bg-accent text-accent-text hover:bg-accent-hover transition-colors shadow-sm"
          >
            <Plus size={18} />
            New Order
          </Link>

          {nav.map(({ to, icon: Icon, label, end }) => {
            const isActivity = to === '/activity'
            const isOrders = to === '/orders'
            const showSpinner = isActivity && ((activity?.active_count ?? 0) + (activity?.render_active_count ?? 0)) > 0
            const showFailed = isActivity && !showSpinner && ((activity?.failed_count ?? 0) + (activity?.render_failed_count ?? 0)) > 0
            const showDraftBadge = isOrders && draftCount > 0
            return (
              <NavLink
                key={to}
                to={to}
                end={end}
                onClick={() => setSidebarOpen(false)}
                className={({ isActive }) =>
                  clsx(
                    'flex items-center gap-3 px-3 py-2 rounded-md text-sm font-medium transition-colors',
                    isActive
                      ? 'bg-accent-light text-accent'
                      : 'text-content-secondary hover:bg-surface-hover',
                  )
                }
              >
                <Icon size={18} />
                {label}
                {showDraftBadge && (
                  <span className="ml-auto text-xs px-1.5 py-0.5 rounded-full bg-surface-muted text-content-muted font-semibold leading-none">
                    {draftCount}
                  </span>
                )}
                {showSpinner && (
                  <span className="ml-auto w-2 h-2 rounded-full bg-blue-500 animate-pulse" title="Processing…" />
                )}
                {showFailed && (
                  <span className="ml-auto w-2 h-2 rounded-full bg-red-500" title="Failed tasks" />
                )}
              </NavLink>
            )
          })}

          {(user?.role === 'admin' || user?.role === 'project_manager') && (
            <NavLink
              to="/admin"
              onClick={() => setSidebarOpen(false)}
              className={({ isActive }) =>
                clsx(
                  'flex items-center gap-3 px-3 py-2 rounded-md text-sm font-medium transition-colors',
                  isActive
                    ? 'bg-accent-light text-accent'
                    : 'text-content-secondary hover:bg-surface-hover',
                )
              }
            >
              <Settings size={18} />
              Admin
            </NavLink>
          )}
          {(user?.role === 'admin' || user?.role === 'project_manager') && (
            <NavLink
              to="/billing"
              onClick={() => setSidebarOpen(false)}
              className={({ isActive }) =>
                clsx(
                  'flex items-center gap-3 px-3 py-2 rounded-md text-sm font-medium transition-colors',
                  isActive
                    ? 'bg-accent-light text-accent'
                    : 'text-content-secondary hover:bg-surface-hover',
                )
              }
            >
              <Receipt size={18} />
              Billing
            </NavLink>
          )}
          {(user?.role === 'admin' || user?.role === 'project_manager') && (
            <NavLink
              to="/media"
              onClick={() => setSidebarOpen(false)}
              className={({ isActive }) =>
                clsx(
                  'flex items-center gap-3 px-3 py-2 rounded-md text-sm font-medium transition-colors',
                  isActive
                    ? 'bg-accent-light text-accent'
                    : 'text-content-secondary hover:bg-surface-hover',
                )
              }
            >
              <Image size={18} />
              Media Browser
            </NavLink>
          )}
          {(user?.role === 'admin' || user?.role === 'project_manager') && (
            <NavLink
              to="/workers"
              onClick={() => setSidebarOpen(false)}
              className={({ isActive }) =>
                clsx(
                  'flex items-center gap-3 px-3 py-2 rounded-md text-sm font-medium transition-colors',
                  isActive
                    ? 'bg-accent-light text-accent'
                    : 'text-content-secondary hover:bg-surface-hover',
                )
              }
            >
              <Server size={18} />
              Workers
            </NavLink>
          )}
          {(user?.role === 'admin' || user?.role === 'project_manager') && (
            <NavLink
              to="/workflows"
              onClick={() => setSidebarOpen(false)}
              className={({ isActive }) =>
                clsx(
                  'flex items-center gap-3 px-3 py-2 rounded-md text-sm font-medium transition-colors',
                  isActive
                    ? 'bg-accent-light text-accent'
                    : 'text-content-secondary hover:bg-surface-hover',
                )
              }
            >
              <GitBranch size={18} />
              Workflows
            </NavLink>
          )}
          {(user?.role === 'admin' || user?.role === 'project_manager') && (
            <NavLink
              to="/asset-libraries"
              onClick={() => setSidebarOpen(false)}
              className={({ isActive }) =>
                clsx(
                  'flex items-center gap-3 px-3 py-2 rounded-md text-sm font-medium transition-colors',
                  isActive
                    ? 'bg-accent-light text-accent'
                    : 'text-content-secondary hover:bg-surface-hover',
                )
              }
            >
              <Library size={18} />
              Asset Libraries
            </NavLink>
          )}
          {user?.role === 'admin' && (
            <NavLink
              to="/notification-settings"
              onClick={() => setSidebarOpen(false)}
              className={({ isActive }) =>
                clsx(
                  'flex items-center gap-3 px-3 py-2 rounded-md text-sm font-medium transition-colors',
                  isActive
                    ? 'bg-accent-light text-accent'
                    : 'text-content-secondary hover:bg-surface-hover',
                )
              }
            >
              <BellRing size={18} />
              Notification Settings
            </NavLink>
          )}
          {user?.role === 'admin' && (
            <NavLink
              to="/tenants"
              onClick={() => setSidebarOpen(false)}
              className={({ isActive }) =>
                clsx(
                  'flex items-center gap-3 px-3 py-2 rounded-md text-sm font-medium transition-colors',
                  isActive
                    ? 'bg-accent-light text-accent'
                    : 'text-content-secondary hover:bg-surface-hover',
                )
              }
            >
              <Building2 size={18} />
              Tenants
            </NavLink>
          )}
        </nav>

        <div className="p-3 border-t border-border-default space-y-1">
          <div className="flex items-center gap-3 px-3 py-2">
            <div className="w-7 h-7 bg-accent rounded-full flex items-center justify-center shrink-0">
              <span className="text-accent-text text-xs font-bold">{user?.full_name?.[0] ?? 'U'}</span>
            </div>
            <div className="flex-1 min-w-0">
              <p className="text-sm font-medium text-content truncate">{user?.full_name}</p>
              <p className="text-xs text-content-muted truncate">
                {user?.role === 'project_manager' ? 'Project Manager' : user?.role}
              </p>
            </div>
          </div>
          <button
            onClick={handleLogout}
            className="flex items-center gap-2 w-full px-3 py-2 text-sm text-content-secondary hover:bg-surface-hover rounded-md transition-colors"
          >
            <LogOut size={16} />
            Sign out
          </button>
        </div>
      </aside>

      {/* Main content */}
      <main className="flex-1 overflow-auto min-w-0 pt-12 md:pt-0">
        <Outlet />
      </main>
    </div>
  )
}
