paymen

import React, { useState, useEffect } from 'react';
import Navbar from '../components/Navbar';
import Sidebar from '../components/Sidebar';
import Loader from '../components/Loader';
import './PaymentHistory.css';
import { BASE_URL } from './apiConfig';

const PaymentHistory = () => {
    const [payments, setPayments] = useState([]);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);
    const [isAuthenticated, setIsAuthenticated] = useState(false);

    useEffect(() => {
        const token = localStorage.getItem('token');
        setIsAuthenticated(!!token);
    }, []);

    useEffect(() => {
        if (!isAuthenticated) return;

        const fetchPaymentHistory = async () => {
            const token = localStorage.getItem('token');
            const userId = localStorage.getItem('userId');

            if (!token || !userId) {
                setError('Please login to view your payment history.');
                setLoading(false);
                return;
            }

            try {
                const url = `${BASE_URL}/api/staff-member/getPaymentHistory/${userId}`;
                console.log('Fetching data from URL:', url);

                const response = await fetch(url, {
                    method: 'GET',
                    headers: {
                        'Content-Type': 'application/json',
                        'Authorization': `Bearer ${token}`,
                    },
                });

                if (response.status === 401) {
                    setError('Unauthorized access. Please login again.');
                    return;
                }

                if (!response.ok) {
                    const errorText = await response.text();
                    console.error('Error response:', errorText);
                    throw new Error(`HTTP error! Status: ${response.status}, Message: ${errorText}`);
                }

                const data = await response.json();
                console.log('Data received:', data);

                // Assume data is a direct array of payments
                if (Array.isArray(data)) {
                    setPayments(data);
                } else {
                    setError('Unexpected data format received.');
                }
            } catch (error) {
                console.error('Error fetching data:', error.message);
                setError(error.message);
            } finally {
                setLoading(false);
            }
        };

        fetchPaymentHistory();
    }, [isAuthenticated]);

    const renderTable = (payments) => (
        <table className="history-tablee">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Order Type</th>
                    <th>Order Date</th>
                    <th>Amount</th>
                </tr>
            </thead>
            <tbody>
                {payments.length > 0 ? (
                    payments.map((payment, index) => (
                        <tr key={index}>
                            <td>{index + 1}</td>
                            <td>{payment.orderType}</td>
                            <td>{new Date(payment.orderDate).toLocaleDateString()}</td>
                            <td>{payment.amount.toLocaleString()}</td>
                        </tr>
                    ))
                ) : (
                    <tr>
                        <td colSpan="4">No payments found.</td>
                    </tr>
                )}
            </tbody>
        </table>
    );

    

    if (loading) {
        return <Loader />;
    }

    if (error) {
        return (
            <div className="payment-history">
                <Navbar />
                <div className="content-long">
                    <Sidebar />
                    <div className="main">
                        <div className="main-content">
                            <h1>Payment History</h1>
                            <div className="error-message">{error}</div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }

    return (
        <div className="payment-history">
            <Navbar />
            <div className="content-long">
                <Sidebar />
                <div className="main">
                    <div className="main-content">
                        <div className="History-title">
                        <h1>Payment History</h1>
                        </div>
                        {renderTable(payments)}
                    </div>
                </div>
            </div>
        </div>
    );
};

export default PaymentHistory;