// QPay Report Modal Component
const { useState, useEffect } = React;

// Get api from window object
const api = typeof window !== 'undefined' && window.api ? window.api : null;

function QPayReportModal({
    isOpen,
    onClose,
    selectedCompany,
    showAlert,
    embed = false
}) {
    const [objectType, setObjectType] = useState('INVOICE');
    const [objectId, setObjectId] = useState('');
    const [accessToken, setAccessToken] = useState('');
    const [startDate, setStartDate] = useState('');
    const [endDate, setEndDate] = useState('');
    const [pageNumber, setPageNumber] = useState('1');
    const [pageLimit, setPageLimit] = useState('1000');
    const [isSandbox, setIsSandbox] = useState(false);
    const [loading, setLoading] = useState(false);
    const [result, setResult] = useState(null);
    const [refundPaymentId, setRefundPaymentId] = useState('');
    const [refundLoading, setRefundLoading] = useState(false);
    const [refundResult, setRefundResult] = useState(null);

    useEffect(() => {
        if (!isOpen) {
            setResult(null);
            setLoading(false);
        }
    }, [isOpen]);

    const normalizeDateTime = (value) => {
        if (!value) return '';
        if (value.includes('T')) {
            return value.replace('T', ' ') + ':00';
        }
        return value;
    };

    const handleSearch = async () => {
        if (!api || !api.listQPayPayments) {
            if (showAlert) showAlert('QPay report API функц олдсонгүй');
            return;
        }
        if (!accessToken || !accessToken.trim()) {
            if (showAlert) showAlert('Access token оруулна уу');
            return;
        }
        if (!objectId || !objectId.trim()) {
            if (showAlert) showAlert('Object ID оруулна уу');
            return;
        }
        if (!startDate || !endDate) {
            if (showAlert) showAlert('Start/End date оруулна уу');
            return;
        }

        const startDateValue = normalizeDateTime(startDate);
        const endDateValue = normalizeDateTime(endDate);

        setLoading(true);
        try {
            const response = await api.listQPayPayments(
                objectType,
                objectId.trim(),
                accessToken.trim(),
                startDateValue,
                endDateValue,
                isSandbox,
                parseInt(pageNumber, 10) || 1,
                parseInt(pageLimit, 10) || 1000
            );
            setResult(response);
        } catch (error) {
            console.error('QPay report error:', error);
            setResult({ success: false, error: error.message || 'Алдаа гарлаа' });
        } finally {
            setLoading(false);
        }
    };

    const handleRefund = async () => {
        if (!api || !api.refundQPayPayment) {
            if (showAlert) showAlert('QPay refund API функц олдсонгүй');
            return;
        }
        const paymentId = (refundPaymentId || '').trim();
        const token = (accessToken || '').trim();
        if (!paymentId) {
            if (showAlert) showAlert('Payment ID оруулна уу');
            return;
        }
        if (!token) {
            if (showAlert) showAlert('Access token оруулна уу (дээрх Filters хэсгээс)');
            return;
        }
        setRefundLoading(true);
        setRefundResult(null);
        try {
            const response = await api.refundQPayPayment(paymentId, token, isSandbox);
            setRefundResult(response);
            if (response.success && showAlert) {
                showAlert('QPay төлбөр амжилттай буцаагдлаа.');
            } else if (!response.success && showAlert && response.error) {
                showAlert(`Буцаалт амжилтгүй: ${response.error}`);
            }
        } catch (err) {
            console.error('QPay refund error:', err);
            setRefundResult({ success: false, error: err.message || 'Алдаа гарлаа' });
            if (showAlert) showAlert(err.message || 'QPay буцаалт амжилтгүй');
        } finally {
            setRefundLoading(false);
        }
    };

    if (!embed && !isOpen) return null;

    const bodyContent = (
        <div className="modal-body">
                    <div className="settings-section">
                        <h3 className="settings-section-title">Filters</h3>
                        <div className="settings-grid">
                            <div className="settings-form-group">
                                <label>Object Type</label>
                                <select
                                    className="form-select"
                                    value={objectType}
                                    onChange={(e) => setObjectType(e.target.value)}
                                >
                                    <option value="INVOICE">INVOICE</option>
                                    <option value="PAYMENT">PAYMENT</option>
                                </select>
                            </div>
                            <div className="settings-form-group">
                                <label>Object ID</label>
                                <input
                                    type="text"
                                    className="form-input"
                                    value={objectId}
                                    onChange={(e) => setObjectId(e.target.value)}
                                    placeholder="TEST_INVOICE"
                                />
                            </div>
                            <div className="settings-form-group">
                                <label>Access Token</label>
                                <input
                                    type="text"
                                    className="form-input"
                                    value={accessToken}
                                    onChange={(e) => setAccessToken(e.target.value)}
                                    placeholder="Bearer token"
                                />
                            </div>
                            <div className="settings-form-group">
                                <label>Start Date</label>
                                <input
                                    type="datetime-local"
                                    className="form-input"
                                    value={startDate}
                                    onChange={(e) => setStartDate(e.target.value)}
                                />
                            </div>
                            <div className="settings-form-group">
                                <label>End Date</label>
                                <input
                                    type="datetime-local"
                                    className="form-input"
                                    value={endDate}
                                    onChange={(e) => setEndDate(e.target.value)}
                                />
                            </div>
                            <div className="settings-form-group">
                                <label>Page</label>
                                <input
                                    type="number"
                                    className="form-input"
                                    value={pageNumber}
                                    onChange={(e) => setPageNumber(e.target.value)}
                                    min="1"
                                />
                            </div>
                            <div className="settings-form-group">
                                <label>Limit</label>
                                <input
                                    type="number"
                                    className="form-input"
                                    value={pageLimit}
                                    onChange={(e) => setPageLimit(e.target.value)}
                                    min="1"
                                />
                            </div>
                            <div className="settings-form-group">
                                <label>Sandbox</label>
                                <div className="settings-checkbox-group">
                                    <input
                                        type="checkbox"
                                        checked={!!isSandbox}
                                        onChange={(e) => setIsSandbox(e.target.checked)}
                                    />
                                    <label>Sandbox орчин</label>
                                </div>
                            </div>
                        </div>
                        <div style={{ marginTop: '12px' }}>
                            <button
                                className="btn btn-primary"
                                onClick={handleSearch}
                                disabled={loading}
                            >
                                {loading ? 'Хайж байна...' : 'Хайх'}
                            </button>
                        </div>
                    </div>

                    {result && (
                        <div className="settings-section">
                            <h3 className="settings-section-title">Result</h3>
                            <div style={{ background: '#f8f9fa', padding: '10px', borderRadius: '6px', fontSize: '12px', whiteSpace: 'pre-wrap' }}>
                                {JSON.stringify(result, null, 2)}
                            </div>
                        </div>
                    )}

                    <div className="settings-section">
                        <h3 className="settings-section-title">QPay төлбөр буцаах (Tax return-тэй хамт)</h3>
                        <p style={{ fontSize: '12px', color: '#6c757d', marginBottom: '10px' }}>
                            Татварын баримт буцаасны дараа энд QPay төлбөрийг буцаана. Payment ID-г Report-аас авах эсвэл баримтын мэдээллээс оруулна уу.
                        </p>
                        <div className="settings-grid">
                            <div className="settings-form-group">
                                <label>Payment ID</label>
                                <input
                                    type="text"
                                    className="form-input"
                                    value={refundPaymentId}
                                    onChange={(e) => setRefundPaymentId(e.target.value)}
                                    placeholder="QPay payment ID"
                                />
                            </div>
                        </div>
                        <div style={{ marginTop: '8px' }}>
                            <span style={{ fontSize: '11px', color: '#6c757d' }}>Access Token болон Sandbox: дээрх Filters хэсгийн утгыг ашиглана.</span>
                        </div>
                        <div style={{ marginTop: '12px' }}>
                            <button
                                className="btn btn-primary"
                                onClick={handleRefund}
                                disabled={refundLoading}
                                style={{ backgroundColor: '#dc3545' }}
                            >
                                {refundLoading ? 'Буцааж байна...' : 'Төлбөр буцаах'}
                            </button>
                        </div>
                        {refundResult && (
                            <div style={{ marginTop: '12px', background: refundResult.success ? '#d4edda' : '#f8d7da', padding: '10px', borderRadius: '6px', fontSize: '12px', whiteSpace: 'pre-wrap' }}>
                                {JSON.stringify(refundResult, null, 2)}
                            </div>
                        )}
                    </div>
                </div>
    );

    if (embed) {
        return (
            <div className="settings-section" style={{ marginTop: '12px' }}>
                <h3 className="settings-section-title">QPay Report</h3>
                {bodyContent}
            </div>
        );
    }

    return (
        <div className="modal-overlay" onClick={onClose}>
            <div className="modal-content" onClick={(e) => e.stopPropagation()} style={{ maxWidth: '800px', maxHeight: '90vh', overflowY: 'auto' }}>
                <div className="modal-header">
                    <h2>QPay Report</h2>
                    <button className="modal-close" onClick={onClose}>×</button>
                </div>
                {bodyContent}
            </div>
        </div>
    );
}

// Make available globally for browser
if (typeof window !== 'undefined') {
    window.QPayReportModal = QPayReportModal;
}