src/components/preparation-screen.tsx

"use client";

import { useState, useEffect } from 'react';
import { Button } from './ui/button';
import { Loader2, RefreshCw } from 'lucide-react';
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from './ui/card';
import { Logo } from './logo';
import { useSettings } from '@/contexts/settings-context';

interface PreparationScreenProps {
    onPrepared: () => void;
}

export function PreparationScreen({ onPrepared }: PreparationScreenProps) {
    const [step, setStep] = useState<'preparing' | 'restarting'>('preparing');
    const { t } = useSettings();

    useEffect(() => {
        const timer = setTimeout(() => {
            setStep('restarting');
        }, 3000); // Simulate a 3-second preparation time

        return () => clearTimeout(timer);
    }, []);

    const handleRestart = () => {
        onPrepared();
    };

    return (
        <div className="min-h-svh flex items-center justify-center bg-background p-4">
            <Card className="w-full max-w-sm text-center">
                <CardHeader>
                    <Logo />
                    {step === 'preparing' ? (
                        <>
                            <CardTitle>{t('preparingEverything')}</CardTitle>
                            <CardDescription>{t('pleaseWait')}</CardDescription>
                        </>
                    ) : (
                        <>
                            <CardTitle>{t('restartApp')}</CardTitle>
                            <CardDescription>{t('pressToRestart')}</CardDescription>
                        </>
                    )}
                </CardHeader>
                <CardContent>
                    {step === 'preparing' && (
                        <div className="flex justify-center items-center p-8">
                            <Loader2 className="h-12 w-12 animate-spin text-primary" />
                        </div>
                    )}
                </CardContent>
                <CardFooter>
                    {step === 'restarting' && (
                        <Button onClick={handleRestart} className="w-full btn-gradient">
                            <RefreshCw className="mr-2 h-4 w-4" />
                            {t('restartApp')}
                        </Button>
                    )}
                </CardFooter>
            </Card>
        </div>
    );
}