import React, { useState } from "react";
import {
  DragDropContext,
  Droppable,
  Draggable,
  DropResult,
} from "react-beautiful-dnd";

type PairSelectorProps = {
  availablePairs: string[];
  selectedPairs: string[];
  onChange: (pairs: string[]) => void;
};

const PairSelector: React.FC<PairSelectorProps> = ({
  availablePairs,
  selectedPairs,
  onChange,
}) => {
  const [searchAvailable, setSearchAvailable] = useState("");
  const [searchSelected, setSearchSelected] = useState("");

  const filteredAvailable = availablePairs.filter(
    (p) =>
      p.toLowerCase().includes(searchAvailable.toLowerCase()) &&
      !selectedPairs.includes(p)
  );

  const filteredSelected = selectedPairs.filter((p) =>
    p.toLowerCase().includes(searchSelected.toLowerCase())
  );

  const onDragEnd = (result: DropResult) => {
    const { source, destination } = result;
    if (!destination) return;

    if (source.droppableId === "available" && destination.droppableId === "selected") {
      const moved = filteredAvailable[source.index];
      if (moved) onChange([...selectedPairs, moved]);
    }

    if (source.droppableId === "selected" && destination.droppableId === "available") {
      const moved = filteredSelected[source.index];
      if (moved) onChange(selectedPairs.filter((p) => p !== moved));
    }

    if (source.droppableId === "selected" && destination.droppableId === "selected") {
      const updated = Array.from(selectedPairs);
      const [removed] = updated.splice(source.index, 1);
      updated.splice(destination.index, 0, removed);
      onChange(updated);
    }
  };

  return (
    <DragDropContext onDragEnd={onDragEnd}>
      <div className="flex gap-6">
        <div className="flex-1">
          <label className="block text-sm font-medium mb-1">Available Pairs</label>
          <input
            type="text"
            placeholder="Search"
            className="w-full rounded-md border px-2 py-1 mb-2 text-sm"
            value={searchAvailable}
            onChange={(e) => setSearchAvailable(e.target.value)}
          />
          <Droppable droppableId="available">
            {(provided) => (
              <ul
                ref={provided.innerRef}
                {...provided.droppableProps}
                className="h-64 overflow-y-auto border rounded-md p-2 space-y-1 text-sm"
              >
                {filteredAvailable.map((pair, index) => (
                  <Draggable key={pair} draggableId={pair} index={index}>
                    {(prov) => (
                      <li
                        ref={prov.innerRef}
                        {...prov.draggableProps}
                        {...prov.dragHandleProps}
                        className="bg-white border rounded px-2 py-1 hover:bg-gray-50 cursor-move"
                      >
                        {pair}
                      </li>
                    )}
                  </Draggable>
                ))}
                {provided.placeholder}
              </ul>
            )}
          </Droppable>
        </div>

        <div className="flex-1">
          <label className="block text-sm font-medium mb-1">Selected Pairs</label>
          <input
            type="text"
            placeholder="Search"
            className="w-full rounded-md border px-2 py-1 mb-2 text-sm"
            value={searchSelected}
            onChange={(e) => setSearchSelected(e.target.value)}
          />
          <Droppable droppableId="selected">
            {(provided) => (
              <ul
                ref={provided.innerRef}
                {...provided.droppableProps}
                className="h-64 overflow-y-auto border rounded-md p-2 space-y-1 text-sm"
              >
                {filteredSelected.map((pair, index) => (
                  <Draggable key={pair} draggableId={pair} index={index}>
                    {(prov) => (
                      <li
                        ref={prov.innerRef}
                        {...prov.draggableProps}
                        {...prov.dragHandleProps}
                        className="bg-white border rounded px-2 py-1 hover:bg-gray-50 cursor-move"
                      >
                        {pair}
                      </li>
                    )}
                  </Draggable>
                ))}
                {provided.placeholder}
              </ul>
            )}
          </Droppable>
        </div>
      </div>
    </DragDropContext>
  );
};

const PairFamilyForm: React.FC = () => {
  const allPairs = [
    "AUD/CAD",
    "AUD/CHF",
    "AUD/JPY",
    "AUD/NZD",
    "AUD/USD",
    "CAD/CHF",
    "CAD/JPY",
    "CHF/JPY",
    "EUR/AUD",
    "EUR/JPY",
    "EUR/USD",
    "NZD/USD",
  ];

  const [familyName, setFamilyName] = useState("");
  const [selectedPairs, setSelectedPairs] = useState<string[]>([]);

  const handleSubmit = () => {
    console.log("Family:", familyName, "Pairs:", selectedPairs);
  };

  return (
    <div className="max-w-3xl mx-auto p-6 bg-white rounded-lg shadow-md space-y-4">
      <div>
        <label className="block text-sm font-medium mb-1">Family Name</label>
        <input
          type="text"
          placeholder="Enter a name"
          className="w-full rounded-md border px-3 py-2"
          value={familyName}
          onChange={(e) => setFamilyName(e.target.value)}
        />
      </div>

      <PairSelector
        availablePairs={allPairs}
        selectedPairs={selectedPairs}
        onChange={setSelectedPairs}
      />

      <div className="flex justify-between pt-4">
        <button
          onClick={() => {
            setFamilyName("");
            setSelectedPairs([]);
          }}
          className="px-4 py-2 bg-gray-200 rounded-md hover:bg-gray-300"
        >
          Clear
        </button>
        <button
          onClick={handleSubmit}
          className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700"
        >
          OK
        </button>
      </div>
    </div>
  );
};

export default PairFamilyForm;