import { Cloud, Github, Home, LogOut, Settings, Sparkles, Terminal } from 'lucide-react'
import { NavLink, Outlet, useNavigate } from 'react-router-dom'
import { TerminalLogs } from '../components/TerminalLogs'
import { useAuth } from '../contexts/Auth'

const navItems = [
  { label: 'Overview', to: '/', icon: Home },
  { label: 'Hello World', to: '/hello', icon: Sparkles },
  { label: 'GitHub Repos', to: '/github', icon: Github },
  { label: 'Cloudflare Zones', to: '/cloudflare', icon: Cloud },
  { label: 'Settings', to: '/settings', icon: Settings },
]

const activeClass =
  'flex items-center gap-2 rounded-md bg-slate-800/80 px-3 py-2 text-slate-50 shadow-inner shadow-slate-950 border border-slate-700'
const baseClass =
  'flex items-center gap-2 rounded-md px-3 py-2 text-slate-300 hover:bg-slate-800/50 transition-colors duration-150 border border-transparent'

export default function DashboardLayout() {
  const { user, logout } = useAuth()
  const navigate = useNavigate()

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

  return (
    <div className="flex min-h-screen bg-slate-950 text-slate-100">
      <aside className="fixed left-0 top-0 flex h-full w-64 flex-col border-r border-slate-800 bg-slate-900/90 px-4 py-4 shadow-2xl shadow-slate-950/80">
        <div className="mb-4 border-b border-slate-800 pb-3">
          <p className="text-[10px] uppercase tracking-[0.35em] text-cyan-400">DevOps</p>
          <h1 className="text-lg font-semibold text-slate-50">Dashboard</h1>
          <p className="text-xs text-slate-400">VSCode-like dense sidebar</p>
        </div>

        <nav className="flex-1 space-y-1 text-sm">
          {navItems.map((item) => (
            <NavLink
              key={item.to}
              to={item.to}
              end={item.to === '/'}
              className={({ isActive }) => (isActive ? activeClass : baseClass)}
            >
              <item.icon size={16} />
              <span className="text-sm">{item.label}</span>
            </NavLink>
          ))}
        </nav>

        <div className="mt-auto space-y-2 border-t border-slate-800 pt-3 text-sm text-slate-300">
          <p className="flex items-center justify-between text-xs text-slate-500">
            <span className="truncate">{user?.email}</span>
            <Terminal size={14} className="text-cyan-300" />
          </p>
          <button
            type="button"
            onClick={handleLogout}
            className="flex w-full items-center gap-2 rounded-md px-3 py-2 text-left text-slate-300 transition hover:bg-red-500/10 hover:text-red-200"
          >
            <LogOut size={16} />
            Sair
          </button>
        </div>
      </aside>

      <div className="ml-64 flex min-h-screen flex-1 flex-col">
        <header className="flex items-center justify-between border-b border-slate-800 bg-slate-900/70 px-6 py-3 backdrop-blur">
          <div>
            <p className="text-[10px] uppercase tracking-[0.28em] text-cyan-300">Painel de Controle</p>
            <h2 className="text-xl font-semibold text-slate-50">DevOps Orchestration</h2>
          </div>
          <div className="flex items-center gap-2 rounded-lg bg-slate-800/70 px-3 py-1 text-xs text-slate-300 shadow-inner shadow-slate-950">
            <span className="rounded bg-emerald-500/20 px-2 py-0.5 text-emerald-300">Online</span>
            <span className="text-cyan-200">{user?.name || user?.email}</span>
          </div>
        </header>

        <main className="flex-1 overflow-y-auto bg-slate-900/40 px-8 py-6">
          <Outlet />
        </main>

        <TerminalLogs />
      </div>
    </div>
  )
}