import { useRouter } from 'next/router';
import dynamic from 'next/dynamic';
import Layout from '../../components/Layout';
import AdminProtected from '../../components/AdminProtected';
import CardEditorView from '../../components/CardEditorView';
import { useCardEditor } from '../../lib/use-card-editor.js';

function CardEditorPage() {
  const router = useRouter();
  const editor = useCardEditor(router);

  if (editor.loading) {
    return (
      <AdminProtected>
        {(user) => (
          <Layout user={user}>
            <div className="flex items-center justify-center min-h-screen">
              <div
                className="animate-spin rounded-full h-32 w-32 border-b-2"
                style={{ borderColor: 'var(--text-accent)' }}
              />
            </div>
          </Layout>
        )}
      </AdminProtected>
    );
  }

  return (
    <AdminProtected>
      {(user) => (
        <Layout user={user}>
          <CardEditorView {...editor} />
        </Layout>
      )}
    </AdminProtected>
  );
}

export default dynamic(() => Promise.resolve(CardEditorPage), { ssr: false });