import { HelpText } from './HelpText';
import { ToolTagInput } from './ToolTagInput';
import { RulesTable } from './RulesTable';

const SPECIAL_TARGETS = ['COMPLETE', 'ASK', 'ABORT', 'WAIT_SUBTASKS'];

export interface MovementFormProps {
  movement: any;
  movementNames: string[];
  onChange: (field: string, value: any) => void;
  disabled?: boolean;
}

export function MovementForm({ movement, movementNames, onChange, disabled = false }: MovementFormProps) {
  const nextOptions = [...movementNames.filter((n) => n !== movement.name), ...SPECIAL_TARGETS];
  const disabledClass = disabled ? 'bg-slate-50 text-slate-500 cursor-not-allowed' : '';

  return (
    <div className="space-y-4">
      {/* name */}
      <div>
        <label className="block text-xs font-medium text-slate-600 mb-1">name</label>
        <input
          type="text"
          value={movement.name ?? ''}
          onChange={(e) => onChange('name', e.target.value)}
          disabled={disabled}
          className={`w-full px-3 py-2 text-sm border border-slate-300 rounded-lg focus:ring-2 focus:ring-accent-ring focus:border-accent outline-none ${disabledClass}`}
        />
      </div>

      {/* persona */}
      <div>
        <label className="block text-xs font-medium text-slate-600 mb-1">persona</label>
        <input
          type="text"
          value={movement.persona ?? ''}
          onChange={(e) => onChange('persona', e.target.value)}
          disabled={disabled}
          className={`w-full px-3 py-2 text-sm border border-slate-300 rounded-lg focus:ring-2 focus:ring-accent-ring focus:border-accent outline-none ${disabledClass}`}
        />
      </div>

      {/* default_next */}
      <div>
        <label className="block text-xs font-medium text-slate-600 mb-1">default_next</label>
        <select
          value={movement.default_next ?? 'COMPLETE'}
          onChange={(e) => onChange('default_next', e.target.value)}
          disabled={disabled}
          className={`w-full px-3 py-2 text-sm border border-slate-300 rounded-lg focus:ring-2 focus:ring-accent-ring focus:border-accent outline-none bg-white ${disabledClass}`}
        >
          {nextOptions.map((opt) => (
            <option key={opt} value={opt}>{opt}</option>
          ))}
        </select>
      </div>

      {/* edit */}
      <div className="flex items-center gap-2">
        <input
          type="checkbox"
          id={`edit-${movement.name}`}
          checked={movement.edit ?? false}
          onChange={(e) => onChange('edit', e.target.checked)}
          disabled={disabled}
          className="rounded border-slate-300 disabled:cursor-not-allowed"
        />
        <label htmlFor={`edit-${movement.name}`} className="text-xs font-medium text-slate-600">edit</label>
        <HelpText>有効にすると Write / Edit ツールが LLM に提示されます</HelpText>
      </div>

      {/* instruction */}
      <div>
        <label className="block text-xs font-medium text-slate-600 mb-1">instruction</label>
        <textarea
          value={movement.instruction ?? ''}
          onChange={(e) => onChange('instruction', e.target.value)}
          rows={6}
          disabled={disabled}
          className={`w-full px-3 py-2 text-sm border border-slate-300 rounded-lg focus:ring-2 focus:ring-accent-ring focus:border-accent outline-none font-mono ${disabledClass}`}
        />
        <HelpText>LLM に渡される指示文。Markdown 記法が使えます</HelpText>
      </div>

      {/* allowed_tools */}
      <ToolTagInput
        value={movement.allowed_tools ?? []}
        onChange={(tools) => onChange('allowed_tools', tools)}
        disabled={disabled}
      />

      {/* rules */}
      <RulesTable
        rules={movement.rules ?? []}
        movementNames={movementNames.filter((n) => n !== movement.name)}
        onChange={(rules) => onChange('rules', rules)}
        disabled={disabled}
      />
    </div>
  );
}
