"use client"

import * as React from "react"
import { Sparkles, MessageSquare, Search } from "lucide-react"

interface ModeButton { id: string; text: string; active?: boolean }
interface QueryMeta {
  statusText: string
  matchCountText: string
  reportsText: string
  duration: string
}

interface QueryHeaderData {
  echoLabel: string
  queryEcho: string
  meta: QueryMeta
  modeButtons: ModeButton[]
}

export function IQSearchQueryBand({
  data,
  queryOverride,
}: {
  data: QueryHeaderData
  queryOverride?: string
}) {
  const [activeMode, setActiveMode] = React.useState(0)
  const displayQuery = queryOverride || data.queryEcho

  return (
    <div className="bg-navy relative overflow-hidden">
      {/* Dot pattern */}
      <div className="absolute inset-0 bg-[radial-gradient(circle,rgba(255,255,255,.05)_1px,transparent_1px)] bg-[size:26px_26px]" />

      <div className="relative max-w-[1280px] mx-auto px-7 py-5.5 pb-6">
        <div className="flex items-start justify-between gap-6 flex-wrap">
          {/* Query echo */}
          <div className="min-w-[280px] flex-1">
            <div className="flex items-center gap-2 text-[11px] text-white/50 mb-2">
              <MessageSquare className="size-3.5 text-accent-gold" />
              {data.echoLabel}
            </div>
            <h1 className="font-display font-normal text-[27px] leading-[1.2] tracking-[-0.3px] text-white m-0">
              &ldquo;{displayQuery}&rdquo;
            </h1>
          </div>

          {/* Mode toggle */}
          <div className="flex gap-1 bg-white/8 border border-white/14 rounded-[7px] p-1 shrink-0">
            {data.modeButtons.map((btn, i) => (
              <button
                key={btn.id}
                onClick={() => setActiveMode(i)}
                className={`flex items-center gap-1.5 text-[13px] font-semibold px-4 py-2.5 rounded-[5px] cursor-pointer border-none transition-all duration-150 ${
                  activeMode === i
                    ? "bg-gold text-ink"
                    : "bg-transparent text-white/70 hover:text-white"
                }`}
              >
                {i === 0 ? <Sparkles className="size-4" /> : <Search className="size-4" />}
                {btn.text}
              </button>
            ))}
          </div>
        </div>

        {/* Meta strip */}
        <div className="flex items-center gap-4 mt-4 text-[12px] text-white/55 flex-wrap">
          <span className="flex items-center gap-1.5 text-[#7FD0A3] font-semibold">
            <span className="w-[7px] h-[7px] rounded-full bg-[#3FB97D] animate-pulse shrink-0" />
            {data.meta.statusText}
          </span>
          <span className="w-[3px] h-[3px] rounded-full bg-white/30" />
          <span>
            <strong className="text-white">{data.meta.matchCountText.split(" ")[0]}</strong>{" "}
            {data.meta.matchCountText.split(" ").slice(1).join(" ")}
          </span>
          <span className="w-[3px] h-[3px] rounded-full bg-white/30" />
          <span>{data.meta.reportsText}</span>
          <span className="w-[3px] h-[3px] rounded-full bg-white/30" />
          <span>{data.meta.duration}</span>
        </div>
      </div>
    </div>
  )
}