import { useState } from 'react';
import { Link, useLocation } from 'react-router-dom';
import { X, LogOut } from 'lucide-react';
import { clsx } from 'clsx';
import { useAuth } from '../contexts/AuthContext';

function Sidebar({ navigation, isOnline }) {
  const [sidebarOpen, setSidebarOpen] = useState(false);
  const location = useLocation();
  const auth = useAuth();
  const { logout, user } = auth || {};

  return (
    <>
      {/* Mobile sidebar */}
      <div className={clsx(
        'fixed inset-0 z-50 lg:hidden',
        sidebarOpen ? 'block' : 'hidden'
      )}>
        <div className="fixed inset-0 bg-gray-900/80" onClick={() => setSidebarOpen(false)} />
        
        <div className="fixed inset-y-0 left-0 z-50 w-72 bg-white">
          <div className="flex h-full flex-col gap-y-5 overflow-y-auto px-6 py-4">
            <div className="flex h-16 shrink-0 items-center">
              <h1 className="text-xl font-semibold text-gray-900">
                Personal Internet Cell
              </h1>
              <button
                type="button"
                className="ml-auto"
                onClick={() => setSidebarOpen(false)}
              >
                <X className="h-6 w-6" />
              </button>
            </div>
            <nav className="flex flex-1 flex-col">
              <ul role="list" className="flex flex-1 flex-col gap-y-7">
                <li>
                  <ul role="list" className="-mx-2 space-y-1">
                    {navigation.map((item) => (
                      <li key={item.name}>
                        <Link
                          to={item.href}
                          className={clsx(
                            location.pathname === item.href
                              ? 'bg-primary-50 text-primary-600'
                              : 'text-gray-700 hover:text-primary-600 hover:bg-primary-50',
                            'group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold'
                          )}
                          onClick={() => setSidebarOpen(false)}
                        >
                          <item.icon
                            className={clsx(
                              location.pathname === item.href ? 'text-primary-600' : 'text-gray-400 group-hover:text-primary-600',
                              'h-6 w-6 shrink-0'
                            )}
                            aria-hidden="true"
                          />
                          {item.name}
                        </Link>
                      </li>
                    ))}
                  </ul>
                </li>
                <li className="mt-auto">
                  {logout && (
                    <button
                      onClick={logout}
                      className="flex items-center gap-2 text-sm text-gray-600 hover:text-gray-900 transition-colors w-full"
                    >
                      <LogOut className="h-4 w-4" />
                      Sign out{user ? ` (${user.username})` : ''}
                    </button>
                  )}
                </li>
              </ul>
            </nav>
          </div>
        </div>
      </div>

      {/* Desktop sidebar */}
      <div className="hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-72 lg:flex-col">
        <div className="flex grow flex-col gap-y-5 overflow-y-auto border-r border-gray-200 bg-white px-6 pb-4">
          <div className="flex h-16 shrink-0 items-center">
            <h1 className="text-xl font-semibold text-gray-900">
              Personal Internet Cell
            </h1>
          </div>
          <nav className="flex flex-1 flex-col">
            <ul role="list" className="flex flex-1 flex-col gap-y-7">
              <li>
                <ul role="list" className="-mx-2 space-y-1">
                  {navigation.map((item) => (
                    <li key={item.name}>
                      <Link
                        to={item.href}
                        className={clsx(
                          location.pathname === item.href
                            ? 'bg-primary-50 text-primary-600'
                            : 'text-gray-700 hover:text-primary-600 hover:bg-primary-50',
                          'group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold'
                        )}
                      >
                        <item.icon
                          className={clsx(
                            location.pathname === item.href ? 'text-primary-600' : 'text-gray-400 group-hover:text-primary-600',
                            'h-6 w-6 shrink-0'
                          )}
                          aria-hidden="true"
                        />
                        {item.name}
                      </Link>
                    </li>
                  ))}
                </ul>
              </li>
              <li className="mt-auto">
                <div className="flex items-center justify-between gap-x-2">
                  <div className="flex items-center gap-x-2">
                    <div className={clsx(
                      'h-2 w-2 rounded-full',
                      isOnline ? 'bg-success-500' : 'bg-danger-500'
                    )} />
                    <span className="text-xs text-gray-500">
                      {isOnline ? 'Connected' : 'Disconnected'}
                    </span>
                  </div>
                  {logout && (
                    <button
                      onClick={logout}
                      className="flex items-center gap-1 text-xs text-gray-500 hover:text-gray-700 transition-colors"
                      title="Sign out"
                    >
                      <LogOut className="h-3.5 w-3.5" />
                      Sign out
                    </button>
                  )}
                </div>
                {user && (
                  <p className="text-xs text-gray-400 mt-1 truncate">{user.username}</p>
                )}
              </li>
            </ul>
          </nav>
        </div>
      </div>

      {/* Mobile menu button */}
      <div className="sticky top-0 z-40 flex items-center gap-x-6 bg-white px-4 py-4 shadow-sm sm:px-6 lg:hidden">
        <button
          type="button"
          className="-m-2.5 p-2.5 text-gray-700 lg:hidden"
          onClick={() => setSidebarOpen(true)}
        >
          <span className="sr-only">Open sidebar</span>
          <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor">
            <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
          </svg>
        </button>
        <div className="flex-1 text-sm font-semibold leading-6 text-gray-900">
          Personal Internet Cell
        </div>
        <div className="flex items-center gap-x-2">
          <div className={clsx(
            'h-2 w-2 rounded-full',
            isOnline ? 'bg-success-500' : 'bg-danger-500'
          )} />
          <span className="text-xs text-gray-500">
            {isOnline ? 'Connected' : 'Disconnected'}
          </span>
        </div>
      </div>
    </>
  );
}

export default Sidebar;