import { memo, useState } from 'react';
import { Handle, Position } from '@xyflow/react';
import type { NodeProps } from '@xyflow/react';
import { Sword, ChevronDown, ChevronUp } from 'lucide-react';
import type { BattleConfigNodeData } from '../../types/nodes';

export const BattleConfigNode = memo(({ data }: NodeProps) => {
  const [isExpanded, setIsExpanded] = useState(true);
  const nodeData = data as BattleConfigNodeData;

  const handleChange = (field: keyof BattleConfigNodeData, value: string | boolean | undefined) => {
    Object.assign(nodeData, { [field]: value });
  };

  return (
    <div className="bg-white rounded-lg shadow-xl border-2 border-red-500 min-w-[350px]">
      {/* Node Header */}
      <div className="bg-red-500 text-white px-4 py-2 rounded-t-lg flex items-center justify-between">
        <div className="flex items-center gap-2">
          <Sword className="h-4 w-4" />
          <span className="font-semibold text-sm">Battle Configuration</span>
        </div>
        <button
          onClick={() => setIsExpanded(!isExpanded)}
          className="text-white hover:bg-red-600 rounded p-1 transition-colors"
        >
          {isExpanded ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
        </button>
      </div>

      {/* Input Handle */}
      <Handle
        type="target"
        position={Position.Left}
        className="w-3 h-3 bg-red-500 border-2 border-white"
      />

      {/* Node Content */}
      {isExpanded && (
        <div className="p-4 space-y-3">
          <div className="space-y-2">
            <label className="flex items-center text-sm">
              <input
                type="checkbox"
                checked={nodeData.canBattle || false}
                onChange={(e) => handleChange('canBattle', e.target.checked)}
                className="mr-2 h-4 w-4 text-red-600 rounded focus:ring-red-500"
              />
              <span className="font-medium">Can Battle</span>
            </label>
            <label className="flex items-center text-sm">
              <input
                type="checkbox"
                checked={nodeData.canChallenge || false}
                onChange={(e) => handleChange('canChallenge', e.target.checked)}
                className="mr-2 h-4 w-4 text-red-600 rounded focus:ring-red-500"
              />
              <span className="font-medium">Can Challenge</span>
            </label>
          </div>

          <div>
            <label className="block text-xs font-medium text-gray-700 mb-1">
              Battle Theme
            </label>
            <input
              type="text"
              value={nodeData.battleTheme || ''}
              onChange={(e) => handleChange('battleTheme', e.target.value)}
              className="w-full px-2 py-1 text-sm border border-gray-300 rounded focus:ring-2 focus:ring-red-500 focus:border-red-500"
              placeholder="cobblemon:battle_theme"
            />
          </div>

          <div>
            <label className="block text-xs font-medium text-gray-700 mb-1">
              Victory Theme
            </label>
            <input
              type="text"
              value={nodeData.victoryTheme || ''}
              onChange={(e) => handleChange('victoryTheme', e.target.value)}
              className="w-full px-2 py-1 text-sm border border-gray-300 rounded focus:ring-2 focus:ring-red-500 focus:border-red-500"
              placeholder="cobblemon:victory_theme"
            />
          </div>

          <div>
            <label className="block text-xs font-medium text-gray-700 mb-1">
              Defeat Theme
            </label>
            <input
              type="text"
              value={nodeData.defeatTheme || ''}
              onChange={(e) => handleChange('defeatTheme', e.target.value)}
              className="w-full px-2 py-1 text-sm border border-gray-300 rounded focus:ring-2 focus:ring-red-500 focus:border-red-500"
              placeholder="cobblemon:defeat_theme"
            />
          </div>

          <div className="border-t pt-3">
            <div className="text-xs font-medium text-gray-700 mb-2">Options</div>
            <div className="space-y-2">
              <label className="flex items-center text-xs">
                <input
                  type="checkbox"
                  checked={nodeData.simultaneousBattles || false}
                  onChange={(e) => handleChange('simultaneousBattles', e.target.checked)}
                  className="mr-1.5 h-3 w-3 text-red-600 rounded focus:ring-red-500"
                />
                Simultaneous Battles
              </label>
              <label className="flex items-center text-xs">
                <input
                  type="checkbox"
                  checked={nodeData.healAfterwards || false}
                  onChange={(e) => handleChange('healAfterwards', e.target.checked)}
                  className="mr-1.5 h-3 w-3 text-red-600 rounded focus:ring-red-500"
                />
                Heal Party After Battle
              </label>
            </div>
          </div>
        </div>
      )}

      {/* Output Handle */}
      <Handle
        type="source"
        position={Position.Right}
        className="w-3 h-3 bg-red-500 border-2 border-white"
      />
    </div>
  );
});

BattleConfigNode.displayName = 'BattleConfigNode';