import { useRouter } from 'next/navigation';
import React, { useState } from 'react'
import { ConfirmationModal } from './ConfirmationModal';
import { updateAdmissionStatus } from '../admission-api';

export const CongratulationsCard = ({ email, accademic_details }: { email: string | null, accademic_details: Record<string, unknown> }) => {
    const router = useRouter();
    const [isLoading, setIsLoading] = useState(false);
    const [showConfirmation, setShowConfirmation] = useState(false);
    const [error, setError] = useState<string | null>(null);
    const [status, setStatus] = useState<string>('IN_PROGRESS');
    const { program, active_session, reference, admission_date } = accademic_details;

    const handleConfirmAcknowledgment = async () => {
        if (!email) {
            setError('Email is required to proceed.');
            return;
        }

        setIsLoading(true);
        setError(null);

        try {
            // Make API call to update admission status
            const result = await updateAdmissionStatus({ status: 'ADMITTED', email: email });

            if (result.success) {
                setStatus('ADMITTED');
                setShowConfirmation(false);

                // Redirect to success page after 2 seconds
                setTimeout(() => {
                    router.push('/admission/success');
                }, 2000);
            } else {
                throw new Error(result.error || 'Failed to update admission status');
            }
        } catch (err) {
            setError(err instanceof Error ? err.message : 'An unexpected error occurred');
            console.error('Error updating admission status:', err);
        } finally {
            setIsLoading(false);
        }
    };

    const formatDate = (dateString: string | undefined | null): string => {
        if (!dateString) {
            // Return a consistent format for fallback dates
            const date = new Date();
            return date.toISOString().split('T')[0]; // YYYY-MM-DD format
        }

        const date = new Date(dateString);
        return date.toISOString().split('T')[0]; // Always returns YYYY-MM-DD
    };

    return (
        <>
            <div className="bg-white rounded-2xl shadow-xl p-8 mb-8">
                <div className="text-center mb-8">
                    <div className="inline-flex items-center justify-center w-20 h-20 bg-green-100 rounded-full mb-6">
                        <svg className="w-10 h-10 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
                        </svg>
                    </div>

                    <h2 className="text-3xl font-bold text-gray-900 mb-3">
                        Congratulations! 🎉
                    </h2>

                    <p className="text-xl text-gray-600 mb-6">
                        You have been selected for admission to our university!
                    </p>
                </div>

                {/* Admission Details */}
                <div className="bg-blue-50 rounded-xl p-6 mb-8">
                    <h3 className="text-lg font-semibold text-gray-900 mb-4">Admission Details</h3>
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <p className="text-sm text-gray-500">Program</p>
                            <p className="font-medium">{program as string ?? 'Bachelor of Computer Science'}</p>
                        </div>
                        <div>
                            <p className="text-sm text-gray-500">Intake Semester</p>
                            <p className="font-medium">{active_session as string ?? '2025/2026'}</p>
                        </div>
                        <div>
                            <p className="text-sm text-gray-500">Student ID</p>
                            <p className="font-medium">{reference as string ?? 'STU20240001'}</p>
                        </div>
                        <div>
                            <p className="text-sm text-gray-500">Admission Date</p>
                            <p className="font-medium">
                                {formatDate(admission_date as string | undefined)}
                            </p>
                        </div>
                    </div>
                </div>

                {/* Next Steps */}
                <div className="mb-8">
                    <h3 className="text-lg font-semibold text-gray-900 mb-4">Next Steps</h3>
                    <ul className="space-y-3">
                        <li className="flex items-start">
                            <div className="flex-shrink-0 mt-1">
                                <div className="w-6 h-6 rounded-full bg-blue-100 flex items-center justify-center">
                                    <span className="text-sm font-semibold text-blue-600">1</span>
                                </div>
                            </div>
                            <p className="ml-3 text-gray-600">Accept your admission offer by clicking the button below</p>
                        </li>
                        <li className="flex items-start">
                            <div className="flex-shrink-0 mt-1">
                                <div className="w-6 h-6 rounded-full bg-blue-100 flex items-center justify-center">
                                    <span className="text-sm font-semibold text-blue-600">2</span>
                                </div>
                            </div>
                            <p className="ml-3 text-gray-600">Submit required documents (if not already done) for verification</p>
                        </li>
                        <li className="flex items-start">
                            <div className="flex-shrink-0 mt-1">
                                <div className="w-6 h-6 rounded-full bg-blue-100 flex items-center justify-center">
                                    <span className="text-sm font-semibold text-blue-600">3</span>
                                </div>
                            </div>
                            <p className="ml-3 text-gray-600">Proceed to pay your acceptance fee</p>
                        </li>
                        <li className="flex items-start">
                            <div className="flex-shrink-0 mt-1">
                                <div className="w-6 h-6 rounded-full bg-blue-100 flex items-center justify-center">
                                    <span className="text-sm font-semibold text-blue-600">4</span>
                                </div>
                            </div>
                            <p className="ml-3 text-gray-600">Proceed to pay your tuition fee (to recieve your REG NUMBER)</p>
                        </li>
                    </ul>
                </div>

                {/* Action Button */}
                <div className="text-center">
                    <button
                        onClick={() => setShowConfirmation(true)}
                        disabled={isLoading || status === 'ADMITTED'}
                        className={`
                  inline-flex items-center px-8 py-4 text-lg font-semibold rounded-lg transition-all
                  ${status === 'ADMITTED'
                                ? 'bg-green-500 text-white cursor-not-allowed'
                                : 'bg-gradient-to-r from-blue-600 to-indigo-600 text-white hover:from-blue-700 hover:to-indigo-700'
                            }
                  disabled:opacity-50 disabled:cursor-not-allowed
                  shadow-lg hover:shadow-xl
                `}
                    >
                        {isLoading ? (
                            <>
                                <svg className="animate-spin -ml-1 mr-3 h-5 w-5 text-white" fill="none" viewBox="0 0 24 24">
                                    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
                                    <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
                                </svg>
                                Processing...
                            </>
                        ) : status === 'ADMITTED' ? (
                            <>
                                <svg className="w-6 h-6 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
                                </svg>
                                Admission Accepted ✓
                            </>
                        ) : (
                            'Accept Admission Offer'
                        )}
                    </button>

                    {error && (
                        <div className="mt-4 p-4 bg-red-50 border border-red-200 rounded-lg">
                            <p className="text-red-600 font-medium">Error: {error}</p>
                            <button
                                onClick={() => setError(null)}
                                className="mt-2 text-sm text-red-500 hover:text-red-700"
                            >
                                Dismiss
                            </button>
                        </div>
                    )}

                    <p className="mt-4 text-sm text-gray-500">
                        By accepting this offer, you agree to the terms and conditions of admission
                    </p>
                </div>
            </div>

            {/* Confirmation Modal */}
            {
                showConfirmation && (
                    <ConfirmationModal
                        isOpen={showConfirmation}
                        onClose={() => setShowConfirmation(false)}
                        onConfirm={handleConfirmAcknowledgment}
                        isLoading={isLoading}
                    />
                )
            }
        </>
    )
}