import { Fragment, useState } from 'react';
import { Link } from 'react-router-dom';

import Button from '../../components/common/button/Button';
import Pagination from '../../components/common/Pagination/Pagination';

import DatePicker, { registerLocale } from 'react-datepicker';
import { ko } from 'date-fns/esm/locale';
import 'react-datepicker/dist/react-datepicker.css';
import { getMonth, getYear } from 'date-fns';
import range from 'lodash/range';

import { Title, SelectInput, BtnWrapper, TableStyle, TableInfo, ListCount, ListOption, ButtonClose, ModalText } from '../../styles/Components';
import { styled } from 'styled-components';

import ItemLogSearchBar from '../../components/DataManage/ItemLogSearchBar';
import GoodsLogSearchBar from '../../components/DataManage/CreditLogSearchBar';
import TradeLogSerchBar from '../../components/DataManage/TradeLogSearchBar';
import Modal from '../../components/common/modal/Modal';

import { useNavigate } from 'react-router-dom';
import { authList } from '../../store/authList';
import { useRecoilValue } from 'recoil';

registerLocale('ko', ko);

const ItemLogContent = () => {
	const mokupData = [
		{
			date: '2023-08-05 12:11:32',
			name: '칼리버스',
			id: '16CD2ECD-4798-46CE-9B6B-F952CF11F196',
			action: '획득',
			route: '아이템 제작',
			itemName: 'Item_name',
			serialNumber: 'Serial_number',
			itemCode: 'Item_code',
			count: 1,
			key: 'User_trade_key',
		},
	];
	return (
		<>
			<ItemLogSearchBar />
			<TableInfo>
				<ListCount>총 : 117건 / 000 건</ListCount>
				<ListOption>
					<SelectInput name="" id="" className="input-select">
						<option value="up">오름차순</option>
						<option value="down">내림차순</option>
					</SelectInput>
					<SelectInput name="" id="" className="input-select">
						<option value="up">50개</option>
						<option value="down">100개</option>
					</SelectInput>
					<Button theme="line" text="엑셀 다운로드" />
				</ListOption>
			</TableInfo>
			<TableWrapper>
				<TableStyle>
					<caption></caption>
					<thead>
						<tr>
							<th width="150">일자</th>
							<th width="200">아바타명</th>
							<th width="300">GUID</th>
							<th width="100">액션</th>
							<th width="150">획득/소진경로</th>
							<th width="200">아이템명</th>
							<th width="200">시리얼 넘버</th>
							<th width="200">고유코드</th>
							<th width="80">개수</th>
							<th width="300">거래 key</th>
						</tr>
					</thead>
					<tbody>
						{mokupData.map((data, index) => (
							<Fragment key={index}>
								<tr>
									<td>{new Date(data.date).toLocaleString()}</td>
									<td>{data.name}</td>
									<td>{data.id}</td>
									<td>{data.action}</td>
									<td>{data.route}</td>
									<td>{data.itemName}e</td>
									<td>{data.serialNumber}</td>
									<td>{data.itemCode}</td>
									<td>{data.count}</td>
									<td>{data.key}</td>
								</tr>
							</Fragment>
						))}
					</tbody>
				</TableStyle>
			</TableWrapper>
			<Pagination />
		</>
	);
};

const GoodsLogContent = () => {
	const mokupData = [
		{
			date: '2023-08-05 12:11:32',
			name: '홍길동',
			id: '16CD2ECD-4798-46CE-9B6B-F952CF11F196',
			gold: '99800',
			blue: '400',
			black: '500',
			red: '500',
			action: '소진',
			location: '유저 거래',
			goldchange: '-',
			bluechange: '-100',
			blackchange: '-',
			redchange: '-',
			key: 'User_trade_key',
		},
	];
	return (
		<>
			<GoodsLogSearchBar />
			<TableInfo>
				<ListCount>총 : 117건 / 000 건</ListCount>
				<ListOption>
					<SelectInput name="" id="" className="input-select">
						<option value="up">오름차순</option>
						<option value="down">내림차순</option>
					</SelectInput>
					<SelectInput name="" id="" className="input-select">
						<option value="up">50개</option>
						<option value="down">100개</option>
					</SelectInput>
					<Button theme="line" text="엑셀 다운로드" />
				</ListOption>
			</TableInfo>
			<TableWrapper>
				<TableStyle>
					<caption></caption>
					<thead>
						<tr>
							<th width="150">일자</th>
							<th width="200">아바타명</th>
							<th width="300">GUID</th>
							<th width="100">
								(Total)
								<br />
								골드
							</th>
							<th width="100">
								(Total)
								<br />
								사파이어
							</th>
							<th width="100">
								(Total)
								<br />
								칼리움
							</th>
							<th width="100">
								(Total)
								<br />
								오닉시움
							</th>
							<th width="80">액션</th>
							<th width="100">획득 / 소진처</th>
							<th width="100">
								(변화량)
								<br />
								골드
							</th>
							<th width="100">
								(변화량)
								<br />
								사파이어
							</th>
							<th width="100">
								(변화량)
								<br />
								칼리움
							</th>
							<th width="100">
								(변화량)
								<br />
								오닉시움
							</th>
							<th width="300">거래 Key</th>
						</tr>
					</thead>
					<tbody>
						{mokupData.map((data, index) => (
							<Fragment key={index}>
								<tr>
									<td>{new Date(data.date).toLocaleString()}</td>
									<td>{data.name}</td>
									<td>{data.id}</td>
									<td>{data.gold}</td>
									<td>{data.blue}</td>
									<td>{data.black}</td>
									<td>{data.red}</td>
									<td>{data.action}</td>
									<td>{data.location}</td>
									<td>{data.goldchange}</td>
									{/* 변화량 0보다 작을 경우 StateDecrease 적용 */}
									<td>
										<StateDecrease>{data.bluechange}</StateDecrease>
									</td>
									<td>{data.blackchange}</td>
									<td>{data.redchange}</td>
									<td>{data.key}</td>
								</tr>
							</Fragment>
						))}
					</tbody>
				</TableStyle>
			</TableWrapper>
			<Pagination />
		</>
	);
};

const TradeLogContent = () => {
	const mokupData = [
		{
			date: '2023-08-05 12:11:32',
			name: '홍길동',
			trader: '칼리버스',
			id: '16CD2ECD-4798-46CE-9B6B-F952CF11F196',
			key: 'User_trade_key',
		},
	];

	return (
		<>
			<TradeLogSerchBar />
			<TableInfo>
				<ListCount>
					총 : 117건 / <span>000</span> 건
				</ListCount>
				<ListOption>
					<SelectInput name="" id="" className="input-select">
						<option value="up">오름차순</option>
						<option value="down">내림차순</option>
					</SelectInput>
					<SelectInput name="" id="" className="input-select">
						<option value="up">50개</option>
						<option value="down">100개</option>
					</SelectInput>
					<Button theme="line" text="엑셀 다운로드" />
				</ListOption>
			</TableInfo>
			<TableWrapper>
				<TableStyle>
					<caption></caption>
					<thead>
						<tr>
							<th width="150">일자</th>
							<th width="150">조회 아바타명</th>
							<th width="150">거래 대상 아바타명</th>
							<th width="300">거래 대상 GUID</th>
							<th width="300">거래 Key</th>
						</tr>
					</thead>
					<tbody>
						{mokupData.map((data, index) => (
							<Fragment key={index}>
								<tr>
									<td>{new Date(data.date).toLocaleString()}</td>
									<td>{data.name}</td>
									<td>{data.trader}</td>
									<td>{data.id}</td>
									<td>{data.key}</td>
								</tr>
							</Fragment>
						))}
					</tbody>
				</TableStyle>
			</TableWrapper>
			<Pagination />
		</>
	);
};

const GameLogView = () => {
	const navigate = useNavigate();
	const userInfo = useRecoilValue(authList);
	const [activeTab, setActiveTab] = useState('itemlog');

	const handleTab = (e, content) => {
		e.preventDefault();
		setActiveTab(content);
	};
	return (
		<>
			{userInfo.auth_list && !userInfo.auth_list.some(auth => auth.id === 14) ? (
				<Modal min="440px" $padding="40px" $bgcolor="transparent" $view={'view'}>
					<BtnWrapper $justify="flex-end">
						<ButtonClose onClick={() => navigate(-1)} />
					</BtnWrapper>
					<ModalText $align="center">
						해당 메뉴에 대한 조회 권한이 없습니다.
						<br />
						권한 등급을 변경 후 다시 이용해주세요.
					</ModalText>
					<BtnWrapper $gap="10px">
						<Button text="확인" theme="primary" type="submit" size="large" width="100%" handleClick={() => navigate(-1)} />
					</BtnWrapper>
				</Modal>
			) : (
				<>
					<Title>게임로그조회</Title>
					<TabWrapper>
						<li>
							<TabItem $state={activeTab === 'itemlog' ? 'active' : 'none'} onClick={e => handleTab(e, 'itemlog')}>
								아이템 로그
							</TabItem>
						</li>
						<li>
							<TabItem $state={activeTab === 'goodslog' ? 'active' : 'none'} onClick={e => handleTab(e, 'goodslog')}>
								재화 로그
							</TabItem>
						</li>
						<li>
							<TabItem $state={activeTab === 'tradelog' ? 'active' : 'none'} onClick={e => handleTab(e, 'tradelog')}>
								거래 로그
							</TabItem>
						</li>
					</TabWrapper>
					{activeTab === 'itemlog' && <ItemLogContent />}
					{activeTab === 'goodslog' && <GoodsLogContent />}
					{activeTab === 'tradelog' && <TradeLogContent />}
				</>
			)}
		</>
	);
};

export default GameLogView;

const TabItem = styled(Link)`
	display: inline-flex;
	width: 120px;
	height: 30px;
	justify-content: center;
	align-items: center;
	background: #f9f9f9;
	border-left: 1px solid #d9d9d9;
	&:hover {
		background: #888;
		color: #fff;
	}
	${props =>
		props.$state === 'active' &&
		`
	background: #888;
		color: #fff;`}
`;

const TabWrapper = styled.ul`
	display: flex;
	li:first-child {
		${TabItem} {
			border-left: 0;
		}
	}
`;

const TableWrapper = styled.div`
	width: 100%;
	min-width: 680px;
	overflow: auto;
	&::-webkit-scrollbar {
		height: 4px;
	}
	&::-webkit-scrollbar-thumb {
		background: #666666;
	}
	&::-webkit-scrollbar-track {
		background: #d9d9d9;
	}
	${TableStyle} {
		width: 100%;
		min-width: max-content;
	}
`;

const StateDecrease = styled.span`
	color: #d60000;
`;