/**
 * Downloads Page Component
 *
 * @package Advanced_Customer_Account
 */

import { useEffect, useState } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import apiFetch from '@wordpress/api-fetch';

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

/**
 * Downloads page component.
 *
 * @param {Object}   props          Component props.
 * @param {Function} props.navigate Navigate function.
 * @return {JSX.Element} Downloads page.
 */
const Downloads = ( { navigate } ) => {
    const [ downloads, setDownloads ] = useState( [] );
    const [ isLoading, setIsLoading ] = useState( true );
    const [ error, setError ] = useState( null );

    // Fetch downloads on mount
    useEffect( () => {
        const fetchDownloads = async () => {
            setIsLoading( true );
            setError( null );

            try {
                const data = await apiFetch( {
                    path: '/aca/v1/downloads',
                } );

                setDownloads( data || [] );
            } catch ( err ) {
                setError( err.message || __( 'Failed to fetch downloads.', 'advanced-customer-account' ) );
            } finally {
                setIsLoading( false );
            }
        };

        fetchDownloads();
    }, [] );

    if ( isLoading ) {
        return <LoadingSpinner fullPage message={ __( 'Loading downloads...', 'advanced-customer-account' ) } />;
    }

    return (
        <div className="aca-downloads-page">
            <Card
                title={ __( 'Your Downloads', 'advanced-customer-account' ) }
                noPadding
            >
                { error ? (
                    <div className="aca-card__body">
                        <p className="aca-error-text">{ error }</p>
                    </div>
                ) : downloads.length === 0 ? (
                    <EmptyState
                        icon="download"
                        title={ __( 'No downloads available', 'advanced-customer-account' ) }
                        message={ __( 'You don\'t have any downloadable products yet.', 'advanced-customer-account' ) }
                        action={
                            <a href={ window.acaSettings?.shopUrl || '/shop/' } className="aca-btn aca-btn--primary">
                                { __( 'Browse Products', 'advanced-customer-account' ) }
                            </a>
                        }
                    />
                ) : (
                    <div className="aca-downloads-table-wrapper">
                        <table className="aca-downloads-table">
                            <thead>
                                <tr>
                                    <th>{ __( 'Product', 'advanced-customer-account' ) }</th>
                                    <th>{ __( 'Downloads Remaining', 'advanced-customer-account' ) }</th>
                                    <th>{ __( 'Expires', 'advanced-customer-account' ) }</th>
                                    <th>{ __( 'Download', 'advanced-customer-account' ) }</th>
                                </tr>
                            </thead>
                            <tbody>
                                { downloads.map( ( download ) => (
                                    <tr key={ download.download_id }>
                                        <td>
                                            <div className="aca-downloads-table__product">
                                                { download.product_name }
                                                { download.file_name && (
                                                    <span className="aca-downloads-table__file">
                                                        { download.file_name }
                                                    </span>
                                                ) }
                                            </div>
                                        </td>
                                        <td>
                                            { download.downloads_remaining === '' || download.downloads_remaining === null
                                                ? __( 'Unlimited', 'advanced-customer-account' )
                                                : download.downloads_remaining
                                            }
                                        </td>
                                        <td>
                                            { download.access_expires
                                                ? download.access_expires
                                                : __( 'Never', 'advanced-customer-account' )
                                            }
                                        </td>
                                        <td>
                                            <a
                                                href={ download.download_url }
                                                className="aca-btn aca-btn--primary aca-btn--small"
                                                download
                                            >
                                                { __( 'Download', 'advanced-customer-account' ) }
                                            </a>
                                        </td>
                                    </tr>
                                ) ) }
                            </tbody>
                        </table>
                    </div>
                ) }
            </Card>
        </div>
    );
};

export default Downloads;