/* eslint-disable no-mixed-spaces-and-tabs */
import { LandingPageLayout } from '@/components/Layouts'
import { CekTagihan } from '@/services/cek-tagihan-service'
import { HomepageGet } from '@/services/homepage-service'
import Head from 'next/head'
import Image from 'next/image'
import Link from 'next/link'
import { Button } from 'primereact/button'
import { Column } from 'primereact/column'
import { ColumnGroup } from 'primereact/columngroup'
import { DataTable } from 'primereact/datatable'
import { InputText } from 'primereact/inputtext'
import { Panel } from 'primereact/panel'
import { Row } from 'primereact/row'
import { Steps } from 'primereact/steps'
import React, { useEffect, useState } from 'react'
import { FaFileArrowUp, FaFileCircleCheck, FaFileLines, FaFileSignature } from 'react-icons/fa6'

export default function LandingPage({ token }) {
	const [cekTagihan, setCekTagihan] = useState('')
	const [dataCekTagihan, setDataCekTagihan] = useState([])
	const [data, setData] = useState([
		{
			status_tagihan_daily: {
				'Ditolak/dikembalikan': { total: 0, percentage: 0 },
				'Disetujui dengan catatan': { total: 0, percentage: 0 },
				'Disetujui tanpa catatan': { total: 0, percentage: 0 },
			},
			status_tagihan_ytd: {
				'Ditolak/dikembalikan': { total: 0, percentage: 0 },
				'Disetujui dengan catatan': { total: 0, percentage: 0 },
				'Disetujui tanpa catatan': { total: 0, percentage: 0 },
			},
			jenis_tagihan_daily: {
				GUP: {
					percentage: 0,
					total: 0,
				},
				LS: {
					percentage: 0,
					total: 0,
				},
				PTUP: {
					percentage: 0,
					total: 0,
				},
			},
			jenis_tagihan_yearly: {
				GUP: {
					percentage: 0,
					total: 0,
				},
				LS: {
					percentage: 0,
					total: 0,
				},
				PTUP: {
					percentage: 0,
					total: 0,
				},
			},
		},
	])
	const [dataKetetapan, setDataKetetapan] = useState([])
	const [dataPrgoress, setDataPrgoress] = useState([])

	useEffect(() => {
		HomepageGet()
			.then((res) => {
				setData([res.data])
				setDataKetetapan(res.data.monitoring_ketepatan)
				setDataPrgoress(res.data.monitoring_progress)
			})
			.catch((err) => {
				setData(err)
				console.log('err homepage get', err)
			})
	}, [])
	const handleCari = () => {
		CekTagihan(cekTagihan)
			.then((res) => setDataCekTagihan(res.data))
			.catch((err) => console.log(err))
	}

	const items = [
		{ label: 'Pengajuan tagihan' },
		{ label: 'Berkas telah diverifikasi' },
		{ label: 'Berkas telah divalidasi' },
		{ label: 'Berkas telah diapprove' },
		{ label: 'Berkas disetujui bendahara' },
		{ label: 'Berkas disetujui PPSPM' },
		{ label: 'SPM dikirim', className: 'last-dor' },
	]

	const headerGroup = (
		<ColumnGroup>
			<Row>
				<Column header='No SPP' rowSpan={2} />
				<Column header='Unit Kerja' rowSpan={2} />
				<Column header='Progress' colSpan={6} />
			</Row>
			<Row>
				<Column header='PPK' />
				<Column header='Verifikasi' />
				<Column header='Rekomendasi' />
				<Column header='Persetujuan' />
				<Column header='PPSPM' />
			</Row>
		</ColumnGroup>
	)

	return (
		<div className='landing-page'>
			<Head>
				<title>E-Verifikasi</title>
			</Head>
			<div className='flex items-center 2xl:px-60 md:px-20 py-3 justify-between border-b-2 mx-3'>
				<div className='pl-3'>
					<Image alt='logo' src={'/img/e-verif-title.png'} width={511 / 6} height={540 / 6} />
				</div>
				<div className='title font-bebas 2xl:text-3xl py-2 md:text-xl text-hitam text-lg text-center'>
					<p className='tracking-wide text-3xl'>SISTEM APLIKASI</p>
					<p className='tracking-wide text-3xl'>Penyelesaian Tagihan dan Pertanggungjawaban Keuangan</p>
				</div>
				<div className='hidden md:block'>
					{token ? (
						<Link href={'/dashboard'}>
							<Button label='Dashboard' className='h-8' />
						</Link>
					) : (
						<Link href={'/login'}>
							<Button label='Login' className='h-8' />
						</Link>
					)}
				</div>
			</div>
			<LandingPageLayout>
				<Panel
					headerTemplate={() => {
						return (
							<div className='bg-gradient-to-r from-orange3 to-yellow rounded-t p-2'>
								<p>Cek Tagihan</p>
							</div>
						)
					}}
					toggleable
					className='md:hidden mb-1'
				>
					<div className='mb-5 p-2'>
						<InputText
							value={cekTagihan}
							onChange={(e) => setCekTagihan(e.target.value)}
							placeholder='Masukkan nomor SPP'
							style={{ marginBottom: '10px', width: '100%' }}
						/>
						<Button
							label='Cari tagihan'
							icon='pi pi-search'
							className='p-button-sm'
							style={{ width: '100%' }}
							onClick={() => handleCari()}
						/>
					</div>
					{Object.keys(dataCekTagihan).length > 0 && (
						<React.Fragment>
							<div className='tracking-doc p-2'>
								<div className='rounded-t border-b-2 border-orange pl-1 mb-3 font-semibold text-xl pb-1'>
									Tracking Dokumen
								</div>
								<Steps model={items} className='custom-step' activeIndex={parseInt(dataCekTagihan.detail.tahapan)} />
							</div>
							<div className='detail-doc p-2'>
								<div className='rounded-t border-b-2 border-orange pl-1 mb-3 font-semibold text-xl pb-1'>
									Detail Dokumen
								</div>
								<div className='text-sm'>
									<p>
										No SPP: <span className='font-semibold'>{dataCekTagihan.detail.no_spp}</span>
									</p>
									<p>
										Nama tagihan: <span className='font-semibold'>{dataCekTagihan.detail.nama_tagihan}</span>
									</p>
									<p>
										Nama unit: <span className='font-semibold'>{dataCekTagihan.detail.nama_unit}</span>
									</p>
								</div>
							</div>
						</React.Fragment>
					)}
				</Panel>
				{/* YTD DOKUMEN */}
				<Panel
					headerTemplate={() => {
						return (
							<div className='bg-gray-200 rounded-t p-1'>
								<p>Year to Date</p>
							</div>
						)
					}}
					toggleable
				>
					<div className='grid grid-cols-4 gap-3 p-5'>
						<div className='satu bg-logo-orange1 flex items-center justify-around p-1 rounded'>
							<div className='kiri'>
								<p className='text-sm'>Jumlah Dokumen</p>
								<div className='flex gap-3'>
									<p className='text-lg font-semibold'>
										{data.length > 0 && Object.keys(data[0].status_tagihan_ytd).length > 0
											? data[0].status_tagihan_ytd['Ditolak/dikembalikan'].total +
											  data[0].status_tagihan_ytd['Disetujui dengan catatan'].total +
											  data[0].status_tagihan_ytd['Disetujui tanpa catatan'].total
											: 0}
									</p>
								</div>
							</div>
							<div className='kanan'>
								<FaFileLines color='#D85610' className='text-4xl opacity-50' />
							</div>
						</div>
						<div className='dua bg-logo-pink1 flex items-center justify-around p-1 rounded'>
							<div className='kiri'>
								<p className='text-sm'>Dikembalikan</p>
								<div className='flex gap-3'>
									<p className='text-lg font-semibold'>
										{data.length > 0 && data[0].status_tagihan_ytd['Ditolak/dikembalikan'].total}
									</p>
									<p className='text-lg font-semibold'>
										({data.length > 0 && data[0].status_tagihan_ytd['Ditolak/dikembalikan'].percentage}%)
									</p>
								</div>
							</div>
							<div className='kanan'>
								<FaFileArrowUp color='#D81432' className='text-4xl opacity-50' />
							</div>
						</div>
						<div className='tiga bg-logo-kuning1 flex items-center justify-around p-1 rounded'>
							<div className='kiri'>
								<p className='text-sm'>Dengan Catatan</p>
								<div className='flex gap-3'>
									<p className='text-lg font-semibold'>
										{data.length > 0 && data[0].status_tagihan_ytd['Disetujui dengan catatan'].total}
									</p>
									<p className='text-lg font-semibold'>
										({data.length > 0 && data[0].status_tagihan_ytd['Disetujui dengan catatan'].percentage}%)
									</p>
								</div>
							</div>
							<div className='kanan'>
								<FaFileSignature color='#DC980C' className='text-4xl opacity-50' />
							</div>
						</div>
						<div className='empat bg-logo-biru1 flex items-center justify-around p-1 rounded'>
							<div className='kiri'>
								<p className='text-sm'>Disetujui</p>
								<div className='flex gap-3'>
									<p className='text-lg font-semibold'>
										{data.length > 0 && data[0].status_tagihan_ytd['Disetujui tanpa catatan'].total}
									</p>
									<p className='text-lg font-semibold'>
										({data.length > 0 && data[0].status_tagihan_ytd['Disetujui tanpa catatan'].percentage}%)
									</p>
								</div>
							</div>
							<div className='kanan'>
								<FaFileCircleCheck color='#3666A0' className='text-4xl opacity-50' />
							</div>
						</div>
					</div>
				</Panel>
				{/* TODAY DOKUMEN */}
				<Panel
					headerTemplate={() => {
						return (
							<div className='bg-gray-200 rounded-t p-1 text-sm'>
								<p>Today</p>
							</div>
						)
					}}
					toggleable
				>
					<div className='grid grid-cols-4 gap-3 p-5'>
						<div className='satu bg-logo-orange1 flex items-center justify-around p-1 rounded'>
							<div className='kiri'>
								<p className='text-sm'>Jumlah Dokumen</p>
								<div className='flex gap-3'>
									<p className='text-lg font-semibold'>
										{data[0].status_tagihan_daily['Ditolak/dikembalikan'].total +
											data[0].status_tagihan_daily['Disetujui dengan catatan'].total +
											data[0].status_tagihan_daily['Disetujui tanpa catatan'].total}
									</p>
								</div>
							</div>
							<div className='kanan'>
								<FaFileLines color='#D85610' className='text-4xl opacity-50' />
							</div>
						</div>
						<div className='dua bg-logo-pink1 flex items-center justify-around p-1 rounded'>
							<div className='kiri'>
								<p className='text-sm'>Dikembalikan</p>
								<div className='flex gap-3'>
									<p className='text-lg font-semibold'>{data[0].status_tagihan_daily['Ditolak/dikembalikan'].total}</p>
									<p className='text-lg font-semibold'>
										({data[0].status_tagihan_daily['Ditolak/dikembalikan'].percentage}
										%)
									</p>
								</div>
							</div>
							<div className='kanan'>
								<FaFileArrowUp color='#D81432' className='text-4xl opacity-50' />
							</div>
						</div>
						<div className='tiga bg-logo-kuning1 flex items-center justify-around p-1 rounded'>
							<div className='kiri'>
								<p className='text-sm'>Dengan Catatan</p>
								<div className='flex gap-3'>
									<p className='text-lg font-semibold'>
										{data[0].status_tagihan_daily['Disetujui dengan catatan'].total}
									</p>
									<p className='text-lg font-semibold'>
										({data[0].status_tagihan_daily['Disetujui dengan catatan'].percentage}
										%)
									</p>
								</div>
							</div>
							<div className='kanan'>
								<FaFileSignature color='#DC980C' className='text-4xl opacity-50' />
							</div>
						</div>
						<div className='empat bg-logo-biru1 flex items-center justify-around p-1 rounded'>
							<div className='kiri'>
								<p className='text-sm'>Disetujui</p>
								<div className='flex gap-3'>
									<p className='text-lg font-semibold'>
										{data[0].status_tagihan_daily['Disetujui tanpa catatan'].total}
									</p>
									<p className='text-lg font-semibold'>
										({data[0].status_tagihan_daily['Disetujui tanpa catatan'].percentage}
										%)
									</p>
								</div>
							</div>
							<div className='kanan'>
								<FaFileCircleCheck color='#3666A0' className='text-4xl opacity-50' />
							</div>
						</div>
					</div>
				</Panel>
				{/* YTD ALL TAGIHAN */}
				<Panel
					headerTemplate={() => {
						return (
							<div className='bg-gray-200 rounded-t p-1 text-sm'>
								<p>Year to Date</p>
							</div>
						)
					}}
					toggleable
				>
					<div className='grid grid-cols-3 gap-3 p-5'>
						<div className='satu bg-logo-orange1 flex items-center justify-around p-1 rounded flex-col'>
							<p className='text-sm'>Tagihan LS</p>
							<div className='flex gap-3'>
								<p className='text-lg font-semibold'>{data[0].jenis_tagihan_yearly.LS.total}</p>
								<p className='text-lg font-semibold'>
									({data[0].jenis_tagihan_yearly.LS.percentage}
									%)
								</p>
							</div>
						</div>
						<div className='dua bg-logo-pink1 flex items-center justify-around p-1 rounded flex-col'>
							<p className='text-sm'>Tagihan GU</p>
							<div className='flex gap-3'>
								<p className='text-lg font-semibold'>{data[0].jenis_tagihan_yearly.GUP.total}</p>
								<p className='text-lg font-semibold'>
									({data[0].jenis_tagihan_yearly.GUP.percentage}
									%)
								</p>
							</div>
						</div>
						<div className='tiga bg-logo-kuning1 flex items-center justify-around p-1 rounded flex-col'>
							<p className='text-sm'>Tagihan TUP</p>
							<div className='flex gap-3'>
								<p className='text-lg font-semibold'>{data[0].jenis_tagihan_yearly.PTUP.total}</p>
								<p className='text-lg font-semibold'>
									({data[0].jenis_tagihan_yearly.PTUP.percentage}
									%)
								</p>
							</div>
						</div>
					</div>
				</Panel>
				{/* TODAY ALL TAGIHAN */}
				<Panel
					headerTemplate={() => {
						return (
							<div className='bg-gray-200 rounded-t p-1 text-sm'>
								<p>Today</p>
							</div>
						)
					}}
					toggleable
				>
					<div className='grid grid-cols-3 gap-3 p-3'>
						<div className='satu bg-logo-orange1 flex items-center justify-around p-1 rounded flex-col'>
							<p className='text-sm'>Tagihan LS</p>
							<div className='flex gap-3'>
								<p className='text-lg font-semibold'>{data[0].jenis_tagihan_daily.LS.total}</p>
								<p className='text-lg font-semibold'>
									({data[0].jenis_tagihan_daily.LS.percentage}
									%)
								</p>
							</div>
						</div>
						<div className='dua bg-logo-pink1 flex items-center justify-around p-1 rounded flex-col'>
							<p className='text-sm'>Tagihan GU</p>
							<div className='flex gap-3'>
								<p className='text-lg font-semibold'>{data[0].jenis_tagihan_daily.GUP.total}</p>
								<p className='text-lg font-semibold'>
									({data[0].jenis_tagihan_daily.GUP.percentage}
									%)
								</p>
							</div>
						</div>
						<div className='tiga bg-logo-kuning1 flex items-center justify-around p-1 rounded flex-col'>
							<p className='text-sm'>Tagihan TUP</p>
							<div className='flex gap-3'>
								<p className='text-lg font-semibold'>{data[0].jenis_tagihan_daily.PTUP.total}</p>
								<p className='text-lg font-semibold'>
									({data[0].jenis_tagihan_daily.PTUP.percentage}
									%)
								</p>
							</div>
						</div>
					</div>
				</Panel>

				{/* MONITORING PROGRESS PENYELESAIAN DOKUMEN */}
				<Panel
					headerTemplate={() => {
						return (
							<div className='bg-logo-biru1 rounded-t p-1 text-sm text-white'>
								<p>Monitoring Progress Penyelesaian Dokumen</p>
							</div>
						)
					}}
					toggleable
				>
					<DataTable
						value={dataPrgoress}
						headerColumnGroup={headerGroup}
						tableStyle={{ minWidth: '100%' }}
						size='small'
						stripedRows={true}
						className='p-5'
					>
						<Column field='no_spp' />
						<Column field='unit' />
						<Column field='ppk' />
						<Column field='verifikasi' />
						<Column field='rekomendasi' />
						<Column field='persetujuan' />
						<Column field='ppspm' />
					</DataTable>
				</Panel>

				{/* MONITORING KETEPATAN PENGAJUAN DOKUMEN */}
				<Panel
					headerTemplate={() => {
						return (
							<div className='bg-logo-biru1 rounded-t p-1 text-sm text-white'>
								<p>Monitoring Ketepatan Pengajuan Dokumen</p>
							</div>
						)
					}}
					toggleable
				>
					<DataTable
						value={dataKetetapan}
						tableStyle={{ minWidth: '100%' }}
						size='small'
						stripedRows={true}
						className='p-5'
					>
						<Column header='No SPP' field='no_spp' />
						<Column header='No Tagihan' field='no_tagihan' />
						<Column header='Jenis Tagihan' field='jenis_tagihan' />
						<Column header='Unit Kerja' field='unit_kerja' />
						<Column header='Tanggal Selesai Kegiatan' field='tangga_selesai_kegiatan' />
						<Column header='Tanggal Dokumen Masuk' field='tanggal_dokumen_masuk' />
						<Column header='Keterangan' field='keterangan' />
					</DataTable>
				</Panel>
			</LandingPageLayout>
		</div>
	)
}

export const getServerSideProps = async (ctx) => {
	const token = ctx.req.cookies.token || null

	return {
		props: {
			token,
		},
	}
}
