'use client';

import { useState, useMemo } from 'react';
import { X, Search } from 'lucide-react';

interface LinkModalProps<T extends { id: number }> {
  title: string;
  items: T[];
  alreadyLinkedIds: Set<number>;
  renderItem: (item: T) => React.ReactNode;
  searchFilter: (item: T, query: string) => boolean;
  onAdd: (ids: number[]) => void;
  onClose: () => void;
}

export default function LinkModal<T extends { id: number }>({
  title,
  items,
  alreadyLinkedIds,
  renderItem,
  searchFilter,
  onAdd,
  onClose,
}: LinkModalProps<T>) {
  const [search, setSearch] = useState('');
  const [selected, setSelected] = useState<Set<number>>(new Set());

  const filtered = useMemo(() => {
    if (!search.trim()) return items;
    return items.filter((item) => searchFilter(item, search.trim().toLowerCase()));
  }, [items, search, searchFilter]);

  const toggle = (id: number) => {
    setSelected((prev) => {
      const next = new Set(prev);
      if (next.has(id)) next.delete(id);
      else next.add(id);
      return next;
    });
  };

  return (
    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
      <div className="bg-white rounded-lg shadow-xl w-full max-w-lg max-h-[80vh] flex flex-col">
        <div className="flex items-center justify-between p-4 border-b">
          <h3 className="text-lg font-bold text-gray-900">{title}</h3>
          <button onClick={onClose} className="text-gray-400 hover:text-gray-600">
            <X className="h-5 w-5" />
          </button>
        </div>

        <div className="p-4 border-b">
          <div className="relative">
            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" />
            <input
              type="text"
              value={search}
              onChange={(e) => setSearch(e.target.value)}
              placeholder="検索..."
              className="w-full pl-9 pr-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-green-500"
              autoFocus
            />
          </div>
        </div>

        <div className="flex-1 overflow-y-auto p-2">
          {filtered.length === 0 ? (
            <p className="text-gray-500 text-sm text-center py-4">該当する区画がありません</p>
          ) : (
            filtered.map((item) => {
              const isLinked = alreadyLinkedIds.has(item.id);
              const isSelected = selected.has(item.id);
              return (
                <label
                  key={item.id}
                  className={`flex items-start gap-3 p-2 rounded cursor-pointer hover:bg-gray-50 ${
                    isLinked ? 'opacity-50' : ''
                  }`}
                >
                  <input
                    type="checkbox"
                    checked={isSelected}
                    disabled={isLinked}
                    onChange={() => toggle(item.id)}
                    className="mt-1 rounded border-gray-300 text-green-600 focus:ring-green-500"
                  />
                  <div className="flex-1 text-sm">{renderItem(item)}</div>
                </label>
              );
            })
          )}
        </div>

        <div className="p-4 border-t flex justify-end">
          <button
            onClick={() => {
              onAdd(Array.from(selected));
              onClose();
            }}
            disabled={selected.size === 0}
            className="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed text-sm"
          >
            選択した区画を追加 ({selected.size}件)
          </button>
        </div>
      </div>
    </div>
  );
}
