From 4c5271ffbf7072ccd21fb19271389633ae913e4b Mon Sep 17 00:00:00 2001
From: varutasu <104105839+varutasu@users.noreply.github.com>
Date: Wed, 3 Jun 2026 17:29:11 -0500
Subject: [PATCH] refactor(card-editor): extract preview and form components
 (Brief 2) (#92)

Move the sticky preview column and edit form into CardEditorPreview and
CardEditorForm; page composer drops to ~275 lines.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 components/CardEditorForm.js    | 390 ++++++++++++++++++++++++++++
 components/CardEditorPreview.js |  62 +++++
 pages/admin/card-editor.js      | 445 +-------------------------------
 3 files changed, 463 insertions(+), 434 deletions(-)
 create mode 100644 components/CardEditorForm.js
 create mode 100644 components/CardEditorPreview.js

diff --git a/components/CardEditorForm.js b/components/CardEditorForm.js
new file mode 100644
index 0000000..d329ac8
--- /dev/null
+++ b/components/CardEditorForm.js
@@ -0,0 +1,390 @@
+/* eslint-disable @next/next/no-img-element -- External card image URLs; next/image migration is out of scope. */
+
+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
+                  onClick={onSave}
+                  disabled={saving}
+                  className={`px-6 py-3 rounded-xl font-medium transition-all duration-200 ${
+                    saving 
+                      ? 'opacity-50 cursor-not-allowed' 
+                      : 'gradient-bg-purple text-white hover:shadow-lg'
+                  }`}
+                >
+                  {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="p-6 rounded-xl" style={{ backgroundColor: 'var(--bg-secondary)' }}>
+                  <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="p-6 rounded-xl" style={{ backgroundColor: 'var(--bg-secondary)' }}>
+                  <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="p-6 rounded-xl" style={{ backgroundColor: 'var(--bg-secondary)' }}>
+                  <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="p-6 rounded-xl" style={{ backgroundColor: 'var(--bg-secondary)' }}>
+                  <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="p-6 rounded-xl" style={{ backgroundColor: 'var(--bg-secondary)' }}>
+                  <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>
+    </>
+  );
+}
diff --git a/components/CardEditorPreview.js b/components/CardEditorPreview.js
new file mode 100644
index 0000000..96475db
--- /dev/null
+++ b/components/CardEditorPreview.js
@@ -0,0 +1,62 @@
+/* eslint-disable @next/next/no-img-element -- External card image URLs; next/image migration is out of scope. */
+
+export default function CardEditorPreview({ formData }) {
+  return (
+    <div className="sticky top-8">
+                <h2 className="text-xl font-semibold mb-4" style={{ color: 'var(--text-primary)' }}>
+                  Card Preview
+                </h2>
+                <div className="p-6 rounded-xl" style={{ backgroundColor: 'var(--bg-secondary)' }}>
+                  <div className="w-full max-w-xs mx-auto">
+                    <div 
+                      className="w-full rounded-lg overflow-hidden shadow-lg"
+                      style={{ aspectRatio: '5/7' }}
+                    >
+                      {formData.image_url ? (
+                        <img 
+                          src={formData.image_url} 
+                          alt={formData.name}
+                          className="w-full h-full object-cover"
+                          onError={(e) => {
+                            e.target.style.display = 'none';
+                            e.target.nextSibling.style.display = 'flex';
+                          }}
+                        />
+                      ) : null}
+                      <div 
+                        className={`w-full h-full flex items-center justify-center ${formData.image_url ? 'hidden' : 'flex'}`}
+                        style={{ backgroundColor: 'var(--bg-primary)' }}
+                      >
+                        <div className="text-center p-4">
+                          <div className="text-4xl mb-2">🃏</div>
+                          <div className="text-sm font-semibold" style={{ color: 'var(--text-primary)' }}>
+                            {formData.name || 'Card Name'}
+                          </div>
+                          <div className="text-xs" style={{ color: 'var(--text-secondary)' }}>
+                            {formData.set_name || 'Set Name'}
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  
+                  <div className="mt-4 text-center">
+                    <h3 className="font-bold" style={{ color: 'var(--text-primary)' }}>
+                      {formData.name || 'Card Name'}
+                    </h3>
+                    <p className="text-sm" style={{ color: 'var(--text-secondary)' }}>
+                      {formData.set_name} • {formData.game}
+                    </p>
+                    <p className="text-sm" style={{ color: 'var(--text-secondary)' }}>
+                      {formData.rarity} • {formData.card_type}
+                    </p>
+                    {formData.current_price && (
+                      <p className="text-lg font-bold mt-2 gradient-text-gold">
+                        ${parseFloat(formData.current_price).toFixed(2)}
+                      </p>
+                    )}
+                  </div>
+                </div>
+              </div>
+  );
+}
diff --git a/pages/admin/card-editor.js b/pages/admin/card-editor.js
index bb984f1..2b3ebb2 100644
--- a/pages/admin/card-editor.js
+++ b/pages/admin/card-editor.js
@@ -4,6 +4,8 @@ import { useRouter } from 'next/router';
 import dynamic from 'next/dynamic';
 import Layout from '../../components/Layout';
 import AdminProtected from '../../components/AdminProtected';
+import CardEditorForm from '../../components/CardEditorForm';
+import CardEditorPreview from '../../components/CardEditorPreview';
 import CardEditorSearchPanel from '../../components/CardEditorSearchPanel';
 
 // Make this component client-side only to avoid SSR issues
@@ -166,15 +168,6 @@ const CardEditor = () => {
     router.push(`/admin/card-editor?id=${selectedCard.id}`);
   };
 
-  const rarityOptions = [
-    'common', 'uncommon', 'rare', 'mythic', 'legendary', 
-    'holographic', 'enchanted', 'super rare', 'ultra rare'
-  ];
-
-  const gameOptions = ['MTG', 'Pokemon', 'Lorcana'];
-  
-  const colorOptions = ['White', 'Blue', 'Black', 'Red', 'Green', 'Colorless'];
-
   if (loading) {
     return (
       <AdminProtected>
@@ -245,434 +238,18 @@ const CardEditor = () => {
         {/* Card Editor Form */}
         {card && (
           <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
-            {/* Card Preview */}
             <div className="lg:col-span-1">
-              <div className="sticky top-8">
-                <h2 className="text-xl font-semibold mb-4" style={{ color: 'var(--text-primary)' }}>
-                  Card Preview
-                </h2>
-                <div className="p-6 rounded-xl" style={{ backgroundColor: 'var(--bg-secondary)' }}>
-                  <div className="w-full max-w-xs mx-auto">
-                    <div 
-                      className="w-full rounded-lg overflow-hidden shadow-lg"
-                      style={{ aspectRatio: '5/7' }}
-                    >
-                      {formData.image_url ? (
-                        <img 
-                          src={formData.image_url} 
-                          alt={formData.name}
-                          className="w-full h-full object-cover"
-                          onError={(e) => {
-                            e.target.style.display = 'none';
-                            e.target.nextSibling.style.display = 'flex';
-                          }}
-                        />
-                      ) : null}
-                      <div 
-                        className={`w-full h-full flex items-center justify-center ${formData.image_url ? 'hidden' : 'flex'}`}
-                        style={{ backgroundColor: 'var(--bg-primary)' }}
-                      >
-                        <div className="text-center p-4">
-                          <div className="text-4xl mb-2">🃏</div>
-                          <div className="text-sm font-semibold" style={{ color: 'var(--text-primary)' }}>
-                            {formData.name || 'Card Name'}
-                          </div>
-                          <div className="text-xs" style={{ color: 'var(--text-secondary)' }}>
-                            {formData.set_name || 'Set Name'}
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                  
-                  <div className="mt-4 text-center">
-                    <h3 className="font-bold" style={{ color: 'var(--text-primary)' }}>
-                      {formData.name || 'Card Name'}
-                    </h3>
-                    <p className="text-sm" style={{ color: 'var(--text-secondary)' }}>
-                      {formData.set_name} • {formData.game}
-                    </p>
-                    <p className="text-sm" style={{ color: 'var(--text-secondary)' }}>
-                      {formData.rarity} • {formData.card_type}
-                    </p>
-                    {formData.current_price && (
-                      <p className="text-lg font-bold mt-2 gradient-text-gold">
-                        ${parseFloat(formData.current_price).toFixed(2)}
-                      </p>
-                    )}
-                  </div>
-                </div>
-              </div>
+              <CardEditorPreview formData={formData} />
             </div>
-
-            {/* Editor Form */}
             <div className="lg:col-span-2">
-              <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
-                  onClick={handleSave}
-                  disabled={saving}
-                  className={`px-6 py-3 rounded-xl font-medium transition-all duration-200 ${
-                    saving 
-                      ? 'opacity-50 cursor-not-allowed' 
-                      : 'gradient-bg-purple text-white hover:shadow-lg'
-                  }`}
-                >
-                  {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="p-6 rounded-xl" style={{ backgroundColor: 'var(--bg-secondary)' }}>
-                  <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) => handleInputChange('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) => handleInputChange('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>
-                        {gameOptions.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) => handleInputChange('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) => handleInputChange('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) => handleInputChange('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) => handleInputChange('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>
-                        {rarityOptions.map(rarity => (
-                          <option key={rarity} value={rarity}>{rarity}</option>
-                        ))}
-                      </select>
-                    </div>
-                  </div>
-                </div>
-
-                {/* Game Mechanics */}
-                <div className="p-6 rounded-xl" style={{ backgroundColor: 'var(--bg-secondary)' }}>
-                  <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) => handleInputChange('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) => handleInputChange('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) => handleInputChange('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) => handleInputChange('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) => handleInputChange('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">
-                      {colorOptions.map(color => (
-                        <label key={color} className="flex items-center gap-2 cursor-pointer">
-                          <input
-                            type="checkbox"
-                            checked={formData.colors.includes(color)}
-                            onChange={(e) => handleColorChange(color, e.target.checked)}
-                            className="rounded"
-                          />
-                          <span style={{ color: 'var(--text-primary)' }}>{color}</span>
-                        </label>
-                      ))}
-                    </div>
-                  </div>
-                </div>
-
-                {/* Card Text */}
-                <div className="p-6 rounded-xl" style={{ backgroundColor: 'var(--bg-secondary)' }}>
-                  <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) => handleInputChange('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="p-6 rounded-xl" style={{ backgroundColor: 'var(--bg-secondary)' }}>
-                  <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) => handleInputChange('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) => handleInputChange('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="p-6 rounded-xl" style={{ backgroundColor: 'var(--bg-secondary)' }}>
-                  <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) => handleInputChange('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) => handleInputChange('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>
+              <CardEditorForm
+                formData={formData}
+                onInputChange={handleInputChange}
+                onColorChange={handleColorChange}
+                onSave={handleSave}
+                saving={saving}
+                message={message}
+              />
             </div>
           </div>
         )}