import React, { useState } from 'react';
import { Link, useLocation, useNavigate } from 'react-router-dom';
import {
  HomeIcon,
  MapIcon,
  WrenchScrewdriverIcon,
  BeakerIcon,
  CalendarDaysIcon,
  ClockIcon,
  CloudIcon,
  UserIcon,
  Cog6ToothIcon,
  ArrowRightOnRectangleIcon,
  Bars3Icon,
  XMarkIcon,
  BellIcon,
} from '@heroicons/react/24/outline';
import {
  HomeIcon as HomeIconSolid,
  MapIcon as MapIconSolid,
  WrenchScrewdriverIcon as WrenchIconSolid,
  BeakerIcon as BeakerIconSolid,
  CalendarDaysIcon as CalendarIconSolid,
  ClockIcon as ClockIconSolid,
  CloudIcon as CloudIconSolid,
} from '@heroicons/react/24/solid';
import { GrassIconOutline, GrassIconSolid } from '../Icons/GrassIcon';

import { useAuth } from '../../hooks/useAuth';
import LoadingSpinner from '../UI/LoadingSpinner';

const Layout = ({ children }) => {
  const [sidebarOpen, setSidebarOpen] = useState(false);
  const { user, logout, isAdmin } = useAuth();
  const location = useLocation();
  const navigate = useNavigate();

  const navigation = [
    {
      name: 'Dashboard',
      href: '/dashboard',
      icon: HomeIcon,
      iconSolid: HomeIconSolid,
    },
    {
      name: 'Properties',
      href: '/properties',
      icon: MapIcon,
      iconSolid: MapIconSolid,
    },
    {
      name: 'Equipment',
      href: '/equipment',
      icon: WrenchScrewdriverIcon,
      iconSolid: WrenchIconSolid,
    },
    {
      name: 'Products',
      href: '/products',
      icon: BeakerIcon,
      iconSolid: BeakerIconSolid,
    },
    {
      name: 'Applications',
      href: '/applications',
      icon: CalendarDaysIcon,
      iconSolid: CalendarIconSolid,
    },
    {
      name: 'Watering',
      href: '/watering',
      icon: CloudIcon,
      iconSolid: CloudIconSolid,
    },
    {
      name: 'Mowing',
      href: '/mowing',
      icon: GrassIconOutline,
      iconSolid: GrassIconSolid,
    },
    {
      name: 'History',
      href: '/history',
      icon: ClockIcon,
      iconSolid: ClockIconSolid,
    },
    {
      name: 'Weather',
      href: '/weather',
      icon: CloudIcon,
      iconSolid: CloudIconSolid,
    },
    {
      name: 'Watering',
      href: '/watering',
      icon: CloudIcon,
      iconSolid: CloudIconSolid,
    },
  ];

  const adminNavigation = [
    {
      name: 'Admin Dashboard',
      href: '/admin',
      icon: Cog6ToothIcon,
    },
    {
      name: 'Manage Users',
      href: '/admin/users',
      icon: UserIcon,
    },
    {
      name: 'Manage Products',
      href: '/admin/products',
      icon: BeakerIcon,
    },
    {
      name: 'Manage Equipment',
      href: '/admin/equipment',
      icon: WrenchScrewdriverIcon,
    },
    {
      name: 'Manage Properties',
      href: '/admin/properties',
      icon: MapIcon,
    },
  ];

  const handleLogout = () => {
    logout();
    navigate('/login');
  };

  if (!user) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <LoadingSpinner size="lg" message="Loading..." />
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-gray-50">
      {/* Mobile sidebar */}
      <div className={`lg:hidden ${sidebarOpen ? 'relative z-40' : ''}`}>
        {sidebarOpen && (
          <>
            <div 
              className="fixed inset-0 bg-gray-600 bg-opacity-75"
              onClick={() => setSidebarOpen(false)}
            />
            <div className="fixed inset-y-0 left-0 flex w-64 flex-col bg-white shadow-xl">
              <div className="flex h-16 items-center justify-between px-6 border-b border-gray-200">
                <h1 className="text-xl font-bold text-primary-600">TurfTracker</h1>
                <button
                  type="button"
                  className="text-gray-400 hover:text-gray-600"
                  onClick={() => setSidebarOpen(false)}
                >
                  <XMarkIcon className="h-6 w-6" />
                </button>
              </div>
              
              <nav className="flex-1 space-y-1 px-4 py-6">
                {navigation.map((item) => {
                  const isActive = location.pathname === item.href || 
                    (item.href !== '/dashboard' && location.pathname.startsWith(item.href));
                  const Icon = isActive ? item.iconSolid : item.icon;
                  
                  return (
                    <Link
                      key={item.name}
                      to={item.href}
                      className={isActive ? 'nav-link-active' : 'nav-link-inactive'}
                      onClick={() => setSidebarOpen(false)}
                    >
                      <Icon className="h-5 w-5 mr-3" />
                      {item.name}
                    </Link>
                  );
                })}
                
                {isAdmin && (
                  <>
                    <div className="border-t border-gray-200 my-4" />
                    <div className="px-3 py-2">
                      <h3 className="text-xs font-semibold text-gray-500 uppercase tracking-wider">
                        Administration
                      </h3>
                    </div>
                    {adminNavigation.map((item) => {
                      const isActive = location.pathname === item.href;
                      return (
                        <Link
                          key={item.name}
                          to={item.href}
                          className={isActive ? 'nav-link-active' : 'nav-link-inactive'}
                          onClick={() => setSidebarOpen(false)}
                        >
                          <item.icon className="h-5 w-5 mr-3" />
                          {item.name}
                        </Link>
                      );
                    })}
                  </>
                )}
              </nav>
              
              <div className="border-t border-gray-200 p-4">
                <div className="flex items-center mb-4">
                  <div className="flex-shrink-0">
                    <div className="h-8 w-8 rounded-full bg-primary-600 flex items-center justify-center">
                      <span className="text-sm font-medium text-white">
                        {user.firstName?.[0]}{user.lastName?.[0]}
                      </span>
                    </div>
                  </div>
                  <div className="ml-3">
                    <p className="text-sm font-medium text-gray-900">
                      {user.firstName} {user.lastName}
                    </p>
                    <p className="text-xs text-gray-500">{user.email}</p>
                  </div>
                </div>
                
                <div className="space-y-1">
                  <Link
                    to="/profile"
                    className="nav-link-inactive"
                    onClick={() => setSidebarOpen(false)}
                  >
                    <UserIcon className="h-5 w-5 mr-3" />
                    Profile
                  </Link>
                  <button
                    onClick={handleLogout}
                    className="nav-link-inactive w-full text-left"
                  >
                    <ArrowRightOnRectangleIcon className="h-5 w-5 mr-3" />
                    Sign out
                  </button>
                </div>
              </div>
            </div>
          </>
        )}
      </div>

      {/* Desktop sidebar */}
      <div className="hidden lg:fixed lg:inset-y-0 lg:flex lg:w-64 lg:flex-col">
        <div className="flex min-h-0 flex-1 flex-col bg-white border-r border-gray-200">
          <div className="flex h-16 items-center px-6 border-b border-gray-200">
            <h1 className="text-xl font-bold text-primary-600">TurfTracker</h1>
          </div>
          
          <nav className="flex-1 space-y-1 px-4 py-6">
            {navigation.map((item) => {
              const isActive = location.pathname === item.href || 
                (item.href !== '/dashboard' && location.pathname.startsWith(item.href));
              const Icon = isActive ? item.iconSolid : item.icon;
              
              return (
                <Link
                  key={item.name}
                  to={item.href}
                  className={isActive ? 'nav-link-active' : 'nav-link-inactive'}
                >
                  <Icon className="h-5 w-5 mr-3" />
                  {item.name}
                </Link>
              );
            })}
            
            {isAdmin && (
              <>
                <div className="border-t border-gray-200 my-4" />
                <div className="px-3 py-2">
                  <h3 className="text-xs font-semibold text-gray-500 uppercase tracking-wider">
                    Administration
                  </h3>
                </div>
                {adminNavigation.map((item) => {
                  const isActive = location.pathname === item.href;
                  return (
                    <Link
                      key={item.name}
                      to={item.href}
                      className={isActive ? 'nav-link-active' : 'nav-link-inactive'}
                    >
                      <item.icon className="h-5 w-5 mr-3" />
                      {item.name}
                    </Link>
                  );
                })}
              </>
            )}
          </nav>
          
          <div className="border-t border-gray-200 p-4">
            <div className="flex items-center mb-4">
              <div className="flex-shrink-0">
                <div className="h-8 w-8 rounded-full bg-primary-600 flex items-center justify-center">
                  <span className="text-sm font-medium text-white">
                    {user.firstName?.[0]}{user.lastName?.[0]}
                  </span>
                </div>
              </div>
              <div className="ml-3">
                <p className="text-sm font-medium text-gray-900">
                  {user.firstName} {user.lastName}
                </p>
                <p className="text-xs text-gray-500">{user.email}</p>
              </div>
            </div>
            
            <div className="space-y-1">
              <Link to="/profile" className="nav-link-inactive">
                <UserIcon className="h-5 w-5 mr-3" />
                Profile
              </Link>
              <button
                onClick={handleLogout}
                className="nav-link-inactive w-full text-left"
              >
                <ArrowRightOnRectangleIcon className="h-5 w-5 mr-3" />
                Sign out
              </button>
            </div>
          </div>
        </div>
      </div>

      {/* Main content */}
      <div className="lg:pl-64">
        {/* Top bar */}
        <div className="sticky top-0 z-10 bg-white border-b border-gray-200 lg:hidden">
          <div className="flex h-16 items-center justify-between px-4">
            <button
              type="button"
              className="text-gray-500 hover:text-gray-600"
              onClick={() => setSidebarOpen(true)}
            >
              <Bars3Icon className="h-6 w-6" />
            </button>
            
            <h1 className="text-lg font-semibold text-gray-900">TurfTracker</h1>
            
            <div className="flex items-center space-x-4">
              <button className="text-gray-400 hover:text-gray-500">
                <BellIcon className="h-6 w-6" />
              </button>
              <div className="h-6 w-6 rounded-full bg-primary-600 flex items-center justify-center">
                <span className="text-xs font-medium text-white">
                  {user.firstName?.[0]}
                </span>
              </div>
            </div>
          </div>
        </div>

        {/* Page content */}
        <main className="min-h-screen">
          {children}
        </main>
      </div>
    </div>
  );
};

export default Layout;