import CardEditorForm from './CardEditorForm';
import CardEditorPreview from './CardEditorPreview';
import CardEditorSearchPanel from './CardEditorSearchPanel';
import { Button } from './ui';

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="glass-panel mb-8 p-4 rounded-xl">
        <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
              variant="primary"
              onClick={() => router.push('/admin/card-editor')}
              leadingIcon={<span aria-hidden="true">🖊️</span>}
            >
              Card Editor
            </Button>
            <Button
              variant="secondary"
              onClick={() => router.push('/admin/card-import')}
              leadingIcon={<span aria-hidden="true">📥</span>}
            >
              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" aria-hidden="true">🔍</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>
  );
}