'use client';

import { useState, useRef, useEffect } from 'react';
import { SERVICE_LIST_ITEMS } from '@/lib/service-list';

interface Props {
  value: string;
  onChange: (value: string) => void;
  placeholder?: string;
}

export default function ServiceListSelect({ value, onChange, placeholder = 'Pesquisar item...' }: Props) {
  const [query, setQuery] = useState('');
  const [open, setOpen] = useState(false);
  const containerRef = useRef<HTMLDivElement>(null);

  const selected = SERVICE_LIST_ITEMS.find((i) => i.code === value);
  const displayQuery = open ? query : (selected ? `${selected.code} — ${selected.description}` : '');

  const filtered = query.length > 0
    ? SERVICE_LIST_ITEMS.filter(
        (i) =>
          i.code.includes(query) ||
          i.description.toLowerCase().includes(query.toLowerCase()),
      ).slice(0, 30)
    : SERVICE_LIST_ITEMS.slice(0, 30);

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

  function select(code: string) {
    onChange(code);
    setOpen(false);
    setQuery('');
  }

  function handleFocus() {
    setOpen(true);
    setQuery('');
  }

  function handleClear(e: React.MouseEvent) {
    e.stopPropagation();
    onChange('');
    setQuery('');
    setOpen(false);
  }

  return (
    <div ref={containerRef} className="relative">
      <div className="relative">
        <input
          className="input pr-8"
          placeholder={placeholder}
          value={displayQuery}
          onChange={(e) => { setQuery(e.target.value); setOpen(true); }}
          onFocus={handleFocus}
          autoComplete="off"
        />
        {value && (
          <button
            type="button"
            onClick={handleClear}
            className="absolute right-2 top-1/2 -translate-y-1/2 text-[#0E0F12]/40 hover:text-[#0E0F12]/60 text-lg leading-none"
          >
            ×
          </button>
        )}
      </div>

      {open && (
        <ul className="absolute z-50 mt-1 w-full max-h-60 overflow-y-auto bg-white border border-[#EAE4D9] rounded-lg shadow-lg text-sm">
          {filtered.length === 0 ? (
            <li className="px-4 py-3 text-[#0E0F12]/40">Nenhum item encontrado</li>
          ) : (
            filtered.map((item) => (
              <li
                key={item.code}
                onMouseDown={() => select(item.code)}
                className={`flex gap-2 px-4 py-2.5 cursor-pointer hover:bg-[#FAF7F2] ${
                  item.code === value ? 'bg-[#FAF7F2] font-medium' : ''
                }`}
              >
                <span className="shrink-0 font-mono text-[#B7895A] w-10">{item.code}</span>
                <span className="text-[#0E0F12]">{item.description}</span>
              </li>
            ))
          )}
        </ul>
      )}
    </div>
  );
}