import { useState } from 'react'
import { Link, Navigate } from 'react-router-dom'
import { Menu, LogOut, Home, User, Settings } from 'lucide-react'
import { create } from 'zustand'
import * as React from 'react'

interface AuthState {
  user: object | null
  isAuthenticated: boolean
  login: (token: string) => void
  logout: () => void
}

const useAuthStore = create<AuthState>((set) => ({
  user: null,
  isAuthenticated: false,
  login: (token: string) => {
    localStorage.setItem('token', token)
    set({ isAuthenticated: true })
  },
  logout: () => {
    localStorage.removeItem('token')
    set({ user: null, isAuthenticated: false })
  },
}))

const Dashboard: React.FC = (): JSX.Element => {
  const [sidebarOpen, setSidebarOpen] = useState<boolean>(false)
  const { isAuthenticated, logout } = useAuthStore()

  if (!isAuthenticated) {
    console.log(isAuthenticated)
    return <Navigate to="/login" />
  }

  return (
    <div className="flex h-screen bg-gray-100">
      {/* Sidebar */}
      <aside
        className={`bg-gray-800 text-white w-64 space-y-6 py-7 px-2 absolute inset-y-0 left-0 transform ${sidebarOpen ? 'translate-x-0' : '-translate-x-full'} transition duration-200 ease-in-out md:relative md:translate-x-0`}
      >
        <h1 className="text-2xl font-bold text-center">Dashboard</h1>
        <nav>
          <Link
            to="/home"
            className="flex items-center space-x-2 px-4 py-2 hover:bg-gray-700 rounded"
          >
            <Home size={20} />
            <span>Home</span>
          </Link>
          <Link
            to="/profile"
            className="flex items-center space-x-2 px-4 py-2 hover:bg-gray-700 rounded"
          >
            <User size={20} />
            <span>Perfil</span>
          </Link>
          <Link
            to="/settings"
            className="flex items-center space-x-2 px-4 py-2 hover:bg-gray-700 rounded"
          >
            <Settings size={20} />
            <span>Configurações</span>
          </Link>
          <button
            className="flex items-center space-x-2 px-4 py-2 w-full text-left hover:bg-red-600 rounded mt-5"
            onClick={logout}
          >
            <LogOut size={20} />
            <span>Sair</span>
          </button>
        </nav>
      </aside>

      {/* Main content */}
      <div className="flex-1 flex flex-col">
        {/* Header */}
        <header className="bg-white shadow-md p-4 flex justify-between items-center">
          <button
            onClick={() => setSidebarOpen(!sidebarOpen)}
            className="md:hidden"
          >
            <Menu size={24} />
          </button>
          <h2 className="text-xl font-semibold">Painel de Controle</h2>
        </header>

        {/* Conteúdo principal */}
        <main className="p-6 flex-1 overflow-auto">
          <h3 className="text-lg font-semibold mb-4">
            Bem-vindo ao Dashboard!
          </h3>
          <p>
            Aqui você pode gerenciar suas informações e visualizar os dados do
            sistema.
          </p>
        </main>
      </div>
    </div>
  )
}

export default Dashboard