// SPDX-License-Identifier: GPL-3.0-or-later

import { useState } from 'react';
import { NavLink, useLocation } from 'react-router-dom';
import {
  Shield,
  LayoutDashboard,
  Upload,
  Download,
  Clock,
  User,
  Settings,
  Briefcase,
  RefreshCw,
  Wifi,
  WifiOff,
  Menu,
  X,
} from 'lucide-react';
import { useBackend } from '../contexts/BackendContext';

const navigation = [
  { name: 'Dashboard', href: '/', icon: LayoutDashboard },
  { name: 'Backup', href: '/backup', icon: Upload },
  { name: 'Restore', href: '/restore', icon: Download },
  { name: 'Snapshots', href: '/snapshots', icon: Clock },
  { name: 'Jobs', href: '/jobs', icon: Briefcase },
  { name: 'Account', href: '/account', icon: User },
  { name: 'Settings', href: '/settings', icon: Settings },
];

interface LayoutProps {
  children: React.ReactNode;
}

export default function Layout({ children }: LayoutProps) {
  const { isConnected, refresh, status } = useBackend();
  const location = useLocation();
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);

  const handleNavClick = () => {
    setMobileMenuOpen(false);
  };

  const SidebarContent = () => (
    <>
      {/* Logo */}
      <div className="h-16 flex items-center px-6 border-b border-slate-800">
        <Shield className="h-8 w-8 text-primary-400" />
        <span className="ml-3 text-lg font-semibold">Private Archive</span>
      </div>

      {/* Navigation */}
      <nav className="flex-1 px-4 py-6 space-y-1 overflow-y-auto">
        {navigation.map((item) => {
          const isActive = location.pathname === item.href;
          return (
            <NavLink
              key={item.name}
              to={item.href}
              onClick={handleNavClick}
              className={`flex items-center px-4 py-3 rounded-lg text-sm font-medium transition-colors min-h-[44px] ${
                isActive
                  ? 'bg-primary-600 text-white'
                  : 'text-slate-300 hover:bg-slate-800 hover:text-white'
              }`}
            >
              <item.icon className="h-5 w-5 mr-3 flex-shrink-0" />
              {item.name}
            </NavLink>
          );
        })}
      </nav>

      {/* Connection Status */}
      <div className="px-4 py-4 border-t border-slate-800">
        <div className="flex items-center justify-between">
          <div className="flex items-center">
            {isConnected ? (
              <>
                <Wifi className="h-4 w-4 text-green-400 mr-2" />
                <span className="text-sm text-slate-300">Connected</span>
              </>
            ) : (
              <>
                <WifiOff className="h-4 w-4 text-red-400 mr-2" />
                <span className="text-sm text-slate-300">Disconnected</span>
              </>
            )}
          </div>
          <button
            onClick={refresh}
            className="p-2 rounded hover:bg-slate-800 text-slate-400 hover:text-white transition-colors min-h-[44px] min-w-[44px] flex items-center justify-center"
            title="Refresh"
          >
            <RefreshCw className="h-4 w-4" />
          </button>
        </div>
        {status && (
          <p className="mt-2 text-xs text-slate-500">
            v{status.version || '0.1.0'}
          </p>
        )}
      </div>
    </>
  );

  return (
    <div className="min-h-screen flex flex-col lg:flex-row">
      {/* Mobile Header */}
      <header className="lg:hidden sticky top-0 z-40 bg-slate-900 text-white h-16 flex items-center justify-between px-4 safe-top">
        <div className="flex items-center">
          <Shield className="h-7 w-7 text-primary-400" />
          <span className="ml-2 text-base font-semibold">Private Archive</span>
        </div>
        <button
          onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
          className="p-2 rounded-lg hover:bg-slate-800 transition-colors min-h-[44px] min-w-[44px] flex items-center justify-center"
          aria-label="Toggle menu"
        >
          {mobileMenuOpen ? (
            <X className="h-6 w-6" />
          ) : (
            <Menu className="h-6 w-6" />
          )}
        </button>
      </header>

      {/* Mobile Menu Overlay */}
      {mobileMenuOpen && (
        <div
          className="lg:hidden fixed inset-0 z-30 bg-black/50 backdrop-blur-sm"
          onClick={() => setMobileMenuOpen(false)}
        />
      )}

      {/* Mobile Menu Drawer */}
      <aside
        className={`lg:hidden fixed top-16 right-0 bottom-0 z-40 w-64 bg-slate-900 text-white transform transition-transform duration-200 ease-in-out flex flex-col safe-bottom ${
          mobileMenuOpen ? 'translate-x-0' : 'translate-x-full'
        }`}
      >
        <SidebarContent />
      </aside>

      {/* Desktop Sidebar */}
      <aside className="hidden lg:flex w-64 bg-slate-900 text-white flex-col flex-shrink-0 sticky top-0 h-screen">
        <SidebarContent />
      </aside>

      {/* Main content */}
      <main className="flex-1 overflow-auto bg-slate-50 dark:bg-slate-900 min-h-screen lg:min-h-0">
        <div className="p-4 sm:p-6 lg:p-8 safe-bottom">
          {children}
        </div>
      </main>
    </div>
  );
}
