frontend/src/components/layout/Header.tsx

import { Bell, Zap } from 'lucide-react';
import { useAuthStore } from '@/store/authStore';

const agentStatusMap: Record<string, { label: string; color: string }> = {
  groq:   { label: 'Groq (Llama 3.1)', color: 'bg-green-500' },
  ollama: { label: 'Ollama (Local)',    color: 'bg-amber-500' },
};

export default function Header() {
  const { user } = useAuthStore();
  const llmProvider = (import.meta.env.VITE_LLM_PROVIDER as string) || 'groq';
  const providerStatus = agentStatusMap[llmProvider] ?? agentStatusMap.groq;

  return (
    <header className="flex items-center justify-between px-6 py-3 border-b border-dark-700 bg-dark-900/50 backdrop-blur-sm">
      {/* Left — breadcrumb / page title */}
      <div className="flex items-center gap-2">
        <h1 className="text-base font-semibold text-white">Chat</h1>
        <span className="text-dark-500">·</span>
        <span className="text-sm text-dark-400 capitalize">{user?.role} Access</span>
      </div>

      {/* Right — status indicators */}
      <div className="flex items-center gap-4">
        {/* LLM provider indicator */}
        <div className="flex items-center gap-2 px-3 py-1.5 rounded-full bg-dark-800 border border-dark-600">
          <Zap size={12} className="text-accent-green" />
          <div className={`w-1.5 h-1.5 rounded-full ${providerStatus.color} animate-pulse`} />
          <span className="text-xs text-dark-300 font-medium">{providerStatus.label}</span>
        </div>

        {/* Notification bell */}
        <button className="relative p-2 rounded-lg hover:bg-dark-700 text-dark-400 hover:text-white transition-colors">
          <Bell size={18} />
        </button>

        {/* User avatar */}
        <div className="w-8 h-8 rounded-full bg-gradient-to-br from-primary-400 to-accent-purple flex items-center justify-center text-xs font-bold text-white cursor-pointer">
          {user?.full_name?.charAt(0).toUpperCase() ?? 'U'}
        </div>
      </div>
    </header>
  );
}