import React, { useState } from 'react';
import { apiFetch } from '../hooks/useApi';

export default function Onboarding() {
    const [step, setStep] = useState(1);
    const [engineMode, setEngineMode] = useState('standalone');
    const [createTestPlan, setCreateTestPlan] = useState(true);
    const [telemetry, setTelemetry] = useState(true);
    const [saving, setSaving] = useState(false);

    const handleComplete = async () => {
        setSaving(true);
        try {
            await apiFetch('settings/onboarding-complete', {
                method: 'POST',
                body: JSON.stringify({
                    engine_mode: engineMode,
                    create_test_plan: createTestPlan,
                    telemetry: telemetry
                })
            });
            window.location.reload();
        } catch {
            alert('Failed to complete onboarding. Check console.');
            setSaving(false);
        }
    };

    return (
        <div className="min-h-[80vh] flex items-center justify-center bg-gray-50/50 p-6">
            <div className="bg-white border rounded-2xl shadow-xl max-w-2xl w-full p-10 relative overflow-hidden">
                <div className="absolute top-0 left-0 w-full h-2 bg-gradient-to-r from-blue-600 to-cyan-400"></div>
                <div className="mb-8 text-center">
                    <h1 className="text-3xl font-extrabold text-gray-900 tracking-tight">Welcome to Invizo Subscriptions</h1>
                    <p className="text-gray-500 mt-2">Let's get your recurring revenue engine configured in 60 seconds.</p>
                </div>

                {step === 1 && (
                    <div className="space-y-6 animate-in slide-in-from-bottom-4 fade-in duration-500">
                        <div className="text-center mb-6"><h2 className="text-xl font-bold">1. Choose Operating Mode</h2><p className="text-sm text-gray-500">How do you want to sell subscriptions?</p></div>
                        <div className="grid md:grid-cols-2 gap-4">
                            <label className={`cursor-pointer border-2 rounded-xl p-6 transition-all relative overflow-hidden ${engineMode === 'standalone' ? 'border-primary bg-blue-50/50' : 'border-gray-200 hover:border-gray-300'}`}>
                                <div className="flex items-start gap-3">
                                    <div className="flex-shrink-0 mt-1">
                                        <input type="radio" className="w-5 h-5 text-primary border-gray-300 focus:ring-primary" checked={engineMode === 'standalone'} onChange={() => setEngineMode('standalone')} />
                                    </div>
                                    <div>
                                        <div className="font-bold text-lg mb-2 flex items-center gap-2">⚡ Standalone</div>
                                        <p className="text-sm text-gray-600">Lightweight. Uses our native Stripe Elements checkout shortcode. Bypasses WooCommerce.</p>
                                    </div>
                                </div>
                            </label>
                            <label className={`cursor-pointer border-2 rounded-xl p-6 transition-all relative overflow-hidden ${engineMode === 'woocommerce' ? 'border-primary bg-blue-50/50' : 'border-gray-200 hover:border-gray-300'}`}>
                                <div className="flex items-start gap-3">
                                    <div className="flex-shrink-0 mt-1">
                                        <input type="radio" className="w-5 h-5 text-primary border-gray-300 focus:ring-primary" checked={engineMode === 'woocommerce'} onChange={() => setEngineMode('woocommerce')} />
                                    </div>
                                    <div>
                                        <div className="font-bold text-lg mb-2 flex items-center gap-2">🛒 WooCommerce</div>
                                        <p className="text-sm text-gray-600">Deep integration. Subscriptions are Native Woo products sold through standard WooCart.</p>
                                    </div>
                                </div>
                            </label>
                        </div>
                        <div className="flex justify-end mt-8"><button onClick={() => setStep(2)} className="bg-blue-600 hover:bg-blue-500 text-white px-6 py-3 rounded-lg font-bold shadow-[0_0_15px_rgba(59,130,246,0.6)] hover:shadow-[0_0_25px_rgba(59,130,246,0.8)] transition-all">Next Step &rarr;</button></div>
                    </div>
                )}

                {step === 2 && (
                    <div className="space-y-6 animate-in slide-in-from-right-8 fade-in duration-500">
                        <div className="text-center mb-6"><h2 className="text-xl font-bold">2. Provision Sandbox</h2><p className="text-sm text-gray-500">Need some test data to play with?</p></div>
                        <label className="flex items-start gap-4 p-6 border rounded-xl hover:bg-gray-50 cursor-pointer transition-colors max-w-lg mx-auto">
                            <input type="checkbox" className="mt-1 w-5 h-5 rounded border-gray-300 text-primary focus:ring-primary" checked={createTestPlan} onChange={(e) => setCreateTestPlan(e.target.checked)} />
                            <div>
                                <h3 className="font-bold">Generate "$10/mo Pro Plan"</h3>
                                <p className="text-sm text-gray-600 mt-1">We'll automatically create a dummy subscription plan so you can test the frontend immediately.</p>
                            </div>
                        </label>
                        <div className="flex justify-between mt-8">
                            <button onClick={() => setStep(1)} className="px-6 py-3 text-gray-500 font-medium hover:text-gray-900 transition-colors">&larr; Back</button>
                            <button onClick={() => setStep(3)} className="bg-blue-600 hover:bg-blue-500 text-white px-6 py-3 rounded-lg font-bold shadow-[0_0_15px_rgba(59,130,246,0.6)] hover:shadow-[0_0_25px_rgba(59,130,246,0.8)] transition-all">Next Step &rarr;</button>
                        </div>
                    </div>
                )}

                {step === 3 && (
                    <div className="space-y-6 animate-in slide-in-from-right-8 fade-in duration-500">
                        <div className="text-center mb-6"><h2 className="text-xl font-bold">3. Telemetry & Analytics</h2><p className="text-sm text-gray-500">Help us make the plugin better.</p></div>
                        <label className="flex items-start gap-4 p-6 border rounded-xl hover:bg-gray-50 cursor-pointer transition-colors max-w-lg mx-auto">
                            <input type="checkbox" className="mt-1 w-5 h-5 rounded border-gray-300 text-primary focus:ring-primary" checked={telemetry} onChange={(e) => setTelemetry(e.target.checked)} />
                            <div>
                                <h3 className="font-bold">Allow anonymous usage tracking</h3>
                                <p className="text-sm text-gray-600 mt-1">Opt-in to occasionally send anonymous feature usage diagnostic data and receive crucial security updates via email.</p>
                            </div>
                        </label>
                        <div className="flex justify-between mt-8">
                            <button onClick={() => setStep(2)} className="px-6 py-3 text-gray-500 font-medium hover:text-gray-900 transition-colors">&larr; Back</button>
                            <button onClick={handleComplete} disabled={saving} className="bg-green-500 hover:bg-green-400 text-white px-8 py-3 rounded-lg font-bold shadow-[0_0_15px_rgba(34,197,94,0.6)] hover:shadow-[0_0_25px_rgba(34,197,94,0.8)] transition-all flex items-center justify-center min-w-[150px]">
                                {saving ? <span className="animate-pulse">Building...</span> : 'Complete Setup ✅'}
                            </button>
                        </div>
                    </div>
                )}
            </div>
        </div>
    );
}
