import { useTranslation } from 'react-i18next';
import { HelpText } from './HelpText';

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

export function PieceMetaForm({ piece, onChange, movementNames, disabled = false }: PieceMetaFormProps) {
  const { t } = useTranslation('settings');
  const triggersText = (piece.triggers?.keywords ?? []).join(', ');
  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={piece.name ?? ''}
          readOnly
          className="w-full px-3 py-2 text-sm border border-slate-300 rounded-lg bg-slate-50 text-slate-500 outline-none cursor-not-allowed"
        />
        <HelpText>{t('pieceMeta.nameHelp')}</HelpText>
      </div>

      {/* description */}
      <div>
        <label className="block text-xs font-medium text-slate-600 mb-1">description</label>
        <input
          type="text"
          value={piece.description ?? ''}
          onChange={(e) => onChange('description', 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>

      {/* max_movements */}
      <div>
        <label className="block text-xs font-medium text-slate-600 mb-1">max_movements</label>
        <input
          type="number"
          value={piece.max_movements ?? 10}
          onChange={(e) => onChange('max_movements', parseInt(e.target.value, 10) || 0)}
          min={1}
          disabled={disabled}
          className={`w-32 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}`}
        />
        <HelpText>{t('pieceMeta.maxMovementsHelp')}</HelpText>
      </div>

      {/* initial_movement */}
      <div>
        <label className="block text-xs font-medium text-slate-600 mb-1">initial_movement</label>
        <select
          value={piece.initial_movement ?? ''}
          onChange={(e) => onChange('initial_movement', 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-canvas ${disabledClass}`}
        >
          {movementNames.length === 0 && <option value="">--</option>}
          {movementNames.map((name) => (
            <option key={name} value={name}>{name}</option>
          ))}
        </select>
        <HelpText>{t('pieceMeta.initialMovementHelp')}</HelpText>
      </div>

      {/* triggers.keywords */}
      <div>
        <label className="block text-xs font-medium text-slate-600 mb-1">triggers.keywords</label>
        <input
          type="text"
          value={triggersText}
          onChange={(e) => {
            const keywords = e.target.value
              .split(',')
              .map((k) => k.trim())
              .filter(Boolean);
            onChange('triggers', { ...piece.triggers, keywords });
          }}
          placeholder="keyword1, keyword2, ..."
          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}`}
        />
        <HelpText>{t('pieceMeta.keywordsHelp')}</HelpText>
      </div>
    </div>
  );
}
