import React, { useState, useEffect, useCallback } from 'react';
import { Head, useForm, usePage, router } from '@inertiajs/react';
import { useTranslation } from 'react-i18next';
import { Elements } from '@stripe/react-stripe-js';
import { loadStripe } from '@stripe/stripe-js';
import { Steps } from '@/components/ui/Steps'; // Correct casing for Shadcn Steps
import { Check } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Progress } from '@/components/ui/progress';
import { Loader2 } from 'lucide-react';
import MarketingLayout from '@/layouts/marketing/MarketingLayout';
import RegisterForm from '../auth/RegisterForm'; // Extract Register form to separate component
import LoginForm from '../auth/LoginForm'; // Extract Login form
import PaymentForm from './PaymentForm'; // New component for Stripe payment
import SuccessStep from './SuccessStep'; // New component for success

interface Package {
  id: number;
  name: string;
  description: string;
  price: number;
  features: string[];
  type?: 'endcustomer' | 'reseller';
  trial_days?: number;
  // Add other fields as needed
}

interface UserData {
  id: number;
  email: string;
  pending_purchase?: boolean;
}

interface PurchaseWizardProps {
  package: Package;
  stripePublishableKey: string;
  privacyHtml: string;
}

const steps = [
  { id: 'package', title: 'Paket auswählen', description: 'Bestätigen Sie Ihr gewähltes Paket' },
  { id: 'auth', title: 'Anmelden oder Registrieren', description: 'Erstellen oder melden Sie sich an' },
  { id: 'payment', title: 'Zahlung', description: 'Sichern Sie Ihr Paket ab' },
  { id: 'success', title: 'Erfolg', description: 'Willkommen!' },
];

export default function PurchaseWizard({ package: initialPackage, stripePublishableKey, privacyHtml }: PurchaseWizardProps) {
  const STORAGE_KEY = 'fotospiel_wizard_state';
  const STORAGE_TTL = 30 * 60 * 1000; // 30 minutes in ms

  const [currentStep, setCurrentStep] = useState(0);
  const [isAuthenticated, setIsAuthenticated] = useState(false);
  const [authCompleted, setAuthCompleted] = useState(false);
  const [authType, setAuthType] = useState<'register' | 'login'>('register'); // Toggle for auth step
  const [wizardData, setWizardData] = useState<{ package: Package; user: UserData | null }>({ package: initialPackage, user: null });
  const { t } = useTranslation(['marketing', 'auth']);
  const { props } = usePage();
  const { auth } = props as any;

  // Load state from sessionStorage on mount
  useEffect(() => {
    const saved = sessionStorage.getItem(STORAGE_KEY);
    if (saved) {
      try {
        const parsed = JSON.parse(saved);
        const { currentStep: savedCurrentStep, wizardData: savedWizardData, isAuthenticated: savedIsAuthenticated, authType: savedAuthType, timestamp } = parsed;
        if (Date.now() - timestamp < STORAGE_TTL && savedWizardData?.package?.id === initialPackage.id) {
          setCurrentStep(savedCurrentStep || 0);
          setWizardData(savedWizardData || { package: initialPackage, user: null });
          setIsAuthenticated(savedIsAuthenticated || false);
          setAuthType(savedAuthType || 'register');
          // If in payment step and pending purchase, reload client_secret if needed
          if ((savedCurrentStep || 0) === 2 && savedWizardData?.user?.pending_purchase) {
            // Optional: router.reload() or API call to refresh payment intent
          }
        } else {
          sessionStorage.removeItem(STORAGE_KEY);
        }
      } catch (e) {
        console.error('Failed to load wizard state:', e);
        sessionStorage.removeItem(STORAGE_KEY);
      }
    }
  }, [initialPackage.id]);

  // Save state to sessionStorage on changes
  const saveState = useCallback(() => {
    const state = {
      currentStep,
      wizardData: {
        package: wizardData.package,
        user: wizardData.user ? { id: wizardData.user.id, email: wizardData.user.email, pending_purchase: wizardData.user.pending_purchase } : null,
      },
      isAuthenticated,
      authType,
      timestamp: Date.now(),
    };
    sessionStorage.setItem(STORAGE_KEY, JSON.stringify(state));
  }, [currentStep, wizardData, isAuthenticated, authType]);

  useEffect(() => {
    saveState();
  }, [saveState]);

  // Cleanup on unmount or success
  useEffect(() => {
    return () => {
      if (currentStep === 3) {
        sessionStorage.removeItem(STORAGE_KEY);
      }
    };
  }, [currentStep]);

  useEffect(() => {
    if (auth.user) {
      setIsAuthenticated(true);
      // Do not skip step, handle in render
      // Update wizardData with auth.user if pending_purchase
      if (auth.user.pending_purchase) {
        setWizardData(prev => ({ ...prev, user: auth.user }));
      }
    }
  }, [auth]);

  const stripePromise = loadStripe(stripePublishableKey);

  const nextStep = () => {
    if (currentStep < steps.length - 1) {
      setCurrentStep((prev) => prev + 1);
    }
  };

  const prevStep = () => {
    if (currentStep > 0) {
      setCurrentStep((prev) => prev - 1);
    }
  };

  const handleAuthSuccess = (userData: any) => {
    setWizardData((prev) => ({ ...prev, user: userData }));
    setIsAuthenticated(true);
    setAuthCompleted(true);
    // Show success message briefly then proceed
    setTimeout(() => {
      nextStep();
      setAuthCompleted(false);
    }, 2000);
  };

  const handlePaymentSuccess = () => {
    // Call API to assign package
    router.post('/api/purchase/complete', { package_id: initialPackage.id }, {
      onSuccess: () => nextStep(),
    });
  };

  const renderStepContent = () => {
    switch (steps[currentStep].id) {
      case 'package':
        return (
          <Card>
            <CardHeader>
              <CardTitle>{initialPackage.name}</CardTitle>
              <CardDescription>{initialPackage.description}</CardDescription>
            </CardHeader>
            <CardContent>
              <p>Preis: {initialPackage.price === 0 ? 'Kostenlos' : `${initialPackage.price} €`}</p>
              <ul>
                {initialPackage.features.map((feature, index) => (
                  <li key={index}>{feature}</li>
                ))}
              </ul>
              <Button onClick={nextStep} className="w-full mt-4">Weiter</Button>
            </CardContent>
          </Card>
        );
      case 'auth':
        if (isAuthenticated) {
          if (authCompleted) {
            return (
              <div className="text-center py-8">
                <h2 className="text-2xl font-bold mb-4">{t('auth.login_success')}</h2>
                <p className="text-gray-600 mb-6">Sie sind nun eingeloggt und werden weitergeleitet...</p>
                <Loader2 className="h-6 w-6 animate-spin mx-auto" />
              </div>
            );
          } else {
            return (
              <div className="text-center py-8">
                <h2 className="text-2xl font-bold mb-4">{t('auth.already_logged_in')}</h2>
                <Button onClick={nextStep} className="w-full">
                  Weiter zum Zahlungsschritt
                </Button>
              </div>
            );
          }
        }
        return (
          <div>
            <div className="flex justify-center mb-4">
              <Button
                variant={authType === 'register' ? 'default' : 'outline'}
                onClick={() => setAuthType('register')}
              >
                Registrieren
              </Button>
              <Button
                variant={authType === 'login' ? 'default' : 'outline'}
                onClick={() => setAuthType('login')}
                className="ml-2"
              >
                Anmelden
              </Button>
            </div>
            {authType === 'register' ? (
              <RegisterForm onSuccess={handleAuthSuccess} packageId={initialPackage.id} privacyHtml={privacyHtml} />
            ) : (
              <LoginForm onSuccess={handleAuthSuccess} />
            )}
          </div>
        );
      case 'payment':
        if (initialPackage.price === 0) {
          // Skip for free, assign directly
          router.post('/api/purchase/free', { package_id: initialPackage.id });
          return <div>Free package assigned! Redirecting...</div>;
        }
        return (
          <Elements stripe={stripePromise}>
            <PaymentForm packageId={initialPackage.id} packagePrice={initialPackage.price} onSuccess={handlePaymentSuccess} />
          </Elements>
        );
      case 'success':
        return <SuccessStep package={initialPackage} />;
      default:
        return null;
    }
  };

  return (
    <MarketingLayout title="Kauf-Wizard">
      <Head title="Kauf-Wizard" />
      <div className="min-h-screen bg-gray-50 py-12">
        <div className="max-w-2xl mx-auto px-4">
          <Progress value={(currentStep / (steps.length - 1)) * 100} className="mb-6" />
          <Steps steps={steps} currentStep={currentStep} />
          {renderStepContent()}
          {currentStep > 0 && currentStep < 3 && (
            <div className="flex justify-between mt-6">
              <Button variant="outline" onClick={prevStep}>Zurück</Button>
              {currentStep < 3 && <Button onClick={nextStep}>Weiter</Button>}
            </div>
          )}
        </div>
      </div>
    </MarketingLayout>
  );
}