import React from 'react';

interface SubscriptionData {
    id: number;
    status: string;
    billing_period: string;
    billing_interval: number;
    start_date: string;
    next_payment_date: string | null;
    end_date: string | null;
}

interface Props {
    subscription: SubscriptionData;
}

const SubscriptionTimeline: React.FC<Props> = ({ subscription }) => {
    const formatDate = (dateString: string | null) => {
        if (!dateString) return 'N/A';
        return new Date(dateString).toLocaleDateString(undefined, {
            year: 'numeric',
            month: 'short',
            day: 'numeric'
        });
    };

    const _isMonth = subscription.billing_period === 'month';
    const intervalLabel = `${subscription.billing_interval} ${subscription.billing_period}${subscription.billing_interval > 1 ? 's' : ''}`;

    return (
        <div className="bg-white rounded-lg shadow p-6 mb-6">
            <h2 className="text-xl font-semibold mb-6">Subscription Timeline</h2>

            <div className="relative">
                {/* Connecting Line */}
                <div className="absolute top-4 left-4 right-4 h-0.5 bg-gray-200" aria-hidden="true" />

                <div className="relative flex justify-between">
                    {/* Start Node */}
                    <div className="flex flex-col items-center">
                        <div className="w-8 h-8 rounded-full bg-green-100 border-2 border-green-500 flex items-center justify-center z-10 shrink-0">
                            <div className="w-2.5 h-2.5 rounded-full bg-green-500" />
                        </div>
                        <div className="mt-3 text-center">
                            <div className="text-sm font-medium text-gray-900">Started</div>
                            <div className="text-xs text-gray-500">{formatDate(subscription.start_date)}</div>
                        </div>
                    </div>

                    {/* Middle Info (Interval) */}
                    <div className="hidden sm:flex flex-col items-center justify-start pt-1">
                        <div className="bg-white px-2 text-xs text-gray-400 font-medium uppercase tracking-wider">
                            Every {intervalLabel}
                        </div>
                    </div>

                    {/* Current Payment (Active/Due) Node */}
                    <div className="flex flex-col items-center">
                        <div className="relative w-8 h-8 rounded-full bg-blue-100 border-2 border-blue-600 flex items-center justify-center z-10 shrink-0 animate-pulse-ring">
                            {/* Pulse Effect */}
                            <span className="absolute inline-flex h-full w-full rounded-full bg-blue-400 opacity-20 animate-ping"></span>
                            <div className="w-2.5 h-2.5 rounded-full bg-blue-600" />
                        </div>
                        <div className="mt-3 text-center">
                            <div className="text-sm font-medium text-blue-700 font-bold">Payment Due</div>
                            <div className="text-xs text-blue-600 font-medium">Now</div>
                        </div>
                    </div>

                    {/* Next Future Node */}
                    <div className="flex flex-col items-center opacity-60">
                        <div className="w-8 h-8 rounded-full bg-gray-100 border-2 border-gray-300 flex items-center justify-center z-10 shrink-0">
                            <div className="w-2.5 h-2.5 rounded-full bg-gray-300" />
                        </div>
                        <div className="mt-3 text-center">
                            <div className="text-sm font-medium text-gray-500">Next Renewal</div>
                            <div className="text-xs text-gray-400">{subscription.next_payment_date ? formatDate(subscription.next_payment_date) : '...'}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default SubscriptionTimeline;
