import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from '@radix-ui/react-icons'

import { useState } from 'react'

export function AdminSidebar() {
  const [isOpen, setIsOpen] = useState(false)
  const [isCollapsed, setIsCollapsed] = useState(false)
  const [expandedSchemas, setExpandedSchemas] = useState<Record<string, boolean>>({
    Data: true,
    PXL: true,
    Advanced: true,
  })

  const toggleSchema = (schema: string) => {
    setExpandedSchemas((prev) => ({
      ...prev,
      [schema]: !prev[schema],
    }))
  }

  return (
    <>
      {/* Mobile toggle button */}
      <button
        onClick={() => setIsOpen(!isOpen)}
        className="fixed top-4 left-4 z-50 md:hidden p-2 bg-white dark:bg-gray-900 rounded shadow-lg border border-gray-200 dark:border-gray-700"
        aria-label="Toggle admin menu"
      >
        {isOpen ? <ChevronDownIcon className="w-6 h-6" /> : <ChevronRightIcon className="w-6 h-6" />}
      </button>

      {/* Sidebar */}
      <aside
        className={`
          fixed md:sticky top-0 left-0 h-screen bg-white dark:bg-gray-900 border-r border-gray-200 dark:border-gray-700
          overflow-y-auto transition-all duration-300 z-40
          ${isOpen ? 'translate-x-0' : '-translate-x-full md:translate-x-0'}
          ${isCollapsed ? 'w-16  min-w-16' : 'w-64 min-w-64'}
        `}
      >
        <div className="p-4">
          <div className="flex items-center justify-between mb-4">
            {!isCollapsed && (
              <a
                href="/admin"
                className="text-lg font-bold hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
              >
                Admin
              </a>
            )}
            <button
              onClick={() => setIsCollapsed(!isCollapsed)}
              className="hidden md:block p-1 hover:bg-gray-100 dark:hover:bg-gray-800 rounded transition-colors ml-auto"
              aria-label={isCollapsed ? 'Expand sidebar' : 'Collapse sidebar'}
            >
              {isCollapsed ? <ChevronRightIcon className="w-5 h-5" /> : <ChevronLeftIcon className="w-5 h-5" />}
            </button>
          </div>
          {!isCollapsed && (
            <nav>
              <div key="Data" className="mb-4">
                <button
                  onClick={() => toggleSchema('Data')}
                  className="flex items-center justify-between w-full px-4 py-2 font-semibold text-left hover:bg-gray-100 dark:hover:bg-gray-800 rounded transition-colors"
                >
                  <span>Data</span>
                  {expandedSchemas['Data'] ? (
                    <ChevronDownIcon className="w-4 h-4" />
                  ) : (
                    <ChevronRightIcon className="w-4 h-4" />
                  )}
                </button>
                {expandedSchemas['Data'] && (
                  <ul className="mt-2 ml-2 space-y-1">
                    <li key="Country">
                      <a
                        href="/admin/countries"
                        className="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded transition-colors"
                      >
                        Country
                      </a>
                    </li>
                    <li key="Post">
                      <a
                        href="/admin/posts"
                        className="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded transition-colors"
                      >
                        Post
                      </a>
                    </li>
                    <li key="Publication">
                      <a
                        href="/admin/publications"
                        className="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded transition-colors"
                      >
                        Publication
                      </a>
                    </li>
                    <li key="ViewStatistic">
                      <Link
                        href="/admin/viewStatistics"
                        className="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded transition-colors"
                      >
                        ViewStatistic
                      </Link>
                    </li>
                  </ul>
                )}
              </div>
              <div key="PXL" className="mb-4">
                <button
                  onClick={() => toggleSchema('PXL')}
                  className="flex items-center justify-between w-full px-4 py-2 font-semibold text-left hover:bg-gray-100 dark:hover:bg-gray-800 rounded transition-colors"
                >
                  <span>PXL</span>
                  {expandedSchemas['PXL'] ? (
                    <ChevronDownIcon className="w-4 h-4" />
                  ) : (
                    <ChevronRightIcon className="w-4 h-4" />
                  )}
                </button>
                {expandedSchemas['PXL'] && (
                  <ul className="mt-2 ml-2 space-y-1">
                    <li key="Action">
                      <a
                        href="/admin/actions"
                        className="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded transition-colors"
                      >
                        Action
                      </a>
                    </li>
                    <li key="ActionOperation">
                      <a
                        href="/admin/actionOperations"
                        className="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded transition-colors"
                      >
                        ActionOperation
                      </a>
                    </li>
                    <li key="File">
                      <a
                        href="/admin/files"
                        className="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded transition-colors"
                      >
                        File
                      </a>
                    </li>
                    <li key="User">
                      <a
                        href="/admin/users"
                        className="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded transition-colors"
                      >
                        User
                      </a>
                    </li>
                  </ul>
                )}
              </div>
              {process.env.NEXT_PUBLIC_ALLOW_ADMIN === 'true' && (
                <div key="Advanced" className="mb-4">
                  <button
                    onClick={() => toggleSchema('Advanced')}
                    className="flex items-center justify-between w-full px-4 py-2 font-semibold text-left hover:bg-gray-100 dark:hover:bg-gray-800 rounded transition-colors"
                  >
                    <span>Advanced</span>
                    {expandedSchemas['Advanced'] ? (
                      <ChevronDownIcon className="w-4 h-4" />
                    ) : (
                      <ChevronRightIcon className="w-4 h-4" />
                    )}
                  </button>
                  {expandedSchemas['Advanced'] && (
                    <ul className="mt-2 ml-2 space-y-1">
                      <li key="DataManagement">
                        <Link
                          href="/admin/data-management"
                          className="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded transition-colors"
                        >
                          Data Management
                        </Link>
                      </li>
                    </ul>
                  )}
                </div>
              )}
            </nav>
          )}
        </div>
      </aside>

      {/* Overlay for mobile */}
      {isOpen && <div className="fixed inset-0 bg-black/20 z-30 md:hidden" onClick={() => setIsOpen(false)} />}
    </>
  )
}
