import { NextPage, NextPageContext } from 'next'
import { useRouter } from 'next/router'
import dynamic from 'next/dynamic'
import Link from 'next/link'
import { NextSeo } from 'next-seo'
import { useEffect, useState } from 'react'
import { Field, Form, Formik } from 'formik'
import Tooltip from 'rc-tooltip'

import { SnowflakeUtil } from 'discord.js'
import { ParsedUrlQuery } from 'querystring'
import { Bot, ResponseProps, Theme, User } from '@types'

import { botEnforcements, git, KoreanbotsEndPoints, reportCats, Status } from '@utils/Constants'
import { get } from '@utils/Query'
import Day from '@utils/Day'
import { ReportSchema } from '@utils/Yup'
import Fetch from '@utils/Fetch'
import { checkBotFlag, checkUserFlag, formatNumber, parseCookie } from '@utils/Tools'
import { getToken } from '@utils/Csrf'

import NotFound from '../../404'

const Container = dynamic(() => import('@components/Container'))
const DiscordAvatar = dynamic(() => import('@components/DiscordAvatar'))
const Divider = dynamic(() => import('@components/Divider'))
const Tag = dynamic(() => import('@components/Tag'))
const Owner = dynamic(() => import('@components/Owner'))
const Segment = dynamic(() => import('@components/Segment'))
const LongButton = dynamic(() => import('@components/LongButton'))
const Advertisement = dynamic(() => import('@components/Advertisement'))
const Markdown = dynamic(() => import('@components/Markdown'))
const Message = dynamic(() => import('@components/Message'))
const Button = dynamic(() => import('@components/Button'))
const TextArea = dynamic(() => import('@components/Form/TextArea'))
const Modal = dynamic(() => import('@components/Modal'))
const NSFW = dynamic(() => import('@components/NSFW'))

const Bots: NextPage<BotsProps> = ({ data, desc, date, user, theme, csrfToken }) => {
	const bg = checkBotFlag(data?.flags, 'trusted') && data?.bg
	const router = useRouter()
	const [nsfw, setNSFW] = useState<boolean>()
	const [reportModal, setReportModal] = useState(false)
	const [reportRes, setReportRes] = useState<ResponseProps<unknown>>(null)
	useEffect(() => {
		setNSFW(localStorage.nsfw)
	}, [])
	if (!data?.id) return <NotFound />
	return (
		<div
			style={
				bg
					? {
							background: `linear-gradient(to right, rgba(34, 36, 38, 0.68), rgba(34, 36, 38, 0.68)), url("${data.bg}") center top / cover no-repeat fixed`,
					  }
					: {}
			}
		>
			<Container paddingTop className='py-10'>
				<NextSeo
					title={data.name}
					description={data.intro}
					twitter={{
						cardType: 'summary_large_image',
					}}
					openGraph={{
						images: [
							{
								url: KoreanbotsEndPoints.OG.bot(data.id, data.name, data.intro, data.category, [
									formatNumber(data.votes),
									formatNumber(data.servers),
								]),
								width: 2048,
								height: 1170,
								alt: 'Bot Preview Image',
							},
						],
					}}
				/>
				{data.state === 'blocked' ? (
					<div className='pb-40'>
						<Message type='error'>
							<h2 className='text-lg font-extrabold'>해당 봇은 관리자에 의해 삭제되었습니다.</h2>
						</Message>
					</div>
				) : data.category.includes('NSFW') && !nsfw ? (
					<NSFW onClick={() => setNSFW(true)} onDisableClick={() => (localStorage.nsfw = true)} />
				) : (
					<>
						<div className='w-full pb-2'>
							{checkBotFlag(data.flags, 'private') ? (
								<Message type='info'>
									<h2 className='text-lg font-extrabold'>
										해당 봇은 특수목적 봇이므로 초대하실 수 없습니다.
									</h2>
									<p>
										해당 봇은 공개 사용이 목적이 아닌 특수목적봇입니다. 따라서 따로 초대하실 수
										없습니다.
									</p>
								</Message>
							) : data.state === 'reported' ? (
								<Message type='error'>
									<h2 className='text-lg font-extrabold'>
										해당 봇은 신고가 접수되어, 관리자에 의해 잠금 상태입니다.
									</h2>
									<p>해당 봇 사용에 주의해주세요.</p>
									<p>
										봇 소유자분은{' '}
										<Link href='/guidelines' className='text-blue-500 hover:text-blue-400'>
											가이드라인
										</Link>
										에 대한 위반사항을 확인해주시고{' '}
										<Link href='/discord' className='text-blue-500 hover:text-blue-400'>
											디스코드 서버
										</Link>
										로 문의해주세요.
									</p>
								</Message>
							) : data.enforcements.filter((i) => i !== 'NONE').length > 0 ? (
								<Message type='warning'>
									<h2 className='text-lg font-extrabold'>이 봇은 기능에 제한을 두고 있습니다.</h2>
									<p>
										{data.enforcements
											.filter((i) => i !== 'NONE')
											.map((i) => (
												<li key={i}>{botEnforcements[i].description}</li>
											))}
									</p>
								</Message>
							) : (
								''
							)}
						</div>
						<div className='w-full lg:flex'>
							<div className='w-full text-center lg:w-2/12'>
								<DiscordAvatar
									userID={data.id}
									size={256}
									className='w-full rounded-full'
									hash={data.avatar}
								/>
							</div>
							<div className='w-full grow px-5 py-12 text-center lg:w-5/12 lg:text-left'>
								<Tag
									circular
									text={
										<>
											<i className={`fas fa-circle text-${Status[data.status]?.color}`} />{' '}
											{Status[data.status]?.text}
										</>
									}
								/>
								<h1 className='mb-2 mt-3 text-4xl font-bold' style={bg ? { color: 'white' } : {}}>
									{data.name}{' '}
									{checkBotFlag(data.flags, 'trusted') ? (
										<Tooltip
											placement='bottom'
											overlay='해당 봇은 한국 디스코드 리스트에서 엄격한 기준을 통과한 봇입니다!'
										>
											<span className='text-3xl text-koreanbots-blue'>
												<i className='fas fa-award' />
											</span>
										</Tooltip>
									) : (
										''
									)}
								</h1>
								<p
									className={`${
										bg ? 'text-gray-300' : 'text-gray-800 dark:text-gray-300'
									} text-base`}
								>
									{data.intro}
								</p>
							</div>
							<div className='w-full lg:w-1/4'>
								{data.state === 'ok' && !checkBotFlag(data.flags, 'private') && (
									<LongButton newTab href={`/bots/${router.query.id}/invite`}>
										<h4 className='whitespace-nowrap'>
											<i className='fas fa-user-plus text-discord-blurple' /> 초대하기
										</h4>
									</LongButton>
								)}
								<Link href={`/bots/${router.query.id}/vote`} legacyBehavior>
									<LongButton>
										<h4>
											<i className='fas fa-heart text-red-600' /> 하트 추가
										</h4>
										<span className='ml-1 rounded-lg bg-little-white-hover px-2 text-center text-sm text-black dark:bg-very-black dark:text-gray-400'>
											{formatNumber(data.votes)}
										</span>
									</LongButton>
								</Link>
								{((data.owners as User[]).find((el) => el.id === user?.id) ||
									checkUserFlag(user?.flags, 'staff')) && (
									<LongButton href={`/bots/${data.id}/edit`}>
										<h4>
											<i className='fas fa-cogs' /> 관리하기
										</h4>
									</LongButton>
								)}
								{((data.owners as User[]).find((el) => el.id === user?.id) ||
									checkUserFlag(user?.flags, 'staff')) && (
									<LongButton
										onClick={async () => {
											const res = await Fetch(`/bots/${data.id}/stats`, { method: 'PATCH' })
											if (res.code !== 200) return alert(res.message)
											else window.location.reload()
										}}
									>
										<h4>
											<i className='fas fa-sync' /> 정보 갱신하기
										</h4>
									</LongButton>
								)}
							</div>
						</div>
						<Divider className='px-5' />
						<div className='hidden lg:block'>
							<Advertisement />
						</div>
						<div className='lg:flex lg:flex-row-reverse' style={bg ? { color: 'white' } : {}}>
							<div className='mb-1 w-full lg:w-1/4'>
								<h2 className='3xl mb-2 font-bold'>정보</h2>
								<div className='grid grid-cols-2 gap-4 rounded-sm bg-little-white px-4 py-4 text-black dark:bg-discord-black dark:text-gray-400'>
									<div>
										<i className='far fa-flag' /> 접두사
									</div>
									<div className='markdown-body text-black dark:text-gray-400'>
										<code>{data.prefix}</code>
									</div>
									<div>
										<i className='fas fa-users' /> 서버수
									</div>
									<div>{data.servers || 'N/A'}</div>
									{data.shards && data.servers > 1500 && (
										<>
											<div>
												<i className='fas fa-sitemap' /> 샤드수
											</div>
											<div>{data.shards}</div>
										</>
									)}
									<div>
										<i className='fas fa-calendar-day' /> 봇 생성일
									</div>
									<div>{Day(date).fromNow(false)}</div>
									{checkBotFlag(data.flags, 'verified') ? (
										<Tooltip overlay='해당 봇은 디스코드측에서 인증된 봇입니다.'>
											<div className='col-span-2'>
												<i className='fas fa-check text-discord-blurple' /> 디스코드 인증됨
											</div>
										</Tooltip>
									) : (
										''
									)}
								</div>
								<h2 className='3xl mb-2 mt-2 font-bold'>카테고리</h2>
								<div className='flex flex-wrap'>
									{data.category.map((el) => (
										<Tag key={el} text={el} href={`/bots/categories/${el}`} />
									))}
								</div>
								<h2 className='3xl mb-2 mt-2 font-bold'>제작자</h2>
								{(data.owners as User[]).map((el) => (
									<Owner
										key={el.id}
										id={el.id}
										tag={el.tag}
										globalName={el.globalName}
										username={el.username}
									/>
								))}
								<div className='list grid'>
									<Link
										href={`/bots/${router.query.id}/report`}
										className='cursor-pointer text-red-600 hover:underline'
										aria-hidden='true'
									>
										<i className='far fa-flag' />
										신고하기
									</Link>
									<Modal
										header={`${data.name}#${data.tag} 신고하기`}
										closeIcon
										isOpen={reportModal}
										onClose={() => {
											setReportModal(false)
											setReportRes(null)
										}}
										full
										dark={theme === 'dark'}
									>
										{reportRes?.code === 200 ? (
											<Message type='success'>
												<h2 className='text-lg font-semibold'>성공적으로 신고하였습니다!</h2>
												<p>
													더 자세한 설명이 필요할 수 있습니다!{' '}
													<a className='text-blue-600 hover:text-blue-500' href='/discord'>
														공식 디스코드
													</a>
													에 참여해주세요
												</p>
											</Message>
										) : (
											<Formik
												onSubmit={async (body) => {
													const res = await Fetch(`/bots/${data.id}/report`, {
														method: 'POST',
														body: JSON.stringify(body),
													})
													setReportRes(res)
												}}
												validationSchema={ReportSchema}
												initialValues={{
													category: null,
													description: '',
													_csrf: csrfToken,
												}}
											>
												{({ errors, touched, values, setFieldValue }) => (
													<Form>
														<div className='mb-5'>
															{reportRes && (
																<div className='my-5'>
																	<Message type='error'>
																		<h2 className='text-lg font-semibold'>{reportRes.message}</h2>
																		<ul className='list-disc'>
																			{reportRes.errors?.map((el, n) => <li key={n}>{el}</li>)}
																		</ul>
																	</Message>
																</div>
															)}
															<h3 className='font-bold'>신고 구분</h3>
															<p className='mb-1 text-sm text-gray-400'>
																해당되는 항목을 선택해주세요.
															</p>
															{reportCats.map((el) => (
																<div key={el}>
																	<label>
																		<Field
																			type='radio'
																			name='category'
																			value={el}
																			className='mr-1.5 py-2'
																		/>
																		{el}
																	</label>
																</div>
															))}
															<div className='mt-1 text-xs font-light text-red-500'>
																{errors.category && touched.category
																	? (errors.category as string)
																	: null}
															</div>
															<h3 className='mt-2 font-bold'>설명</h3>
															<p className='mb-1 text-sm text-gray-400'>
																신고하시는 내용을 자세하게 설명해주세요.
															</p>
															<TextArea
																name='description'
																placeholder='최대한 자세하게 설명해주세요!'
																theme={theme === 'dark' ? 'dark' : 'light'}
																value={values.description}
																setValue={(value) => setFieldValue('description', value)}
															/>
															<div className='mt-1 text-xs font-light text-red-500'>
																{errors.description && touched.description
																	? errors.description
																	: null}
															</div>
														</div>
														<div className='text-right'>
															<Button
																className='bg-gray-500 text-white hover:opacity-90'
																onClick={() => setReportModal(false)}
															>
																취소
															</Button>
															<Button
																type='submit'
																className='bg-red-500 text-white hover:opacity-90'
															>
																제출
															</Button>
														</div>
													</Form>
												)}
											</Formik>
										)}
									</Modal>
									{data.discord && (
										<a
											rel='noopener noreferrer'
											target='_blank'
											className='text-discord-blurple hover:underline'
											href={`https://discord.gg/${data.discord}`}
										>
											<i className='fab fa-discord' />
											디스코드 서버
										</a>
									)}
									{data.web && (
										<a
											rel='noopener noreferrer'
											target='_blank'
											className='text-blue-500 hover:underline'
											href={data.web}
										>
											<i className='fas fa-globe' />
											웹사이트
										</a>
									)}
									{data.git && (
										<a
											rel='noopener noreferrer'
											target='_blank'
											className='hover:underline'
											href={data.git}
										>
											<i
												className={`fab fa-${git[new URL(data.git).hostname]?.icon ?? 'git-alt'}`}
											/>
											{git[new URL(data.git).hostname]?.text ?? 'Git'}
										</a>
									)}
								</div>
								<Advertisement size='tall' />
							</div>
							<div className='w-full lg:w-3/4 lg:pr-5'>
								{checkBotFlag(data.flags, 'hackerthon') ? (
									<Segment className='mt-10'>
										<h1 className='text-3xl font-semibold'>
											<i className='fas fa-trophy my-2 mr-4 text-amber-300' /> 해당 봇은 한국
											디스코드 리스트 해커톤 수상작품입니다!
										</h1>
										<p>
											해당 봇은 한국 디스코드 리스트 주최로 진행되었던 "한국 디스코드 리스트 제1회
											해커톤"에서 우수한 성적을 거둔 봇입니다.
										</p>
										<p>
											자세한 내용은{' '}
											<a
												className='text-blue-500 hover:text-blue-400'
												href='https://blog.koreanbots.dev/first-hackathon-results/'
											>
												해당 글
											</a>
											을 확인해주세요.
										</p>
									</Segment>
								) : (
									''
								)}
								<Segment className='my-4'>
									<Markdown text={desc} />
								</Segment>
								<Advertisement />
							</div>
						</div>
					</>
				)}
			</Container>
		</div>
	)
}

export const getServerSideProps = async (ctx: Context) => {
	const parsed = parseCookie(ctx.req)
	const data = await get.bot.load(ctx.query.id)
	if (!data)
		return {
			props: {
				data,
			},
		}
	const desc = await get.botDescSafe(data.id)
	const user = await get.Authorization(parsed?.token)
	if (
		(checkBotFlag(data.flags, 'trusted') || checkBotFlag(data.flags, 'partnered')) &&
		data.vanity &&
		data.vanity !== ctx.query.id
	) {
		return {
			redirect: {
				destination: `/bots/${data.vanity}`,
				permanent: true,
			},
			props: {},
		}
	}
	return {
		props: {
			data,
			desc,
			date: Number(SnowflakeUtil.deconstruct(data.id ?? '0').timestamp),
			user: await get.user.load(user || ''),
			csrfToken: getToken(ctx.req, ctx.res),
		},
	}
}

export default Bots

interface BotsProps {
	data: Bot
	desc: string
	date: Date
	user: User
	theme: Theme
	csrfToken: string
}
interface Context extends NextPageContext {
	query: URLQuery
}

interface URLQuery extends ParsedUrlQuery {
	id: string
}