"use client"

import { ChevronDown } from "lucide-react"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import type { Agent } from "@/lib/types"

interface HeaderProps {
  agent: Agent | null
  agents: Agent[]
  onAgentSelected: (agent: Agent) => void
  isLoadingAgents: boolean
}

export function Header({ agent, agents, onAgentSelected, isLoadingAgents }: HeaderProps) {
  const canSelect = agents.length > 0 && !isLoadingAgents
  const showDropdown = !agent

  return (
    <header className="sticky top-0 z-40 mx-auto w-full max-w-6xl px-4 pt-4 sm:px-6">
      <div className="mx-auto flex max-w-5xl flex-col gap-3 text-white">
        <div className="space-y-1">
          <p className="text-[0.6rem] uppercase tracking-[0.5em] text-white/45">
            {agent ? "Current correspondent" : "Select a correspondent"}
          </p>
          <h1 className="font-heading text-3xl text-white">
            {agent ? agent.name : "Inspiration Repo"}
          </h1>
        </div>

        {showDropdown && (
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <button
                type="button"
                className="inline-flex w-full items-center justify-between rounded-2xl border border-white/20 bg-white/10 px-4 py-3 text-left text-[0.65rem] uppercase tracking-[0.35em] text-white/80 shadow-[0_12px_25px_rgba(0,0,0,0.35)] backdrop-blur-md transition hover:bg-white/20 disabled:opacity-45"
                disabled={!canSelect}
              >
                <span className="flex flex-col text-sm normal-case tracking-normal text-white">
                  Select correspondent
                </span>
                <ChevronDown className="h-4 w-4 text-white/80" />
              </button>
            </DropdownMenuTrigger>
            <DropdownMenuContent
              align="start"
              className="min-w-[260px] rounded-3xl border border-white/20 bg-black/75 p-2 text-white shadow-[0_20px_45px_rgba(0,0,0,0.45)] backdrop-blur"
            >
              {isLoadingAgents ? (
                <DropdownMenuItem disabled className="text-white/50">
                  Gathering correspondents…
                </DropdownMenuItem>
              ) : agents.length === 0 ? (
                <DropdownMenuItem disabled className="text-white/50">
                  No agents configured
                </DropdownMenuItem>
              ) : (
                agents.map((entry) => (
                  <DropdownMenuItem
                    key={entry.id}
                    onClick={() => onAgentSelected(entry)}
                    className="flex w-full flex-col items-start gap-1 rounded-2xl border border-transparent px-4 py-3 text-left text-xs text-white/70 transition hover:border-white/15 hover:bg-white/5 hover:text-white"
                  >
                    <span className="font-heading text-base">{entry.name}</span>
                    <span className="text-[0.6rem] uppercase tracking-[0.35em] text-white/60">
                      {entry.description}
                    </span>
                  </DropdownMenuItem>
                ))
              )}
            </DropdownMenuContent>
          </DropdownMenu>
        )}
      </div>
    </header>
  )
}
