import { KeyRound, CheckCircle2, XCircle, Menu } from "lucide-react";
import { useApiKey } from "../context/ApiKeyContext";
import { Link } from "react-router-dom";

export default function TopBar({ onMenuClick }: { onMenuClick?: () => void }) {
  const { apiKeys, activeKeyId, setActiveKeyId, activeKey } = useApiKey();

  return (
    <header className="h-16 border-b border-white/5 bg-zinc-950/40 backdrop-blur-xl flex items-center justify-between px-4 md:px-6 shrink-0 relative z-20 shadow-[0_4px_24px_-4px_rgba(0,0,0,0.5)]">
      <div className="flex items-center gap-4">
        {onMenuClick && (
          <button 
            onClick={onMenuClick}
            className="p-2 -ml-2 text-zinc-400 hover:text-zinc-200 md:hidden"
            aria-label="Open menu"
          >
            <Menu className="w-5 h-5" />
          </button>
        )}
      </div>

      <div className="flex items-center gap-2 md:gap-4">
        <div className="flex items-center gap-2 hidden sm:flex">
          {activeKey ? (
            <div className="flex items-center gap-1.5 text-[11px] font-medium text-emerald-300 bg-emerald-500/10 border border-emerald-500/20 px-2.5 py-1 rounded-full shadow-[inset_0_1px_1px_rgba(255,255,255,0.05)]">
              <CheckCircle2 className="w-3.5 h-3.5" />
              API Connected
            </div>
          ) : (
            <div className="flex items-center gap-1.5 text-[11px] font-medium text-rose-300 bg-rose-500/10 border border-rose-500/20 px-2.5 py-1 rounded-full shadow-[inset_0_1px_1px_rgba(255,255,255,0.05)]">
              <XCircle className="w-3.5 h-3.5" />
              API Key Missing
            </div>
          )}
        </div>

        <div className="h-5 w-px bg-white/10" />

        <div className="flex items-center gap-3">
          <div className="w-6 h-6 rounded-full bg-white/5 border border-white/10 flex items-center justify-center shadow-[inset_0_1px_1px_rgba(255,255,255,0.05)]">
            <KeyRound className="w-3.5 h-3.5 text-zinc-400" />
          </div>
          <select
            value={activeKeyId || ""}
            onChange={(e) => setActiveKeyId(e.target.value)}
            className="bg-white/5 border border-white/10 rounded-md py-1.5 pl-3 pr-8 text-xs text-zinc-200 focus:outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 w-32 md:w-48 shadow-[inset_0_1px_1px_rgba(255,255,255,0.05)] transition-all hover:bg-white/10"
          >
            <option value="" disabled className="bg-zinc-900">Select API Key...</option>
            {apiKeys.map((key) => (
              <option key={key.id} value={key.id} className="bg-zinc-900">
                {key.name}
              </option>
            ))}
          </select>
          {apiKeys.length === 0 && (
            <Link to="/settings" className="text-xs text-indigo-400 hover:text-indigo-300 font-medium">
              Add Key
            </Link>
          )}
        </div>
      </div>
    </header>
  );
}