/**
 * Order Timeline - Status change history
 */

import { __ } from '@wordpress/i18n';
import { useState, useEffect } from '@wordpress/element';
import './OrderTimeline.css';

const STATUS_FLOW = [
    'on-hold',
    'payment-confirm',
    'in-progress',
    'shipping',
    'completed',
];

const STATUS_LABELS = {
    'on-hold': __('On Hold', 'formipay'),
    'payment-confirm': __('Payment Confirmed', 'formipay'),
    'in-progress': __('In Progress', 'formipay'),
    'shipping': __('Shipping', 'formipay'),
    'completed': __('Completed', 'formipay'),
    'failed': __('Failed', 'formipay'),
    'refunded': __('Refunded', 'formipay'),
    'cancelled': __('Cancelled', 'formipay'),
};

export default function OrderTimeline({ orderId }) {
    const [timeline, setTimeline] = useState([]);

    useEffect(() => {
        // Load timeline data - this would be from an API
        // For now, we'll create a mock timeline based on status
        const mockTimeline = [
            {
                status: 'on-hold',
                date: new Date().toISOString(),
                note: __('Order placed', 'formipay'),
            },
        ];
        setTimeline(mockTimeline);
    }, [orderId]);

    return (
        <div className="formipay-order-timeline">
            <h3>{ __('Order Timeline', 'formipay') }</h3>

            <div className="timeline-progress">
                {STATUS_FLOW.map((status, index) => (
                    <div
                        key={status}
                        className={`timeline-step ${index === 0 ? 'first' : ''} ${index === STATUS_FLOW.length - 1 ? 'last' : ''}`}
                    >
                        <div className="timeline-dot" />
                        {index < STATUS_FLOW.length - 1 && (
                            <div className="timeline-line" />
                        )}
                        <span className="timeline-label">
                            { STATUS_LABELS[status] }
                        </span>
                    </div>
                ))}
            </div>

            <div className="timeline-events">
                {timeline.length === 0 ? (
                    <p className="no-events">
                        { __('No timeline events yet', 'formipay') }
                    </p>
                ) : (
                    <ul>
                        {timeline.map((event, index) => (
                            <li key={index}>
                                <span className="event-status">
                                    { STATUS_LABELS[event.status] || event.status }
                                </span>
                                <span className="event-date">
                                    { new Date(event.date).toLocaleString() }
                                </span>
                                {event.note && (
                                    <span className="event-note">
                                        { event.note }
                                    </span>
                                )}
                            </li>
                        ))}
                    </ul>
                )}
            </div>
        </div>
    );
}
