import { useState } from 'react';
import CloseIcon from './icons/CloseIcon';
import { useLinkExistingCard } from '../hooks/useLinkExistingCard';

interface LinkExistingCardModalProps {
  boardId: number;
  currentCardId: number;
  onClose: () => void;
  onLinked: () => void;
}

export function LinkExistingCardModal({
  boardId,
  currentCardId,
  onClose,
  onLinked,
}: LinkExistingCardModalProps) {
  const [search, setSearch] = useState('');
  const [selectedCardId, setSelectedCardId] = useState<number | null>(null);

  const { cards, isSubmitting, linkCard } = useLinkExistingCard(boardId, currentCardId);

  const filteredCards = cards.filter(
    (c) =>
      c.name.toLowerCase().includes(search.toLowerCase()) ||
      String(c.id_short || c.id).includes(search)
  );

  const handleLink = async () => {
    if (!selectedCardId) return;
    const success = await linkCard(selectedCardId);
    if (success) {
      onLinked();
      onClose();
    }
  };

  return (
    <div className="fixed inset-0 bg-black/60 flex items-center justify-center z-50">
      <div className="bg-gray-800 rounded-xl shadow-2xl w-full max-w-md mx-4 border border-gray-700">
        <div className="p-6">
          <div className="flex justify-between items-center mb-4">
            <h2 className="text-xl font-bold text-white">Link Existing Card</h2>
            <button onClick={onClose} className="text-gray-400 hover:text-white transition-colors">
              <span className="w-5 h-5">
                <CloseIcon />
              </span>
            </button>
          </div>

          <input
            type="text"
            value={search}
            onChange={(e) => setSearch(e.target.value)}
            className="w-full bg-gray-700 border border-gray-600 rounded-lg px-3 py-2 text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 mb-3"
            placeholder="Search cards by name or ID..."
            autoFocus
          />

          <div className="max-h-60 overflow-y-auto space-y-1 scrollbar-custom">
            {filteredCards.length === 0 && (
              <p className="text-gray-500 text-sm text-center py-4">No cards found</p>
            )}
            {filteredCards.map((c) => (
              <button
                key={c.id}
                onClick={() => setSelectedCardId(c.id)}
                className={`w-full text-left px-3 py-2 rounded-lg transition-colors flex items-center gap-2 ${
                  selectedCardId === c.id
                    ? 'bg-blue-600 text-white'
                    : 'text-gray-300 hover:bg-gray-700'
                }`}
              >
                <span className="text-gray-500 text-xs">#{c.id_short || c.id}</span>
                <span className="truncate">{c.name}</span>
                <span className="ml-auto text-xs text-gray-500">{c.list_name}</span>
              </button>
            ))}
          </div>

          <div className="flex justify-end gap-3 pt-4 mt-2 border-t border-gray-700">
            <button
              type="button"
              onClick={onClose}
              className="px-4 py-2 text-gray-300 hover:text-white bg-gray-700 hover:bg-gray-600 rounded-lg transition-colors"
            >
              Cancel
            </button>
            <button
              onClick={handleLink}
              disabled={!selectedCardId || isSubmitting}
              className="px-4 py-2 bg-blue-600 hover:bg-blue-700 disabled:bg-blue-800 disabled:cursor-not-allowed text-white rounded-lg transition-colors"
            >
              {isSubmitting ? 'Linking...' : 'Link Card'}
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}