import React, { useState } from 'react';
import { __, sprintf } from '@wordpress/i18n';
import '../styles/OrderStatus.scss';
import {
    Truck,
    FileText,
    HelpCircle,
    MessageSquare,
    Calendar,
    Download
} from 'lucide-react';

const getDateLocale = () => {
    if ( typeof window !== 'undefined' && window.AiskData?.locale ) {
        return window.AiskData.locale.replace( '_', '-' );
    }
    if ( typeof document !== 'undefined' && document.documentElement.lang ) {
        return document.documentElement.lang;
    }
    return undefined;
};

const OrderStatus = ({ order, onAction, conversationId }) => {
    if (!order || typeof order !== 'object') {
        return null;
    }

    const [noteText, setNoteText] = useState('');
    const [noteError, setNoteError] = useState('');
    const [isSubmitting, setIsSubmitting] = useState(false);
    const [showNotesForm, setShowNotesForm] = useState(false);
    const [successMessage, setSuccessMessage] = useState('');

    const {
        order_number = '',
        status = 'unknown',
        date_created,
        total,
        shipping_method,
        shipping_address,
        tracking_number,
        items = []
    } = order;

    const formatDate = (dateString) => {
        if (!dateString) return '';
        return new Date(dateString).toLocaleDateString(getDateLocale(), {
            year: 'numeric',
            month: 'short',
            day: 'numeric'
        });
    };

    const getStatusEmoji = (status) => {
        const emojis = {
            'pending': '⏳',
            'processing': '🏭',
            'on-hold': '⏸️',
            'completed': '✅',
            'cancelled': '❌',
            'refunded': '💰',
            'failed': '⚠️',
            'shipping': '🚚'
        };
        return emojis[status?.toLowerCase()] || '📦';
    };

    const getAvailableActions = () => {
        const actions = [];

        actions.push({
            id: 'download_invoice',
            label: __( 'Download Invoice', 'aisk-ai-chat' ),
            icon: Download,
            description: __( 'Get a copy of your order invoice', 'aisk-ai-chat' )
        });

        actions.push({
            id: 'track_order',
            label: __( 'Track Order', 'aisk-ai-chat' ),
            icon: Truck,
            description: __( 'View shipping status and location', 'aisk-ai-chat' )
        });

        return actions;
    };

    const handleAction = (actionId) => {
        if (onAction) {
            onAction({
                type: actionId,
                order_number: order_number
            });
        }
    };

    const handleNoteSubmit = async () => {
        if (!noteText.trim()) {
            setNoteError(__( 'Please enter your question or issue', 'aisk-ai-chat' ));
            setSuccessMessage('');
            return;
        }

        setIsSubmitting(true);
        try {
            const response = await fetch(`${AiskData.apiUrl}/submit-inquiry`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-WP-Nonce': AiskData.nonce
                },
                body: JSON.stringify({
                    order_number: order_number,
                    conversation_id: conversationId,
                    note: noteText
                })
            });

            if (response.ok) {
                setNoteText('');
                setNoteError('');
                setSuccessMessage(__( '✅ Inquiry submitted successfully!', 'aisk-ai-chat' ));
                setTimeout(() => {
                    setShowNotesForm(false);
                    setSuccessMessage('');
                }, 3000);
                onAction({ type: 'inquiry_submitted' });
            } else {
                throw new Error('Failed to submit inquiry');
            }
        } catch (error) {
            setNoteError(__( 'Failed to submit inquiry. Please try again.', 'aisk-ai-chat' ));
            setSuccessMessage('');
        } finally {
            setIsSubmitting(false);
        }
    };

    const actions = getAvailableActions();

    return (
        <div className="order-status-card">
            <div className="order-header">
                <h3>{sprintf( __( 'Order #%s', 'aisk-ai-chat' ), order_number )}</h3>
                <span className={`status-badge ${status.toLowerCase()}`}>
                    {getStatusEmoji(status)} {status.toString().toUpperCase()}
                </span>
            </div>

            <div className="order-details">
                <div className="detail-row">
                    <span className="label">📅 {__( 'Date:', 'aisk-ai-chat' )}</span>
                    <span className="value">{formatDate(date_created)}</span>
                </div>
                <div className="detail-row">
                    <span className="label">💰 {__( 'Total:', 'aisk-ai-chat' )}</span>
                    <span className="value">{total}</span>
                </div>
                {shipping_method && (
                    <div className="detail-row">
                        <span className="label">🚚 {__( 'Shipping:', 'aisk-ai-chat' )}</span>
                        <span className="value">{shipping_method}</span>
                    </div>
                )}
                {shipping_address && (
                    <div className="detail-row">
                        <span className="label">📍 {__( 'Address:', 'aisk-ai-chat' )}</span>
                        <span className="value">{shipping_address}</span>
                    </div>
                )}
                {tracking_number && (
                    <div className="detail-row">
                        <span className="label">📦 {__( 'Tracking:', 'aisk-ai-chat' )}</span>
                        <span className="value">{tracking_number}</span>
                    </div>
                )}
            </div>

            {Array.isArray(items) && items.length > 0 && (
                <div className="order-items">
                    <h4>🛍️ {__( 'Order Items', 'aisk-ai-chat' )}</h4>
                    <div className="order-items-grid">
                        {items.map((item, index) => (
                            <div key={index} className="item-card">
                                {item.image && (
                                    <div className="item-image">
                                        <img
                                            src={item.image}
                                            alt={item.name}
                                            className="product-thumbnail"
                                        />
                                    </div>
                                )}
                                <div className="item-details">
                                    <span className="item-name">{item.name || __( 'Unknown Item', 'aisk-ai-chat' )}</span>
                                    <div className="item-meta">
                                        <span className="item-qty">x{item.quantity || 1}</span>
                                        <span className="item-total">{item.total || ''}</span>
                                    </div>
                                </div>
                            </div>
                        ))}
                    </div>
                </div>
            )}

            <div className="order-support-section">
                {!showNotesForm ? (
                    <div className="text-center">
                        <button
                            onClick={() => setShowNotesForm(true)}
                            className="support-button"
                        >
                            <MessageSquare className="w-4 h-4" />
                            {__( 'Need help with this order?', 'aisk-ai-chat' )}
                        </button>
                    </div>
                ) : (
                    <div className="notes-form">
                        <div className="notes-header">
                            <h4>{__( 'How can we help you?', 'aisk-ai-chat' )}</h4>
                            <button
                                onClick={() => {
                                    setShowNotesForm(false);
                                    setNoteText('');
                                    setNoteError('');
                                }}
                                className="close-button"
                            >
                                ×
                            </button>
                        </div>
                        <textarea
                            placeholder={__( 'Describe your issue or question...', 'aisk-ai-chat' )}
                            value={noteText}
                            onChange={(e) => setNoteText(e.target.value)}
                            className="notes-input"
                            rows={3}
                        />
                        {noteError && <p className="error-text">{noteError}</p>}
                        {successMessage && <p className="success-text">{successMessage}</p>}
                        <button
                            onClick={handleNoteSubmit}
                            className="support-button"
                            disabled={isSubmitting}
                        >
                            {isSubmitting ? (
                                <span>{__( 'Submitting...', 'aisk-ai-chat' )}</span>
                            ) : (
                                <>
                                    <MessageSquare className="w-4 h-4" />
                                    {__( 'Submit Inquiry', 'aisk-ai-chat' )}
                                </>
                            )}
                        </button>
                    </div>
                )}
            </div>
        </div>
    );
};

export default OrderStatus;