import { Modal, Input, Button } from './ui';
import { DECK_INPUT_FIELD_CLASS } from '../lib/deck-format-utils.js';

export default function DecksEditModal({
  editingDeck,
  setEditingDeck,
  onClose,
  onEdit,
}) {
  return (
    <Modal open={!!editingDeck} onClose={onClose} title="Edit Deck" size="md">
      {editingDeck && (
        <form onSubmit={onEdit} className="space-y-4">
          <Input
            label="Deck Name *"
            required
            value={editingDeck.name}
            onChange={(e) => setEditingDeck({ ...editingDeck, name: e.target.value })}
          />
          <div>
            <label
              className="block text-sm font-medium mb-2"
              style={{ color: 'var(--text-primary)' }}
              htmlFor="edit-deck-format"
            >
              Format
            </label>
            <select
              id="edit-deck-format"
              value={editingDeck.format}
              onChange={(e) => setEditingDeck({ ...editingDeck, format: e.target.value })}
              className={DECK_INPUT_FIELD_CLASS}
            >
              <option value="Commander">Commander</option>
              <option value="Standard">Standard</option>
              <option value="Modern">Modern</option>
              <option value="Legacy">Legacy</option>
            </select>
          </div>
          <div>
            <label
              className="block text-sm font-medium mb-2"
              style={{ color: 'var(--text-primary)' }}
              htmlFor="edit-deck-description"
            >
              Description
            </label>
            <textarea
              id="edit-deck-description"
              value={editingDeck.description || ''}
              onChange={(e) => setEditingDeck({ ...editingDeck, description: e.target.value })}
              className={DECK_INPUT_FIELD_CLASS}
              rows="3"
            />
          </div>
          <label className="flex items-center">
            <input
              type="checkbox"
              checked={editingDeck.is_public}
              onChange={(e) => setEditingDeck({ ...editingDeck, is_public: e.target.checked })}
              className="mr-2"
              style={{ accentColor: 'var(--accent-ember)' }}
            />
            <span className="text-sm" style={{ color: 'var(--text-secondary)' }}>
              Make deck public
            </span>
          </label>
          <div className="flex space-x-3 pt-2">
            <Button type="button" variant="secondary" onClick={onClose} className="flex-1">
              Cancel
            </Button>
            <Button type="submit" variant="primary" className="flex-1">
              Save Changes
            </Button>
          </div>
        </form>
      )}
    </Modal>
  );
}