"use client"; import { useEffect, useState } from "react"; import { useRouter } from "next/navigation"; import { toast } from "sonner"; export default function BuilderPage() { const [targetUrl, setTargetUrl] = useState(""); const [selectedStyle, setSelectedStyle] = useState("modern"); const [isLoading, setIsLoading] = useState(true); const [previewUrl, setPreviewUrl] = useState(""); const [progress, setProgress] = useState("Initializing..."); const [generatedCode, setGeneratedCode] = useState(""); const router = useRouter(); useEffect(() => { // Get the URL and style from sessionStorage const url = sessionStorage.getItem('targetUrl'); const style = sessionStorage.getItem('selectedStyle'); if (!url) { router.push('/'); return; } setTargetUrl(url); setSelectedStyle(style || "modern"); // Start the website generation process generateWebsite(url, style || "modern"); // eslint-disable-next-line react-hooks/exhaustive-deps }, [router]); const generateWebsite = async (url: string, style: string) => { try { setProgress("Analyzing website..."); // For demo purposes, we'll generate a simple HTML template // In production, this would call the actual scraping and generation APIs const mockGeneratedCode = ` ${style} Website - Reimagined

Welcome to Your ${style === 'modern' ? 'Modern' : style === 'playful' ? 'Playful' : style === 'professional' ? 'Professional' : 'Artistic'} Website

Reimagined from ${url}

Get Started

Fast

Lightning-fast performance optimized for modern web standards.

Responsive

Looks great on all devices, from mobile to desktop.

Beautiful

Stunning design that captures attention and drives engagement.

`; setGeneratedCode(mockGeneratedCode); // Create a blob URL for the preview const blob = new Blob([mockGeneratedCode], { type: 'text/html' }); const blobUrl = URL.createObjectURL(blob); setPreviewUrl(blobUrl); setProgress("Website ready!"); setIsLoading(false); // Show success message toast.success("Website generated successfully!"); } catch (error) { console.error("Error generating website:", error); toast.error("Failed to generate website. Please try again."); setProgress("Error occurred"); setTimeout(() => router.push('/'), 2000); } }; const downloadCode = () => { const blob = new Blob([generatedCode], { type: 'text/html' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'website.html'; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); toast.success("Code downloaded!"); }; return (
{/* Sidebar */}

Building Your Website

Target URL
{targetUrl}
Style
{selectedStyle}
Status
{progress}
{!isLoading && ( )}
{/* Preview */}
{isLoading ? (

{progress}

) : ( previewUrl && (