import React, { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react';

import {
	Title,
	TableStyle,
	FormWrapper,
	TableWrapper,
	TableActionButton,
	TableDetailRow,
	TableDetailContainer,
	TableDetailFlex,
	TableDetailColumn,
	DetailTableInfo,
} from '../../styles/Components';

import { withAuth } from '../../hooks/hook';
import {
	authType,
} from '../../assets/data';
import { useTranslation } from 'react-i18next';
import {
	TopButton,
	ViewTableInfo,
} from '../../components/common';
import { TableSkeleton } from '../../components/Skeleton/TableSkeleton';
import BusinessLogSearchBar, { useBusinessLogSearch } from '../../components/ServiceManage/searchBar/BusinessLogSearchBar';
import styled from 'styled-components';
import CircularProgress from '../../components/common/CircularProgress';
// import MessageInput from '../../components/common/input/MessageInput';
// import { AnalyzeAI } from '../../apis';
import {
	INITIAL_PAGE_LIMIT,
	STORAGE_BUSINESS_LOG_SEARCH,
} from '../../assets/data/adminConstants';
import ExcelExportButton from '../../components/common/button/ExcelExportButton';
import Pagination from '../../components/common/Pagination/Pagination';
import useCommonSearchOld from '../../hooks/useCommonSearchOld';

const BusinessLogView = () => {
	const token = sessionStorage.getItem('token');
	const { t } = useTranslation();
	const tableRef = useRef(null);

	const [expandedRows, setExpandedRows] = useState({});
	const [downloadState, setDownloadState] = useState({
		loading: false,
		progress: 0
	});

	const {
		searchParams,
		loading: dataLoading,
		data: dataList,
		handleSearch,
		handleReset,
		handlePageChange,
		handleOrderByChange,
		handlePageSizeChange,
		updateSearchParams
	} = useBusinessLogSearch(token, 500);

	useEffect(() => {
		// 세션 스토리지에서 복사된 메일 데이터 가져오기
		const paramsData = sessionStorage.getItem(STORAGE_BUSINESS_LOG_SEARCH);

		if (paramsData) {
			const searchData = JSON.parse(paramsData);

			handleSearch({
				log_action: searchData.action,
				start_dt: searchData.start_dt,
				end_dt: searchData.end_dt
			});

			// 사용 후 세션 스토리지 데이터 삭제
			sessionStorage.removeItem(STORAGE_BUSINESS_LOG_SEARCH);
		}
	}, []);

	const toggleRowExpand = (index) => {
		setExpandedRows(prev => ({
			...prev,
			[index]: !prev[index]
		}));
	};

	const tableHeaders = useMemo(() => {
		return [
			{ id: 'logTime', label: '일시', width: '120px' },
			{ id: 'userGuid', label: 'GUID', width: '200px' },
			{ id: 'accountId', label: 'account ID', width: '100px' },
			{ id: 'userNickname', label: '아바타명', width: '150px' },
			{ id: 'tranId', label: '트랜잭션 ID', width: '200px' },
			{ id: 'action', label: '액션', width: '150px' },
			{ id: 'domain', label: '도메인', width: '120px' },
			{ id: 'details', label: '상세 정보', width: '100px' }
		];
	}, []);


	const renderActorData = (actor) => {
		if (!actor || typeof actor !== 'object') return <></>;

		return (
			<DetailTableInfo>
				<thead>
				<tr>
					<th colSpan="2">Actor 정보</th>
				</tr>
				</thead>
				<tbody>
				{Object.entries(actor).map(([key, value]) => (
					<tr key={`actor-${key}`}>
						<td>{key}</td>
						<td>
							{typeof value === 'object' && value !== null
								? JSON.stringify(value)
								: String(value)
							}
						</td>
					</tr>
				))}
				</tbody>
			</DetailTableInfo>
		);
	};

	const renderInfosData = (infos) => {
		if (!infos || !Array.isArray(infos) || infos.length === 0) return <></>;

		return (
			<DetailTableInfo>
				<thead>
				<tr>
					<th colSpan="2">Infos 정보</th>
				</tr>
				</thead>
				<tbody>
				{infos.map((info, infoIndex) => (
					<Fragment key={`info-${infoIndex}`}>
						{Object.entries(info).map(([key, value]) => (
							<tr key={`info-${infoIndex}-${key}`}>
								<td>{key}</td>
								<td>
									{typeof value === 'object' && value !== null
										? JSON.stringify(value)
										: Array.isArray(value)
											? value.join(', ')
											: String(value)
									}
								</td>
							</tr>
						))}
					</Fragment>
				))}
				</tbody>
			</DetailTableInfo>
		);
	};

	// const handleMessage = (message) => {
	// 	const params = {}
	// 	params.message = message;
	// 	params.type = 'BUSINESS_LOG'
	// 	params.conditions = searchParams;
	// 	AnalyzeAI(token, params);
	//
	// }

	return (
		<>
			<Title>비즈니스 로그 조회</Title>
			<FormWrapper>
				<BusinessLogSearchBar
					searchParams={searchParams}
					onSearch={(newParams, executeSearch = true) => {
						if (executeSearch) {
							handleSearch(newParams);
						} else {
							updateSearchParams(newParams);
						}
					}}
					onReset={handleReset}
				/>
			</FormWrapper>
			<ViewTableInfo orderType="asc" pageType="B" total={dataList?.total} total_all={dataList?.total_all} handleOrderBy={handleOrderByChange} handlePageSize={handlePageSizeChange}>
				<DownloadContainer>
					<ExcelExportButton
						params={searchParams}
						fileName={t('FILE_BUSINESS_LOG')}
						onLoadingChange={setDownloadState}
						dataSize={dataList?.total_all}
					/>
					{downloadState.loading && (
						<CircularProgressWrapper>
							<CircularProgress
								progress={downloadState.progress}
								size={36}
								progressColor="#4A90E2"
							/>
						</CircularProgressWrapper>
					)}
				</DownloadContainer>
				{/*<MessageInput onSendMessage={handleMessage} />*/}
			</ViewTableInfo>
			{dataLoading ? <TableSkeleton width='100%' count={15} /> :
				<>
					<TableWrapper>
						<TableStyle ref={tableRef}>
							<thead>
							<tr>
								{tableHeaders.map(header => (
									<th key={header.id} width={header.width}>{header.label}</th>
								))}
							</tr>
							</thead>
							<tbody>
							{dataList?.generic_list?.map((item, index) => (
								<Fragment key={index}>
									<tr>
										<td>{item.logTime}</td>
										<td>{item.userGuid}</td>
										<td>{item.accountId}</td>
										<td>{item.userNickname}</td>
										<td>{item.tranId}</td>
										<td>{item.action}</td>
										<td>{item.domain === 'None' ? '-' : item.domain}</td>
										<td>
											<TableActionButton onClick={() => toggleRowExpand(index)}>
												{expandedRows[index] ? '접기' : '상세보기'}
											</TableActionButton>
										</td>
									</tr>
									{expandedRows[index] && (
										<TableDetailRow>
											<td colSpan={tableHeaders.length}>
												<TableDetailContainer>
													<TableDetailFlex>
														<TableDetailColumn>
															{renderActorData(item.header?.Actor)}
														</TableDetailColumn>
														<TableDetailColumn>
															{renderInfosData(item.body?.Infos)}
														</TableDetailColumn>
													</TableDetailFlex>
												</TableDetailContainer>
											</td>
										</TableDetailRow>
									)}
								</Fragment>
							))}
							</tbody>
						</TableStyle>
					</TableWrapper>
					{dataList?.generic_list &&
						<Pagination
							postsPerPage={searchParams.page_size}
							totalPosts={dataList?.total_all}
							setCurrentPage={handlePageChange}
							currentPage={searchParams.page_no}
							pageLimit={INITIAL_PAGE_LIMIT}
						/>
					}
					<TopButton />
				</>
			}
		</>
	);
};

export default withAuth(authType.businessLogRead)(BusinessLogView);

const DownloadContainer = styled.div`
	display: flex;
	align-items: center;
	gap: 10px;
`;

const CircularProgressWrapper = styled.div`
	display: flex;
	align-items: center;
	justify-content: center;
`;