'use client';

import React, { useEffect, useState } from 'react';
import Link from 'next/link';
import { useRouter, usePathname } from 'next/navigation';
import { LogOut, ShieldCheck } from 'lucide-react';
import { getCurrentUser, clearTokens, apiRequest } from '../lib/api';
import { Badge } from './Badge';

export const Navbar: React.FC = () => {
  const router = useRouter();
  const pathname = usePathname();
  const [user, setUser] = useState<any>(null);

  useEffect(() => setUser(getCurrentUser()), []);

  const handleLogout = async () => {
    try { await apiRequest('/auth/logout', { method: 'POST', body: '{}' }); } catch {}
    clearTokens();
    router.push('/ops/login');
  };

  return (
    <header className="admin-topbar">
      <div className="flex min-w-0 items-center gap-4">
        <Link href="/admin" className="admin-brand">
          <span className="admin-brand-mark"><img src="/my11s-logo.png" alt="MY11s" /></span>
          <span className="hidden sm:block">
            <span className="block text-[15px] font-black tracking-tight text-white">MY11s</span>
            <span className="block text-[8px] font-bold uppercase tracking-[0.2em] text-zinc-500">Skill behind the game</span>
          </span>
        </Link>
        <div className="hidden lg:flex items-center gap-2 border-l border-white/10 pl-4">
          <span className="topbar-pill"><ShieldCheck className="h-3.5 w-3.5" /> Secure Admin</span>
          <Link href="/admin" className={`topbar-switch ${pathname.startsWith('/admin') ? 'active' : ''}`}>Admin Panel</Link>
          {user?.role === 'SUPER_ADMIN' && <Link href="/scorer" className="topbar-switch">Scorer Panel</Link>}
        </div>
      </div>
      {user && (
        <div className="flex items-center gap-3">
          <div className="hidden sm:block text-right">
            <div className="text-xs font-bold text-white">{user.name || 'Administrator'}</div>
            <div className="text-[10px] font-mono text-zinc-500">{user.phone || ''}</div>
          </div>
          <Badge variant={user.role === 'SUPER_ADMIN' ? 'live' : 'slate'}>{user.role}</Badge>
          <button onClick={handleLogout} className="admin-icon-btn" title="Logout"><LogOut className="h-4 w-4" /></button>
        </div>
      )}
    </header>
  );
};