"use client";

import Link from "next/link";
import { ChevronRight, WifiOff } from "lucide-react";
import type { RefObject } from "react";
import type { SearchResultItem as SearchResultItemType } from "@/lib/search/types";
import { SearchResultItem } from "./SearchResultItem";
import { SearchLoadingState } from "./SearchLoadingState";
import { SearchEmptyState } from "./SearchEmptyState";
import { SearchMinCharsHint } from "./SearchMinCharsHint";

interface SearchResultsPanelProps {
  results: SearchResultItemType[];
  isLoading: boolean;
  isStalled: boolean;
  isEmpty: boolean;
  query: string;
  selectedIndex: number;
  onItemSelect: (item: SearchResultItemType) => void;
  onItemHover: (index: number) => void;
  showMinCharsHint: boolean;
  panelRef: RefObject<HTMLDivElement>;
}

export function SearchResultsPanel({
  results,
  isLoading,
  isStalled,
  isEmpty,
  query,
  selectedIndex,
  onItemSelect,
  onItemHover,
  showMinCharsHint,
  panelRef,
}: SearchResultsPanelProps) {
  return (
    <div
      ref={panelRef}
      id="search-results-panel"
      role="listbox"
      aria-label="Search results"
      className="motion-safe:animate-in motion-safe:fade-in motion-safe:slide-in-from-top-2 absolute top-full left-0 right-0 z-50 mt-1 overflow-hidden rounded-xl border border-[#d9e8e7] bg-white shadow-xl duration-150 max-h-[60vh] overflow-y-auto md:max-h-[400px]"
    >
      {/* 6.2.3 — Screen reader live region announces result count changes */}
      <div className="sr-only" aria-live="polite" aria-atomic="true">
        {isEmpty
          ? `No results found for ${query}`
          : results.length > 0
            ? `${results.length} results found`
            : ""}
      </div>

      {showMinCharsHint ? (
        <SearchMinCharsHint />
      ) : isStalled ? (
        // 6.1.6 — Loading has been in-flight for > 5s; surface a subtle error
        <div className="flex flex-col items-center py-8 px-4 text-center">
          <WifiOff className="mb-3 h-7 w-7 text-[#8aa9a8]" aria-hidden="true" />
          <p className="text-sm font-medium text-[#3d5554]">
            Search is taking longer than expected
          </p>
          <p className="mt-1 text-xs text-[#8aa9a8]">
            Check your connection or try again in a moment
          </p>
        </div>
      ) : isLoading ? (
        <SearchLoadingState />
      ) : isEmpty ? (
        <SearchEmptyState query={query} />
      ) : (
        <>
          <div>
            {results.map((item, index) => (
              <SearchResultItem
                key={item._id}
                item={item}
                index={index}
                isSelected={index === selectedIndex}
                onSelect={() => onItemSelect(item)}
                onMouseEnter={() => onItemHover(index)}
              />
            ))}
          </div>

          <div className="border-t border-[#d9e8e7] px-3 py-2">
            <Link
              href={`/shop?search=${encodeURIComponent(query)}`}
              className="flex items-center justify-center gap-1 text-sm font-medium text-[#38a99f] hover:text-[#236f6b] transition-colors"
            >
              View all results
              <ChevronRight className="h-4 w-4" aria-hidden="true" />
            </Link>
          </div>
        </>
      )}
    </div>
  );
}
