import React, { useEffect, useState } from 'react';
import { Sparkles, Home, ChevronRight } from 'lucide-react';

interface StepHomepageProps {
    pageId: string | number;
    createMagicPage: boolean;
    onPageChange: (id: string | number) => void;
    onMagicChange: (enabled: boolean) => void;
}

export function StepHomepage({ pageId, createMagicPage, onPageChange, onMagicChange }: StepHomepageProps) {
    const [pages, setPages] = useState<any[]>([]);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        // Fetch pages for dropdown
        const fetchPages = async () => {
            try {
                const res = await fetch((window as any).WNW_CONFIG?.restUrl + '/pages?per_page=100');
                if (res.ok) {
                    const data = await res.json();
                    setPages(data);
                }
            } catch (e) {
                console.error('Failed to fetch pages', e);
            } finally {
                setLoading(false);
            }
        };
        fetchPages();
    }, []);

    return (
        <div className="space-y-6 max-w-2xl mx-auto">
            <div className="text-center">
                <h2 className="text-2xl font-semibold mb-2">Where should customers land?</h2>
                <p className="text-muted-foreground">Choose the entry point for your store.</p>
            </div>

            <div className="grid gap-6">
                {/* Option A: Magic Create */}
                <button
                    onClick={() => {
                        onMagicChange(true);
                        onPageChange('');
                    }}
                    className={`relative flex items-center gap-4 p-6 rounded-xl border-2 transition-all hover:bg-accent/50 text-left ${createMagicPage ? 'border-primary bg-accent/20' : 'border-border'
                        }`}
                >
                    <div className={`p-3 rounded-lg ${createMagicPage ? 'bg-primary text-primary-foreground' : 'bg-muted'}`}>
                        <Sparkles className="w-6 h-6" />
                    </div>
                    <div className="flex-1">
                        <h3 className="font-semibold text-lg">Auto-create "Shop Home"</h3>
                        <p className="text-sm text-muted-foreground">We'll generate a beautiful homepage for you and set it up automatically.</p>
                    </div>
                    {createMagicPage && <div className="w-4 h-4 rounded-full bg-primary" />}
                </button>

                <div className="relative">
                    <div className="absolute inset-0 flex items-center">
                        <span className="w-full border-t" />
                    </div>
                    <div className="relative flex justify-center text-xs uppercase">
                        <span className="bg-background px-2 text-muted-foreground">Or select existing</span>
                    </div>
                </div>

                {/* Option B: Select Existing */}
                <div className={`p-6 rounded-xl border-2 transition-all ${!createMagicPage && pageId ? 'border-primary bg-accent/20' : 'border-border'
                    }`}>
                    <div className="flex items-center gap-4 mb-4">
                        <div className={`p-3 rounded-lg ${!createMagicPage && pageId ? 'bg-primary text-primary-foreground' : 'bg-muted'}`}>
                            <Home className="w-6 h-6" />
                        </div>
                        <div>
                            <h3 className="font-semibold text-lg">Use an existing page</h3>
                            <p className="text-sm text-muted-foreground">Select a page you've already created.</p>
                        </div>
                        {!createMagicPage && pageId && <div className="w-4 h-4 rounded-full bg-primary ml-auto" />}
                    </div>

                    <select
                        className="w-full h-10 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
                        value={pageId}
                        onChange={(e) => {
                            onMagicChange(false);
                            onPageChange(e.target.value);
                        }}
                    >
                        <option value="">Select a page...</option>
                        {pages.map(p => (
                            <option key={p.id} value={p.id}>
                                {p.title?.rendered || p.title || p.post_title || `Page #${p.id}`}
                            </option>
                        ))}
                    </select>
                </div>
            </div>
        </div>
    );
}
