import CardEditorForm from './CardEditorForm';
import CardEditorPreview from './CardEditorPreview';
import CardEditorSearchPanel from './CardEditorSearchPanel';

export default function CardEditorView({
  card,
  formData,
  handleColorChange,
  handleInputChange,
  handleSave,
  message,
  onSearchQueryChange,
  router,
  saving,
  searchLoading,
  searchQuery,
  searchResults,
  selectCard,
  showEmptyState,
}) {
  return (
    <div className="container mx-auto px-6 py-8">
      <div className="mb-8 p-4 rounded-xl" style={{ backgroundColor: 'var(--bg-secondary)' }}>
        <div className="flex items-center justify-between">
          <h1 className="text-2xl font-bold" style={{ color: 'var(--text-primary)' }}>
            Admin Tools
          </h1>
          <div className="flex gap-4">
            <button
              type="button"
              onClick={() => router.push('/admin/card-editor')}
              className="px-4 py-2 rounded-lg font-medium gradient-bg-purple text-white"
            >
              🖊️ Card Editor
            </button>
            <button
              type="button"
              onClick={() => router.push('/admin/card-import')}
              className="px-4 py-2 rounded-lg font-medium transition-all duration-200 border"
              style={{
                backgroundColor: 'var(--bg-primary)',
                borderColor: 'var(--border)',
                color: 'var(--text-primary)',
              }}
            >
              📥 Card Import
            </button>
          </div>
        </div>
      </div>

      <div className="mb-8">
        <h2 className="text-3xl font-bold mb-2" style={{ color: 'var(--text-primary)' }}>
          Admin Card Editor
        </h2>
        <p style={{ color: 'var(--text-secondary)' }}>
          Search for a card to edit its details, or continue editing the selected card.
        </p>
      </div>

      <CardEditorSearchPanel
        searchQuery={searchQuery}
        onSearchQueryChange={onSearchQueryChange}
        searchLoading={searchLoading}
        searchResults={searchResults}
        onSelectCard={selectCard}
      />

      {card && (
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
          <div className="lg:col-span-1">
            <CardEditorPreview formData={formData} />
          </div>
          <div className="lg:col-span-2">
            <CardEditorForm
              formData={formData}
              onInputChange={handleInputChange}
              onColorChange={handleColorChange}
              onSave={handleSave}
              saving={saving}
              message={message}
            />
          </div>
        </div>
      )}

      {showEmptyState && (
        <div className="text-center py-12">
          <div className="text-6xl mb-4">🔍</div>
          <h2 className="text-2xl font-bold mb-2" style={{ color: 'var(--text-primary)' }}>
            Search for a Card to Edit
          </h2>
          <p style={{ color: 'var(--text-secondary)' }}>
            Use the search box above to find a card you want to edit.
          </p>
        </div>
      )}
    </div>
  );
}