import React, { useState } from 'react';
import { __, sprintf } from '@wordpress/i18n';
import { ArrowRight, ChevronRight, Hash, HelpCircle } from 'lucide-react';
import ViewHeader from './ViewHeader';

/**
 * Orders tab: look up a WooCommerce order by number. The lookup itself runs
 * through the chat so the bot's existing order flow (incl. verification) is reused.
 */
const OrdersView = ({ headerActions, onCheckOrder, onOrderHelp, readOnly = false }) => {
    const [orderNumber, setOrderNumber] = useState('');

    const handleSubmit = (e) => {
        e.preventDefault();
        const number = orderNumber.trim().replace(/^#/, '');
        if (!number) return;
        /* translators: %s: order number */
        onCheckOrder(sprintf(__( 'What is the status of my order #%s?', 'aisk-ai-chat' ), number));
        setOrderNumber('');
    };

    return (
        <div className="aisk-view aisk-orders-view">
            <ViewHeader
                title={__( 'Orders', 'aisk-ai-chat' )}
                subtitle={__( 'Track your order in a few seconds', 'aisk-ai-chat' )}
                actions={headerActions}
            />
            <div className="aisk-view-body">
                <form className="aisk-card aisk-order-lookup" onSubmit={handleSubmit}>
                    <span className="aisk-card-title">{__( 'Check your order status', 'aisk-ai-chat' )}</span>
                    <span className="aisk-card-text">{__( 'Enter your order number to see where your order is.', 'aisk-ai-chat' )}</span>
                    <div className="aisk-help-search-field aisk-order-lookup-field">
                        <Hash size={16} />
                        <input
                            type="text"
                            inputMode="numeric"
                            value={orderNumber}
                            onChange={(e) => setOrderNumber(e.target.value)}
                            placeholder={__( 'Order number', 'aisk-ai-chat' )}
                            aria-label={__( 'Order number', 'aisk-ai-chat' )}
                            disabled={readOnly}
                        />
                        <button
                            type="submit"
                            className="aisk-order-lookup-submit"
                            disabled={readOnly || !orderNumber.trim()}
                            aria-label={__( 'Check status', 'aisk-ai-chat' )}
                        >
                            <ArrowRight size={18} />
                        </button>
                    </div>
                </form>

                <button type="button" className="aisk-card aisk-card-link" onClick={onOrderHelp} disabled={readOnly}>
                    <span className="aisk-card-icon"><HelpCircle size={18} /></span>
                    <span className="aisk-card-content">
                        <span className="aisk-card-title">{__( "Don't know your order number?", 'aisk-ai-chat' )}</span>
                        <span className="aisk-card-text">{__( 'Our assistant will help you find it', 'aisk-ai-chat' )}</span>
                    </span>
                    <ChevronRight size={18} className="aisk-card-chevron" />
                </button>
            </div>
        </div>
    );
};

export default OrdersView;