/**
 * RecentOrdersWidget Component
 *
 * @package Advanced_Customer_Account
 */

import { __ } from '@wordpress/i18n';
import { format } from 'date-fns';

// Components
import { Card, EmptyState, StatusBadge } from '../Common';

/**
 * Recent orders widget component.
 *
 * @param {Object}   props           Component props.
 * @param {Array}    props.orders    Recent orders.
 * @param {Function} props.navigate  Navigate function.
 * @param {boolean}  props.isLoading Loading state.
 * @return {JSX.Element} RecentOrdersWidget component.
 */
const RecentOrdersWidget = ( { orders = [], navigate, isLoading } ) => {
    // Format date
    const formatDate = ( dateString ) => {
        try {
            return format( new Date( dateString ), 'MMM d, yyyy' );
        } catch {
            return dateString;
        }
    };

    // View order handler
    const handleViewOrder = ( orderId ) => {
        navigate( 'orders', { id: orderId } );
    };

    // View all orders
    const handleViewAll = () => {
        navigate( 'orders' );
    };

    return (
        <Card
            title={ __( 'Recent Orders', 'advanced-customer-account' ) }
            actions={
                orders.length > 0 && (
                    <button
                        type="button"
                        className="aca-btn aca-btn--link"
                        onClick={ handleViewAll }
                    >
                        { __( 'View All', 'advanced-customer-account' ) }
                    </button>
                )
            }
            noPadding={ orders.length > 0 }
        >
            { orders.length === 0 ? (
                <EmptyState
                    icon="cart"
                    title={ __( 'No orders yet', 'advanced-customer-account' ) }
                    message={ __( 'When you place an order, it will appear here.', 'advanced-customer-account' ) }
                    action={
                        <a href={ window.acaSettings?.shopUrl || '/shop/' } className="aca-btn aca-btn--primary">
                            { __( 'Start Shopping', 'advanced-customer-account' ) }
                        </a>
                    }
                />
            ) : (
                <div className="aca-orders-table-wrapper">
                    <table className="aca-orders-table">
                        <thead>
                            <tr>
                                <th>{ __( 'Order', 'advanced-customer-account' ) }</th>
                                <th>{ __( 'Date', 'advanced-customer-account' ) }</th>
                                <th>{ __( 'Status', 'advanced-customer-account' ) }</th>
                                <th>{ __( 'Total', 'advanced-customer-account' ) }</th>
                                <th className="aca-orders-table__actions">
                                    <span className="screen-reader-text">
                                        { __( 'Actions', 'advanced-customer-account' ) }
                                    </span>
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            { orders.map( ( order ) => (
                                <tr key={ order.id }>
                                    <td>
                                        <button
                                            type="button"
                                            className="aca-orders-table__order-link"
                                            onClick={ () => handleViewOrder( order.id ) }
                                        >
                                            #{ order.number }
                                        </button>
                                    </td>
                                    <td>{ formatDate( order.date_created ) }</td>
                                    <td>
                                        <StatusBadge status={ order.status } />
                                    </td>
                                    <td>
                                        <span
                                            dangerouslySetInnerHTML={ { __html: order.total } }
                                        />
                                    </td>
                                    <td className="aca-orders-table__actions">
                                        <button
                                            type="button"
                                            className="aca-btn aca-btn--small aca-btn--secondary"
                                            onClick={ () => handleViewOrder( order.id ) }
                                        >
                                            { __( 'View', 'advanced-customer-account' ) }
                                        </button>
                                    </td>
                                </tr>
                            ) ) }
                        </tbody>
                    </table>
                </div>
            ) }
        </Card>
    );
};

export default RecentOrdersWidget;