import React from 'react';
import { useLocation, useNavigate } from 'react-router-dom';
import { CheckCircle, FileText, Sparkles } from 'lucide-react';

const QuestionnaireComplete: React.FC = () => {
    const location = useLocation();
    const navigate = useNavigate();

    const {
        employeeName = 'Employee',
        reportGenerated = false,
        message = 'Thank you for completing the questionnaire!'
    } = location.state || {};

    return (
        <div className="min-h-screen bg-[--background-primary] flex items-center justify-center p-4">
            <div className="max-w-md w-full bg-[--background-secondary] rounded-lg shadow-lg p-8 text-center">
                <div className="flex justify-center mb-6">
                    {reportGenerated ? (
                        <div className="relative">
                            <CheckCircle className="w-16 h-16 text-green-500" />
                            <Sparkles className="w-6 h-6 text-yellow-400 absolute -top-1 -right-1" />
                        </div>
                    ) : (
                        <CheckCircle className="w-16 h-16 text-green-500" />
                    )}
                </div>

                <h1 className="text-2xl font-bold text-[--text-primary] mb-4">
                    Questionnaire Complete!
                </h1>

                <p className="text-[--text-secondary] mb-6">
                    {message}
                </p>

                {reportGenerated && (
                    <div className="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4 mb-6">
                        <div className="flex items-center justify-center mb-2">
                            <FileText className="w-5 h-5 text-blue-600 mr-2" />
                            <span className="text-sm font-medium text-blue-600">AI Report Generated</span>
                        </div>
                        <p className="text-sm text-blue-600 dark:text-blue-300">
                            Your personalized performance report has been created using AI analysis of your responses.
                        </p>
                    </div>
                )}

                <div className="space-y-3">
                    <button
                        onClick={() => navigate('/reports')}
                        className="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-lg transition-colors"
                    >
                        {reportGenerated ? 'View Your Report' : 'Go to Dashboard'}
                    </button>

                    <button
                        onClick={() => navigate('/')}
                        className="w-full bg-gray-600 hover:bg-gray-700 text-white font-medium py-2 px-4 rounded-lg transition-colors"
                    >
                        Return to Home
                    </button>
                </div>
            </div>
        </div>
    );
};

export default QuestionnaireComplete;