import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from '@/components/ui/input-group';
import { useApiSWR } from '@/hooks/useSWR';
import { TMarket, TMarketCategory } from '@/types/market.types';
import { getImageUrl } from '@/utils/getImageUrl';
import { router } from '@inertiajs/react';
import {
  BookmarkSimpleIcon,
  ClockIcon,
  MagnifyingGlassIcon,
  SparkleIcon,
  StorefrontIcon,
  TrendUpIcon,
} from '@phosphor-icons/react';
import { useEffect, useRef, useState } from 'react';
import { useTranslation } from 'react-i18next';

const STATUS_COLOR: Record<TMarket['status'], string> = {
  open: 'bg-emerald-500',
  closed: 'bg-yellow-500',
  proposed: 'bg-amber-500',
  resolved: 'bg-blue-500',
  draft: 'bg-gray-400',
  cancelled: 'bg-red-500',
};

// Quick browse shortcuts — each maps to a real sort/filter the Markets page
// understands via the URL query.
const BROWSE = [
  { label: 'Trending', icon: TrendUpIcon, href: '/markets?sort=-total_volume' },
  { label: 'New', icon: SparkleIcon, href: '/markets?sort=-created_at' },
  { label: 'Ending Soon', icon: ClockIcon, href: '/markets?sort=closes_at' },
  {
    label: 'Watchlist',
    icon: BookmarkSimpleIcon,
    href: '/markets?watchlist=1',
  },
] as const;

export default function HeaderSearch({
  hideMobile = false,
  hideDesktop = false,
}: {
  hideMobile?: boolean;
  hideDesktop?: boolean;
}) {
  const { t } = useTranslation();
  const [query, setQuery] = useState('');
  const [debouncedQuery, setDebouncedQuery] = useState('');
  const [open, setOpen] = useState(false);
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const timer = setTimeout(() => setDebouncedQuery(query.trim()), 300);
    return () => clearTimeout(timer);
  }, [query]);

  const isSearching = debouncedQuery.length >= 2;

  const { data, isLoading } = useApiSWR<{ data: TMarket[] }>(
    isSearching
      ? `/markets?filter[title]=${encodeURIComponent(debouncedQuery)}&limit=6`
      : null,
  );

  // Topics for the default (empty-query) panel. Fetched lazily once the panel
  // has been opened.
  const { data: categories } = useApiSWR<TMarketCategory[]>(
    open ? '/markets/categories' : null,
  );

  const results = data?.data ?? [];

  useEffect(() => {
    const handleClickOutside = (e: MouseEvent) => {
      if (
        containerRef.current &&
        !containerRef.current.contains(e.target as Node)
      ) {
        setOpen(false);
      }
    };
    document.addEventListener('mousedown', handleClickOutside);
    return () => document.removeEventListener('mousedown', handleClickOutside);
  }, []);

  const close = () => {
    setQuery('');
    setDebouncedQuery('');
    setOpen(false);
  };

  const go = (href: string) => {
    router.visit(href);
    close();
  };

  const handleSelect = (slug: string) => go(`/markets/${slug}`);

  return (
    <div
      ref={containerRef}
      className={`relative ${
        hideMobile
          ? 'hidden md:block md:w-[560px]'
          : hideDesktop
            ? 'mb-4 block md:hidden'
            : 'mb-4 block md:w-[560px]'
      }`}
    >
      <InputGroup className="border-0 bg-muted">
        <InputGroupInput
          placeholder={t('Search markets...')}
          value={query}
          onChange={(e) => {
            setQuery(e.target.value);
            setOpen(true);
          }}
          onFocus={() => setOpen(true)}
          onKeyDown={(e) => {
            if (e.key === 'Escape') setOpen(false);
            if (e.key === 'Enter' && results.length > 0)
              handleSelect(results[0].slug);
          }}
        />
        <InputGroupAddon>
          <MagnifyingGlassIcon />
        </InputGroupAddon>
      </InputGroup>

      {open && (
        <div className="absolute top-full left-0 z-50 mt-1.5 w-full overflow-hidden rounded-xl border border-black/8 bg-white shadow-lg dark:border-white/8 dark:bg-background">
          {isSearching ? (
            /* ── Live results ── */
            isLoading ? (
              <div className="flex items-center justify-center py-6 text-sm text-black/40 dark:text-white/40">
                {t('Searching...')}
              </div>
            ) : results.length === 0 ? (
              <div className="flex items-center justify-center gap-2 py-6 text-sm text-black/40 dark:text-white/40">
                <StorefrontIcon className="size-4" />
                {t('No markets found')}
              </div>
            ) : (
              <ul>
                {results.map((market) => (
                  <li key={market.id}>
                    <button
                      className="flex w-full cursor-pointer items-center gap-3 px-4 py-2.5 text-left transition-colors hover:bg-accent"
                      onMouseDown={(e) => e.preventDefault()}
                      onClick={() => handleSelect(market.slug)}
                    >
                      {market.image ? (
                        <img
                          src={getImageUrl(market.image)}
                          alt=""
                          className="size-8 shrink-0 rounded-md object-cover"
                        />
                      ) : (
                        <div className="flex size-8 shrink-0 items-center justify-center rounded-md bg-muted">
                          <StorefrontIcon className="size-4 text-black/40 dark:text-white/40" />
                        </div>
                      )}
                      <div className="min-w-0 flex-1">
                        <p className="truncate text-sm font-medium">
                          {market.title}
                        </p>
                        {market.category && (
                          <p className="text-xs text-black/40 dark:text-white/40">
                            {market.category.name}
                          </p>
                        )}
                      </div>
                      <span className="flex items-center gap-1.5 text-xs text-black/40 capitalize dark:text-white/40">
                        <span
                          className={`size-1.5 rounded-full ${STATUS_COLOR[market.status]}`}
                        />
                        {market.status}
                      </span>
                    </button>
                  </li>
                ))}
              </ul>
            )
          ) : (
            /* ── Default browse + topics panel ── */
            <div className="max-h-[70vh] overflow-y-auto p-4">
              <p className="mb-2.5 text-[11px] font-semibold tracking-[0.08em] text-black/40 uppercase dark:text-white/40">
                {t('Browse')}
              </p>
              <div className="flex flex-wrap gap-2">
                {BROWSE.map((b) => (
                  <button
                    key={b.label}
                    onClick={() => go(b.href)}
                    className="flex cursor-pointer items-center gap-1.5 rounded-full border border-black/10 px-3 py-1.5 text-sm font-medium transition-colors hover:bg-black/5 dark:border-white/12 dark:hover:bg-white/5"
                  >
                    <b.icon
                      weight="bold"
                      className="size-4 text-black/50 dark:text-white/50"
                    />
                    {t(b.label)}
                  </button>
                ))}
              </div>

              {(categories ?? []).length > 0 && (
                <>
                  <p className="mt-5 mb-2.5 text-[11px] font-semibold tracking-[0.08em] text-black/40 uppercase dark:text-white/40">
                    {t('Topics')}
                  </p>
                  <div className="grid grid-cols-2 gap-2">
                    {(categories ?? []).map((cat) => (
                      <button
                        key={cat.id}
                        onClick={() => go(`/markets?category_id=${cat.id}`)}
                        className="flex cursor-pointer items-center gap-3 rounded-xl border border-black/8 p-2 text-left transition-colors hover:bg-black/4 dark:border-white/8 dark:hover:bg-white/5"
                      >
                        {cat.icon ? (
                          <img
                            src={getImageUrl(cat.icon)}
                            alt=""
                            className="size-9 shrink-0 rounded-lg object-cover"
                          />
                        ) : (
                          <div className="flex size-9 shrink-0 items-center justify-center rounded-lg bg-muted text-sm font-semibold text-black/40 dark:text-white/40">
                            {cat.name.charAt(0).toUpperCase()}
                          </div>
                        )}
                        <span className="truncate text-sm font-medium">
                          {cat.name}
                        </span>
                      </button>
                    ))}
                  </div>
                </>
              )}
            </div>
          )}
        </div>
      )}
    </div>
  );
}