'use client';

import { useState } from 'react';
import { useRouter } from 'next/navigation';
import Link from 'next/link';
import { useStore } from '@/lib/store';
import { authApi } from '@/lib/api';
import { Bell, User, LogOut, ChevronDown, Settings } from 'lucide-react';
import JobTracker from './JobTracker';

export default function Header() {
  const router = useRouter();
  const { user, logout } = useStore();
  const [showUserMenu, setShowUserMenu] = useState(false);

  const handleLogout = async () => {
    try {
      await authApi.logout();
    } catch (err) {
      // Ignore errors
    }
    logout();
    setShowUserMenu(false);
    router.push('/login');
  };

  return (
    <header className="h-16 bg-forge-dark border-b border-gray-800 flex items-center justify-between px-6">
      {/* Breadcrumb / Title area */}
      <div>
        <h1 className="text-lg font-semibold text-white">Welcome to FORGE AI</h1>
        <p className="text-sm text-gray-500">Creative tools powered by AI to forge your AI skills</p>
      </div>

      {/* Right side */}
      <div className="flex items-center gap-4">
        {/* Job Tracker */}
        <JobTracker />

        {/* Notifications */}
        <button className="relative p-2 text-gray-400 hover:text-white transition-colors">
          <Bell className="w-5 h-5" />
        </button>

        {/* User Menu */}
        <div className="relative">
          <button
            onClick={() => setShowUserMenu(!showUserMenu)}
            className="flex items-center gap-2 p-2 rounded-lg hover:bg-forge-gray transition-colors"
          >
            <div className="w-8 h-8 bg-forge-gray-light rounded-full flex items-center justify-center">
              {user?.avatar_url ? (
                <img
                  src={user.avatar_url}
                  alt={user.name}
                  className="w-8 h-8 rounded-full"
                />
              ) : (
                <User className="w-4 h-4 text-gray-400" />
              )}
            </div>
            <span className="text-sm text-gray-300">{user?.name || 'Test User'}</span>
            <ChevronDown className="w-4 h-4 text-gray-500" />
          </button>

          {showUserMenu && (
            <>
              <div
                className="fixed inset-0 z-10"
                onClick={() => setShowUserMenu(false)}
              />
              <div className="absolute right-0 top-full mt-2 w-48 bg-forge-gray border border-gray-700 rounded-lg shadow-xl z-20">
                <div className="p-3 border-b border-gray-700">
                  <p className="text-sm font-medium text-white">{user?.name || 'User'}</p>
                  <p className="text-xs text-gray-500">{user?.email || ''}</p>
                </div>
                <Link
                  href="/settings"
                  onClick={() => setShowUserMenu(false)}
                  className="w-full flex items-center gap-2 px-3 py-2 text-sm text-gray-300 hover:bg-forge-dark transition-colors"
                >
                  <Settings className="w-4 h-4" />
                  Settings
                </Link>
                <button
                  onClick={handleLogout}
                  className="w-full flex items-center gap-2 px-3 py-2 text-sm text-red-400 hover:bg-forge-dark transition-colors"
                >
                  <LogOut className="w-4 h-4" />
                  Sign out
                </button>
              </div>
            </>
          )}
        </div>
      </div>
    </header>
  );
}