'use client';

import { useCallback, useMemo, useState } from 'react';

import CreatorAvatar from '@/components/creators/CreatorAvatar';
import { CREATOR_SEARCH_MIN_QUERY_LENGTH } from '@/components/creators/creatorSearchConfig';
import { Input } from '@/components/ui/input';
import { useCreatorSearch } from '@/hooks/useCreatorSearch';
import { cn } from '@/lib/utils';

import { CreatorListData } from '@/types/Creator';

const TranslationProgressClient = () => {
  const [query, setQuery] = useState('');
  const [selected, setSelected] = useState<CreatorListData | null>(null);
  const [cvHtml, setCvHtml] = useState<string | null>(null);
  const [cvLoading, setCvLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const handleSearchError = useCallback((err: unknown) => {
    console.error(err);
    setError('Nem sikerult lekerdezni az alkotokat.');
  }, []);

  const {
    results,
    loading: searchLoading,
    isQueryTooShort,
  } = useCreatorSearch<CreatorListData>({
    query,
    minQueryLength: CREATOR_SEARCH_MIN_QUERY_LENGTH,
    debounceMs: 300,
    onError: handleSearchError,
  });

  const fetchCv = async (creator: CreatorListData) => {
    try {
      setCvLoading(true);
      setError(null);
      setSelected(creator);
      setCvHtml(null);
      // Collapse list and reset query when selecting.
      setQuery('');

      const res = await fetch(`/api/get-cv?personId=${creator.id}`);
      if (!res.ok) throw new Error('Failed to fetch CV');
      const data = await res.json();
      setCvHtml(data?.cv ?? '');
    } catch (err: unknown) {
      console.error(err);
      setError('Nem sikerult lekerdezni a CV-t.');
    } finally {
      setCvLoading(false);
    }
  };

  const disableSearch = useMemo(
    () => query.trim().length > 0 && isQueryTooShort,
    [isQueryTooShort, query]
  );

  return (
    <div className="mx-auto flex max-w-5xl flex-col gap-6">
      <div className="flex flex-col gap-2">
        <label className="text-lg font-semibold uppercase text-mma-blue">Alkoto keresese</label>
        <Input
          placeholder="Minimum 3 karakter a kereseshez..."
          value={query}
          onChange={(event) => setQuery(event.target.value)}
          className={cn('w-full', disableSearch && 'ring-1 ring-mma-yellow/50')}
        />
        {disableSearch ? (
          <span className="text-xs text-gray-500">Minimum 3 karakter a kereseshez...</span>
        ) : null}
      </div>

      {!isQueryTooShort ? (
        <div className="mt-2 max-h-72 overflow-y-auto overflow-x-hidden rounded-xl border border-mma-blue/10">
          {searchLoading ? (
            <div className="p-3 text-sm text-gray-600">Kereses...</div>
          ) : results.length === 0 ? (
            <div className="p-3 text-sm text-gray-600">Nincs talalat.</div>
          ) : (
            results.map((creator) => (
              <button
                key={creator.id}
                type="button"
                onClick={() => fetchCv(creator)}
                className="flex w-full items-center gap-3 px-3 py-2 text-left hover:bg-mma-cyan/10"
              >
                <CreatorAvatar
                  imageKey={creator.profilkep?.key}
                  name={creator.nev ?? undefined}
                  width={48}
                  height={48}
                  wrapperClassName="h-12 w-12"
                  imageClassName="rounded-full"
                />
                <div>
                  <div className="font-semibold text-mma-blue">{creator.nev}</div>
                  <div className="text-xs text-gray-600">{creator.szakma}</div>
                </div>
              </button>
            ))
          )}
        </div>
      ) : null}

      {selected ? (
        <div className="flex flex-col gap-3 rounded-2xl border border-mma-blue/10 bg-white p-4 shadow-sm">
          <div className="flex items-center gap-3">
            <CreatorAvatar
              imageKey={selected.profilkep?.key}
              name={selected.nev ?? undefined}
              width={56}
              height={56}
              wrapperClassName="h-14 w-14"
              imageClassName="rounded-full"
            />
            <div>
              <div className="font-bold text-mma-blue">{selected.nev}</div>
              <div className="text-xs text-gray-600">{selected.szakma}</div>
            </div>
          </div>

          {cvLoading ? (
            <div className="text-sm text-gray-600">CV betoltese...</div>
          ) : cvHtml ? (
            <div
              className="prose max-w-none text-sm text-gray-800"
              dangerouslySetInnerHTML={{ __html: cvHtml }}
            />
          ) : (
            <div className="text-sm text-gray-600">Nincs megjelenitheto tartalom.</div>
          )}
        </div>
      ) : null}

      {error ? <div className="text-sm text-red-600">{error}</div> : null}
    </div>
  );
};

export default TranslationProgressClient;