import { useState } from 'react';
import { Box, Button, Card, Typography } from '@mui/material';
import ArrowBackIcon from '@mui/icons-material/ArrowBack';
import { useGetProviderLogsQuery } from '../redux/Actions/LogsAction';
import { LogsTable, LogResponseTree, LogPackaging, Spinner } from '../components';

const TransactionLogs = () => {
	const admin_obj = eniture_rtsq || {};
	const [view, setView] = useState('list');
	const [selectedLog, setSelectedLog] = useState(null);

	const { data, isLoading, isFetching } = useGetProviderLogsQuery(
		admin_obj?.eniture_rtsq_rest_url,
		{ refetchOnMountOrArgChange: true }
	);

	const logs = data?.data || [];

	const openResponse = log => {
		setSelectedLog(log);
		setView('response');
	};

	const openPackaging = log => {
		setSelectedLog(log);
		setView('packaging');
	};

	const backToList = () => {
		setView('list');
		setSelectedLog(null);
	};

	return (
		<Card variant='elevation' sx={{ p: 2, minWidth: 600 }} component={Box}>
			<Typography variant='h6' fontWeight='bold' mb={2}>
				Logs
			</Typography>

			{isLoading || isFetching ? (
				<Box py={6}>
					<Spinner />
				</Box>
			) : view === 'list' ? (
				<>
					{!!data?.error && data?.message && (
						<Typography variant='body2' color='error' mb={2}>
							{data.message}
						</Typography>
					)}

					<LogsTable
						logs={logs}
						onViewResponse={openResponse}
						onViewPackaging={openPackaging}
					/>
				</>
			) : (
				<>
					<Box display='flex' alignItems='center' gap={2} mb={2}>
						<Button
							variant='outlined'
							startIcon={<ArrowBackIcon />}
							sx={{ textTransform: 'capitalize' }}
							onClick={backToList}>
							Back to List
						</Button>

						<Typography variant='body2' color='textSecondary'>
							Log {selectedLog?.id} · {selectedLog?.carrier_name}
						</Typography>
					</Box>

					{view === 'response' ? (
						<LogResponseTree response={selectedLog?.response} />
					) : (
						<LogPackaging packaging={selectedLog?.packaging} />
					)}
				</>
			)}
		</Card>
	);
};

export default TransactionLogs;