import { Button } from '@/components/ui/button';
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from '@/components/ui/input-group';
import { useApiSWR } from '@/hooks/useSWR';
import {
  CaretRightIcon,
  MagnifyingGlassIcon,
  StorefrontIcon,
} from '@phosphor-icons/react';
import { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { UmaLookup } from './uma-import';

type UmaEvent = {
  id: string;
  title: string;
  slug: string;
  image: string | null;
  markets: UmaLookup[];
};

/**
 * "Market Lookup" — browse Polymarket events in a modal, search by keyword, and
 * pick a market to mirror. A selection fills the create form directly (same
 * payload as the slug-based import) so no extra lookup round-trip is needed.
 * Single-market (binary) events import on one click; multi-market events expand
 * to let the admin choose the specific market.
 */
export default function MarketLookup({
  onImported,
}: {
  onImported: (market: UmaLookup) => void;
}) {
  const { t } = useTranslation();
  const [open, setOpen] = useState(false);
  const [query, setQuery] = useState('');
  const [debounced, setDebounced] = useState('');
  const [expanded, setExpanded] = useState<string | null>(null);

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

  const { data, isLoading } = useApiSWR<UmaEvent[]>(
    open && debounced.length >= 2
      ? `/admin/markets/uma-events?q=${encodeURIComponent(debounced)}`
      : null,
  );

  const events = data ?? [];

  const handlePick = (market: UmaLookup) => {
    onImported(market);
    setOpen(false);
    setQuery('');
    setDebounced('');
    setExpanded(null);
  };

  return (
    <>
      <Button type="button" variant="outline" onClick={() => setOpen(true)}>
        <MagnifyingGlassIcon weight="bold" className="mr-1.5 size-4" />
        {t('Market Lookup')}
      </Button>

      <Dialog open={open} onOpenChange={setOpen}>
        <DialogContent className="max-w-lg">
          <DialogHeader>
            <DialogTitle>{t('Find a Polymarket market')}</DialogTitle>
          </DialogHeader>

          <InputGroup className="border-0 bg-muted">
            <InputGroupInput
              autoFocus
              placeholder={t('Search Polymarket events...')}
              value={query}
              onChange={(e) => setQuery(e.target.value)}
            />
            <InputGroupAddon>
              <MagnifyingGlassIcon />
            </InputGroupAddon>
          </InputGroup>

          <div className="max-h-[50vh] space-y-1.5 overflow-y-auto">
            {debounced.length < 2 ? (
              <Empty text={t('Type at least 2 characters to search.')} />
            ) : isLoading ? (
              <Empty text={t('Searching...')} />
            ) : events.length === 0 ? (
              <Empty text={t('No markets found')} />
            ) : (
              events.map((event) => {
                const single = event.markets.length === 1;
                const isOpen = expanded === event.id;
                return (
                  <div
                    key={event.id}
                    className="overflow-hidden rounded-xl border border-black/5 dark:border-white/10"
                  >
                    <button
                      type="button"
                      className="flex w-full items-center gap-3 p-3 text-left transition-colors hover:bg-accent"
                      onClick={() =>
                        single
                          ? handlePick(event.markets[0])
                          : setExpanded(isOpen ? null : event.id)
                      }
                    >
                      {event.image ? (
                        <img
                          src={event.image}
                          alt=""
                          className="size-9 shrink-0 rounded-md object-cover"
                        />
                      ) : (
                        <div className="flex size-9 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">
                          {event.title}
                        </p>
                        <p className="text-xs text-black/40 dark:text-white/40">
                          {single
                            ? t('Binary market')
                            : `${event.markets.length} ${t('markets')}`}
                        </p>
                      </div>
                      {!single && (
                        <CaretRightIcon
                          className={`size-4 shrink-0 text-black/30 transition-transform dark:text-white/30 ${
                            isOpen ? 'rotate-90' : ''
                          }`}
                        />
                      )}
                    </button>

                    {isOpen && !single && (
                      <ul className="border-t border-black/5 dark:border-white/10">
                        {event.markets.map((market) => (
                          <li key={market.market_id}>
                            <button
                              type="button"
                              onClick={() => handlePick(market)}
                              className="w-full truncate py-2 pr-3 pl-14 text-left text-sm transition-colors hover:bg-accent"
                            >
                              {market.question ?? market.market_id}
                            </button>
                          </li>
                        ))}
                      </ul>
                    )}
                  </div>
                );
              })
            )}
          </div>
        </DialogContent>
      </Dialog>
    </>
  );
}

function Empty({ text }: { text: string }) {
  return (
    <div className="flex items-center justify-center py-8 text-sm text-black/40 dark:text-white/40">
      {text}
    </div>
  );
}