import { Button, Input } from '@cameleer/design-system';
import type { VariablesFormState } from '../hooks/useDeploymentPageState';
import styles from '../AppDeploymentPage.module.css';

interface Props {
  value: VariablesFormState;
  onChange: (next: VariablesFormState) => void;
  disabled?: boolean;
}

export function VariablesTab({ value, onChange, disabled }: Props) {
  function updateRow(index: number, field: 'key' | 'value', v: string) {
    const next = value.envVars.map((row, i) => (i === index ? { ...row, [field]: v } : row));
    onChange({ envVars: next });
  }

  function removeRow(index: number) {
    onChange({ envVars: value.envVars.filter((_, i) => i !== index) });
  }

  function addRow() {
    onChange({ envVars: [...value.envVars, { key: '', value: '' }] });
  }

  return (
    <div>
      <div className={styles.envVarsList}>
        {value.envVars.map((row, i) => (
          <div key={i} className={styles.envVarRow}>
            <Input
              disabled={disabled}
              value={row.key}
              onChange={(e) => updateRow(i, 'key', e.target.value)}
              placeholder="KEY"
            />
            <Input
              disabled={disabled}
              value={row.value}
              onChange={(e) => updateRow(i, 'value', e.target.value)}
              placeholder="value"
            />
            <Button
              size="sm"
              variant="ghost"
              disabled={disabled}
              onClick={() => removeRow(i)}
            >
              &times;
            </Button>
          </div>
        ))}
      </div>
      <div style={{ marginTop: 10 }}>
        <Button size="sm" variant="secondary" disabled={disabled} onClick={addRow}>
          + Add Variable
        </Button>
      </div>
    </div>
  );
}