import { Button } from './ui';

const RARITY_OPTIONS = [
  'common', 'uncommon', 'rare', 'mythic', 'legendary',
  'holographic', 'enchanted', 'super rare', 'ultra rare',
];

const GAME_OPTIONS = ['MTG', 'Pokemon', 'Lorcana'];

const COLOR_OPTIONS = ['White', 'Blue', 'Black', 'Red', 'Green', 'Colorless'];

export default function CardEditorForm({
  formData,
  onInputChange,
  onColorChange,
  onSave,
  saving,
  message,
}) {
  return (
    <>
              <div className="flex items-center justify-between mb-6">
                <h2 className="text-xl font-semibold" style={{ color: 'var(--text-primary)' }}>
                  Edit Card Details
                </h2>
                <Button
                  variant="primary"
                  size="lg"
                  onClick={onSave}
                  disabled={saving}
                  loading={saving}
                >
                  {saving ? 'Saving...' : 'Save Changes'}
                </Button>
              </div>

              {message && (
                <div className={`p-4 rounded-lg mb-6 ${
                  message.includes('Error') 
                    ? 'bg-red-100 text-red-700 border border-red-200' 
                    : 'bg-green-100 text-green-700 border border-green-200'
                }`}>
                  {message}
                </div>
              )}

              <div className="space-y-6">
                {/* Basic Information */}
                <div className="glass-panel p-6 rounded-xl">
                  <h3 className="text-lg font-semibold mb-4" style={{ color: 'var(--text-primary)' }}>
                    Basic Information
                  </h3>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                      <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
                        Card Name *
                      </label>
                      <input
                        type="text"
                        value={formData.name}
                        onChange={(e) => onInputChange('name', e.target.value)}
                        className="w-full p-3 rounded-lg border transition-all duration-200"
                        style={{
                          backgroundColor: 'var(--bg-primary)',
                          borderColor: 'var(--border)',
                          color: 'var(--text-primary)'
                        }}
                      />
                    </div>
                    <div>
                      <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
                        Game *
                      </label>
                      <select
                        value={formData.game}
                        onChange={(e) => onInputChange('game', e.target.value)}
                        className="w-full p-3 rounded-lg border transition-all duration-200"
                        style={{
                          backgroundColor: 'var(--bg-primary)',
                          borderColor: 'var(--border)',
                          color: 'var(--text-primary)'
                        }}
                      >
                        <option value="">Select Game</option>
                        {GAME_OPTIONS.map(game => (
                          <option key={game} value={game}>{game}</option>
                        ))}
                      </select>
                    </div>
                    <div>
                      <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
                        Set Name
                      </label>
                      <input
                        type="text"
                        value={formData.set_name}
                        onChange={(e) => onInputChange('set_name', e.target.value)}
                        className="w-full p-3 rounded-lg border transition-all duration-200"
                        style={{
                          backgroundColor: 'var(--bg-primary)',
                          borderColor: 'var(--border)',
                          color: 'var(--text-primary)'
                        }}
                      />
                    </div>
                    <div>
                      <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
                        Set Code
                      </label>
                      <input
                        type="text"
                        value={formData.set_code}
                        onChange={(e) => onInputChange('set_code', e.target.value)}
                        className="w-full p-3 rounded-lg border transition-all duration-200"
                        style={{
                          backgroundColor: 'var(--bg-primary)',
                          borderColor: 'var(--border)',
                          color: 'var(--text-primary)'
                        }}
                      />
                    </div>
                    <div>
                      <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
                        Card Number
                      </label>
                      <input
                        type="text"
                        value={formData.card_number}
                        onChange={(e) => onInputChange('card_number', e.target.value)}
                        className="w-full p-3 rounded-lg border transition-all duration-200"
                        style={{
                          backgroundColor: 'var(--bg-primary)',
                          borderColor: 'var(--border)',
                          color: 'var(--text-primary)'
                        }}
                      />
                    </div>
                    <div>
                      <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
                        Rarity
                      </label>
                      <select
                        value={formData.rarity}
                        onChange={(e) => onInputChange('rarity', e.target.value)}
                        className="w-full p-3 rounded-lg border transition-all duration-200"
                        style={{
                          backgroundColor: 'var(--bg-primary)',
                          borderColor: 'var(--border)',
                          color: 'var(--text-primary)'
                        }}
                      >
                        <option value="">Select Rarity</option>
                        {RARITY_OPTIONS.map(rarity => (
                          <option key={rarity} value={rarity}>{rarity}</option>
                        ))}
                      </select>
                    </div>
                  </div>
                </div>

                {/* Game Mechanics */}
                <div className="glass-panel p-6 rounded-xl">
                  <h3 className="text-lg font-semibold mb-4" style={{ color: 'var(--text-primary)' }}>
                    Game Mechanics
                  </h3>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                      <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
                        Card Type
                      </label>
                      <input
                        type="text"
                        value={formData.card_type}
                        onChange={(e) => onInputChange('card_type', e.target.value)}
                        placeholder="e.g., Creature, Instant, Pokemon, Character"
                        className="w-full p-3 rounded-lg border transition-all duration-200"
                        style={{
                          backgroundColor: 'var(--bg-primary)',
                          borderColor: 'var(--border)',
                          color: 'var(--text-primary)'
                        }}
                      />
                    </div>
                    <div>
                      <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
                        Mana Cost
                      </label>
                      <input
                        type="text"
                        value={formData.mana_cost}
                        onChange={(e) => onInputChange('mana_cost', e.target.value)}
                        placeholder="e.g., {2}{U}{U}, 3, etc."
                        className="w-full p-3 rounded-lg border transition-all duration-200"
                        style={{
                          backgroundColor: 'var(--bg-primary)',
                          borderColor: 'var(--border)',
                          color: 'var(--text-primary)'
                        }}
                      />
                    </div>
                    <div>
                      <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
                        CMC (Converted Mana Cost)
                      </label>
                      <input
                        type="number"
                        value={formData.cmc}
                        onChange={(e) => onInputChange('cmc', e.target.value)}
                        className="w-full p-3 rounded-lg border transition-all duration-200"
                        style={{
                          backgroundColor: 'var(--bg-primary)',
                          borderColor: 'var(--border)',
                          color: 'var(--text-primary)'
                        }}
                      />
                    </div>
                    <div>
                      <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
                        Power
                      </label>
                      <input
                        type="text"
                        value={formData.power}
                        onChange={(e) => onInputChange('power', e.target.value)}
                        placeholder="e.g., 2, *, X"
                        className="w-full p-3 rounded-lg border transition-all duration-200"
                        style={{
                          backgroundColor: 'var(--bg-primary)',
                          borderColor: 'var(--border)',
                          color: 'var(--text-primary)'
                        }}
                      />
                    </div>
                    <div>
                      <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
                        Toughness
                      </label>
                      <input
                        type="text"
                        value={formData.toughness}
                        onChange={(e) => onInputChange('toughness', e.target.value)}
                        placeholder="e.g., 2, *, X"
                        className="w-full p-3 rounded-lg border transition-all duration-200"
                        style={{
                          backgroundColor: 'var(--bg-primary)',
                          borderColor: 'var(--border)',
                          color: 'var(--text-primary)'
                        }}
                      />
                    </div>
                  </div>

                  {/* Colors */}
                  <div className="mt-4">
                    <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
                      Colors
                    </label>
                    <div className="flex flex-wrap gap-3">
                      {COLOR_OPTIONS.map(color => (
                        <label key={color} className="flex items-center gap-2 cursor-pointer">
                          <input
                            type="checkbox"
                            checked={formData.colors.includes(color)}
                            onChange={(e) => onColorChange(color, e.target.checked)}
                            className="rounded"
                          />
                          <span style={{ color: 'var(--text-primary)' }}>{color}</span>
                        </label>
                      ))}
                    </div>
                  </div>
                </div>

                {/* Card Text */}
                <div className="glass-panel p-6 rounded-xl">
                  <h3 className="text-lg font-semibold mb-4" style={{ color: 'var(--text-primary)' }}>
                    Card Text
                  </h3>
                  <div>
                    <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
                      Oracle Text / Abilities
                    </label>
                    <textarea
                      value={formData.oracle_text}
                      onChange={(e) => onInputChange('oracle_text', e.target.value)}
                      rows={4}
                      placeholder="Enter the card's rules text, abilities, or flavor text..."
                      className="w-full p-3 rounded-lg border transition-all duration-200"
                      style={{
                        backgroundColor: 'var(--bg-primary)',
                        borderColor: 'var(--border)',
                        color: 'var(--text-primary)'
                      }}
                    />
                  </div>
                </div>

                {/* Images */}
                <div className="glass-panel p-6 rounded-xl">
                  <h3 className="text-lg font-semibold mb-4" style={{ color: 'var(--text-primary)' }}>
                    Card Images
                  </h3>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                      <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
                        Primary Image URL
                      </label>
                      <input
                        type="url"
                        value={formData.image_url}
                        onChange={(e) => onInputChange('image_url', e.target.value)}
                        placeholder="https://example.com/card-image.jpg"
                        className="w-full p-3 rounded-lg border transition-all duration-200"
                        style={{
                          backgroundColor: 'var(--bg-primary)',
                          borderColor: 'var(--border)',
                          color: 'var(--text-primary)'
                        }}
                      />
                    </div>
                    <div>
                      <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
                        Stock Image URL
                      </label>
                      <input
                        type="url"
                        value={formData.stock_image_url}
                        onChange={(e) => onInputChange('stock_image_url', e.target.value)}
                        placeholder="https://example.com/stock-image.jpg"
                        className="w-full p-3 rounded-lg border transition-all duration-200"
                        style={{
                          backgroundColor: 'var(--bg-primary)',
                          borderColor: 'var(--border)',
                          color: 'var(--text-primary)'
                        }}
                      />
                    </div>
                  </div>
                </div>

                {/* Pricing */}
                <div className="glass-panel p-6 rounded-xl">
                  <h3 className="text-lg font-semibold mb-4" style={{ color: 'var(--text-primary)' }}>
                    Pricing Information
                  </h3>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                      <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
                        Current Price ($)
                      </label>
                      <input
                        type="number"
                        step="0.01"
                        value={formData.current_price}
                        onChange={(e) => onInputChange('current_price', e.target.value)}
                        placeholder="0.00"
                        className="w-full p-3 rounded-lg border transition-all duration-200"
                        style={{
                          backgroundColor: 'var(--bg-primary)',
                          borderColor: 'var(--border)',
                          color: 'var(--text-primary)'
                        }}
                      />
                    </div>
                    <div>
                      <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
                        Market Price ($)
                      </label>
                      <input
                        type="number"
                        step="0.01"
                        value={formData.market_price}
                        onChange={(e) => onInputChange('market_price', e.target.value)}
                        placeholder="0.00"
                        className="w-full p-3 rounded-lg border transition-all duration-200"
                        style={{
                          backgroundColor: 'var(--bg-primary)',
                          borderColor: 'var(--border)',
                          color: 'var(--text-primary)'
                        }}
                      />
                    </div>
                  </div>
                </div>
              </div>
    </>
  );
}