/**
 * OrderView Page Component
 *
 * @package Advanced_Customer_Account
 */

import { useEffect, useState } from '@wordpress/element';
import { useSelect, useDispatch } from '@wordpress/data';
import { __ } from '@wordpress/i18n';
import { format } from 'date-fns';

// Components
import { Card, LoadingSpinner, Notice, StatusBadge } from '../components/Common';

/**
 * Format address for display.
 *
 * @param {Object} address Address object.
 * @return {string} Formatted address.
 */
const formatAddress = ( address ) => {
    if ( ! address ) {
        return '';
    }

    const parts = [
        address.first_name && address.last_name ? `${ address.first_name } ${ address.last_name }` : '',
        address.company,
        address.address_1,
        address.address_2,
        [ address.city, address.state, address.postcode ].filter( Boolean ).join( ', ' ),
        address.country,
    ];

    return parts.filter( Boolean ).join( '\n' );
};

/**
 * OrderView page component.
 *
 * @param {Object}   props         Component props.
 * @param {string}   props.orderId Order ID.
 * @param {Function} props.onBack  Back button handler.
 * @return {JSX.Element} OrderView page.
 */
const OrderView = ( { orderId, onBack } ) => {
    const { fetchOrder, reorder, clearError } = useDispatch( 'aca/orders' );
    const [ isReordering, setIsReordering ] = useState( false );
    const [ reorderMessage, setReorderMessage ] = useState( null );

    const { order, isLoadingOrder, error } = useSelect(
        ( select ) => {
            const ordersStore = select( 'aca/orders' );
            return {
                order: ordersStore.getCurrentOrder(),
                isLoadingOrder: ordersStore.isLoadingOrder(),
                error: ordersStore.getError(),
            };
        },
        []
    );

    // Fetch order on mount
    useEffect( () => {
        if ( orderId ) {
            fetchOrder( orderId );
        }

        return () => {
            clearError();
        };
    }, [ orderId, fetchOrder, clearError ] );

    // Format date
    const formatDate = ( dateString ) => {
        try {
            return format( new Date( dateString ), 'MMMM d, yyyy \'at\' h:mm a' );
        } catch {
            return dateString;
        }
    };

    // Handle reorder
    const handleReorder = async () => {
        setIsReordering( true );
        setReorderMessage( null );

        try {
            const result = await reorder( orderId );

            if ( result.cart_url ) {
                window.location.href = result.cart_url;
            } else {
                setReorderMessage( {
                    type: 'success',
                    text: result.message || __( 'Items added to cart!', 'advanced-customer-account' ),
                } );
            }
        } catch ( err ) {
            setReorderMessage( {
                type: 'error',
                text: err.message || __( 'Failed to add items to cart.', 'advanced-customer-account' ),
            } );
        } finally {
            setIsReordering( false );
        }
    };

    if ( isLoadingOrder && ! order ) {
        return <LoadingSpinner fullPage message={ __( 'Loading order...', 'advanced-customer-account' ) } />;
    }

    if ( error && ! order ) {
        return (
            <div className="aca-order-view">
                <Notice
                    type="error"
                    message={ error }
                />
                <button type="button" className="aca-btn aca-btn--secondary" onClick={ onBack }>
                    { __( '← Back to Orders', 'advanced-customer-account' ) }
                </button>
            </div>
        );
    }

    if ( ! order ) {
        return null;
    }

    return (
        <div className="aca-order-view">
            { /* Back button and header */ }
            <div className="aca-order-view__header">
                <button type="button" className="aca-btn aca-btn--link" onClick={ onBack }>
                    <span className="dashicons dashicons-arrow-left-alt" aria-hidden="true" />
                    { __( 'Back to Orders', 'advanced-customer-account' ) }
                </button>
            </div>

            { reorderMessage && (
                <Notice
                    type={ reorderMessage.type }
                    message={ reorderMessage.text }
                    onDismiss={ () => setReorderMessage( null ) }
                    autoDismiss={ 5000 }
                />
            ) }

            { /* Order info */ }
            <Card className="aca-order-view__info">
                <div className="aca-order-view__info-grid">
                    <div className="aca-order-view__info-item">
                        <span className="aca-order-view__info-label">
                            { __( 'Order Number', 'advanced-customer-account' ) }
                        </span>
                        <span className="aca-order-view__info-value">#{ order.number }</span>
                    </div>
                    <div className="aca-order-view__info-item">
                        <span className="aca-order-view__info-label">
                            { __( 'Date', 'advanced-customer-account' ) }
                        </span>
                        <span className="aca-order-view__info-value">
                            { formatDate( order.date_created ) }
                        </span>
                    </div>
                    <div className="aca-order-view__info-item">
                        <span className="aca-order-view__info-label">
                            { __( 'Status', 'advanced-customer-account' ) }
                        </span>
                        <StatusBadge status={ order.status } />
                    </div>
                    <div className="aca-order-view__info-item">
                        <span className="aca-order-view__info-label">
                            { __( 'Total', 'advanced-customer-account' ) }
                        </span>
                        <span
                            className="aca-order-view__info-value"
                            dangerouslySetInnerHTML={ { __html: order.total } }
                        />
                    </div>
                </div>

                <div className="aca-order-view__actions">
                    <button
                        type="button"
                        className="aca-btn aca-btn--primary"
                        onClick={ handleReorder }
                        disabled={ isReordering }
                    >
                        { isReordering
                            ? __( 'Adding to cart...', 'advanced-customer-account' )
                            : __( 'Order Again', 'advanced-customer-account' )
                        }
                    </button>
                </div>
            </Card>

            { /* Order items */ }
            <Card
                title={ __( 'Order Items', 'advanced-customer-account' ) }
                noPadding
                className="aca-order-view__items"
            >
                <table className="aca-order-items-table">
                    <thead>
                        <tr>
                            <th>{ __( 'Product', 'advanced-customer-account' ) }</th>
                            <th className="aca-order-items-table__qty">{ __( 'Qty', 'advanced-customer-account' ) }</th>
                            <th className="aca-order-items-table__total">{ __( 'Total', 'advanced-customer-account' ) }</th>
                        </tr>
                    </thead>
                    <tbody>
                        { order.items?.map( ( item ) => (
                            <tr key={ item.id }>
                                <td>
                                    <div className="aca-order-item">
                                        { item.image && (
                                            <img
                                                src={ item.image }
                                                alt={ item.name }
                                                className="aca-order-item__image"
                                            />
                                        ) }
                                        <div className="aca-order-item__details">
                                            <span className="aca-order-item__name">{ item.name }</span>
                                            { item.meta?.length > 0 && (
                                                <span className="aca-order-item__meta">
                                                    { item.meta.map( ( meta ) => (
                                                        <span key={ meta.key }>
                                                            { meta.key }: { meta.value }
                                                        </span>
                                                    ) ) }
                                                </span>
                                            ) }
                                        </div>
                                    </div>
                                </td>
                                <td className="aca-order-items-table__qty">{ item.quantity }</td>
                                <td
                                    className="aca-order-items-table__total"
                                    dangerouslySetInnerHTML={ { __html: item.total } }
                                />
                            </tr>
                        ) ) }
                    </tbody>
                    <tfoot>
                        <tr>
                            <td colSpan="2">{ __( 'Subtotal', 'advanced-customer-account' ) }</td>
                            <td dangerouslySetInnerHTML={ { __html: order.subtotal } } />
                        </tr>
                        { order.shipping_total && order.shipping_total !== '$0.00' && (
                            <tr>
                                <td colSpan="2">{ __( 'Shipping', 'advanced-customer-account' ) }</td>
                                <td dangerouslySetInnerHTML={ { __html: order.shipping_total } } />
                            </tr>
                        ) }
                        { order.discount_total && order.discount_total !== '$0.00' && (
                            <tr>
                                <td colSpan="2">{ __( 'Discount', 'advanced-customer-account' ) }</td>
                                <td dangerouslySetInnerHTML={ { __html: `-${ order.discount_total }` } } />
                            </tr>
                        ) }
                        { order.tax_total && order.tax_total !== '$0.00' && (
                            <tr>
                                <td colSpan="2">{ __( 'Tax', 'advanced-customer-account' ) }</td>
                                <td dangerouslySetInnerHTML={ { __html: order.tax_total } } />
                            </tr>
                        ) }
                        <tr className="aca-order-items-table__total-row">
                            <td colSpan="2">{ __( 'Total', 'advanced-customer-account' ) }</td>
                            <td dangerouslySetInnerHTML={ { __html: order.total } } />
                        </tr>
                    </tfoot>
                </table>
            </Card>

            { /* Addresses */ }
            <div className="aca-order-view__addresses">
                <Card
                    title={ __( 'Billing Address', 'advanced-customer-account' ) }
                    className="aca-order-view__address"
                >
                    <address className="aca-address">
                        { formatAddress( order.billing_address ).split( '\n' ).map( ( line, index ) => (
                            <span key={ index }>
                                { line }
                                <br />
                            </span>
                        ) ) }
                        { order.billing_address?.email && (
                            <span className="aca-address__email">{ order.billing_address.email }</span>
                        ) }
                        { order.billing_address?.phone && (
                            <span className="aca-address__phone">{ order.billing_address.phone }</span>
                        ) }
                    </address>
                </Card>

                <Card
                    title={ __( 'Shipping Address', 'advanced-customer-account' ) }
                    className="aca-order-view__address"
                >
                    <address className="aca-address">
                        { formatAddress( order.shipping_address ).split( '\n' ).map( ( line, index ) => (
                            <span key={ index }>
                                { line }
                                <br />
                            </span>
                        ) ) }
                    </address>
                </Card>
            </div>

            { /* Order notes */ }
            { order.customer_notes?.length > 0 && (
                <Card
                    title={ __( 'Order Notes', 'advanced-customer-account' ) }
                    className="aca-order-view__notes"
                >
                    <ul className="aca-order-notes">
                        { order.customer_notes.map( ( note ) => (
                            <li key={ note.id } className="aca-order-note">
                                <span className="aca-order-note__date">
                                    { formatDate( note.date_created ) }
                                </span>
                                <span className="aca-order-note__content">{ note.note }</span>
                            </li>
                        ) ) }
                    </ul>
                </Card>
            ) }
        </div>
    );
};

export default OrderView;