'use client';

import { useEffect } from 'react';
import { useRouter } from 'next/navigation';
import { useDesignStore } from '@/stores/design-store';

export default function Page() {
  const router = useRouter();
  const { createNewDesign, setCurrentDesign } = useDesignStore();

  useEffect(() => {
    // Create a new blank design and redirect to it
    const newDesign = {
      id: Math.random().toString(36).substring(2, 15),
      name: 'New Design',
      description: 'New design',
      type: 'Flow',
      data: { nodes: [], edges: [], viewport: { x: 0, y: 0, zoom: 1 } },
      createdAt: new Date(),
      updatedAt: new Date(),
      lastModified: 'now'
    };

    createNewDesign(newDesign);
    setCurrentDesign(newDesign);
    
    // Redirect to the design page
    router.push(`/design/${newDesign.id}`);
  }, [router, createNewDesign, setCurrentDesign]);

  return (
    <div className="flex items-center justify-center h-screen bg-slate-100">
      <div className="text-center">
        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-slate-600 mx-auto mb-4"></div>
        <p className="text-slate-600">Creating new design...</p>
      </div>
    </div>
  );
}