'use client'

import CaseComplaint from '@/app/ui/file-page/violation-table/case-complaint';
import CaseLegal from '@/app/ui/file-page/violation-table/case-claims';
import { ViolationFileDetail } from '@/app/hooks/react-query/useFileViolations';
import { MatchStatus } from '@/app/actions/violationActions';
import { useEffect, useState } from 'react';
import { useUserProfile } from '@/app/hooks/react-query/useUserDataInfo';
import { useTranslations } from 'next-intl';

type UpdateStatusHandler = (id: number, status: MatchStatus) => Promise<boolean>;

const STATUSES_IN_WORK = ['COMPLAINT_IN_WORK', 'LEGAL_IN_WORK', 'COMPLAINT_AND_LEGAL_IN_WORK'];

type TabType = 'complaint' | 'claim'

export default function FilePageViolationInfoTabs({ selectedViolation, updateStatusHandler, caseType }: { selectedViolation: ViolationFileDetail, updateStatusHandler: UpdateStatusHandler, caseType?: 'claim' | 'complaint' }) {
	const t = useTranslations('Global');
	const [activeTab, setActiveTab] = useState<TabType>('complaint');
	const [showTabs, setShowTabs] = useState(false);
	const isInWork = STATUSES_IN_WORK.includes(selectedViolation.status);
	const { data: userData, isLoading, isError, error } = useUserProfile();

	const [localViolation, setLocalViolation] = useState<ViolationFileDetail>(selectedViolation);

	useEffect(() => {
		setLocalViolation(selectedViolation);

		if (caseType) {
			setActiveTab(caseType)
		}
	}, [selectedViolation]);

	useEffect(() => {
		setShowTabs(false);
	}, [localViolation.id]);

	if (userData?.verifiedStatus !== "VERIFIED") {
		return (
			<div
				className="violation-info-not-verified"
			>
				<div>
					Подача жалобы/претензии невозможна,
					<br />
					так как вы не подтвердили свою личность
				</div>
				<div>
					<button
						className="btn-s"
					>
						Подтвердить
					</button>
				</div>
			</div>
		)
	}

	if (!isInWork && !showTabs) {
		return (
			<div className="violation-info-choice">
				<h4>
					{t('you-can')}
				</h4>
				<div className="violation-info-choice-buttons">
					<button
						className="btn btn-primary"
						onClick={() => {
							setShowTabs(true);
							setActiveTab('complaint');
						}}
					>
						{t('file-a-complaint')}
					</button>

					<span>
						{t('or')}
					</span>

					<button
						className="btn btn-primary"
						onClick={() => {
							setShowTabs(true);
							setActiveTab('claim');
						}}
					>
						{t('file-a-claim')}
					</button>
				</div>
			</div>
		);
	}

	return (
		<div className="violation-info-tabs-wrapper">
			<div className="violation-info-tabs">
				<button
					className={`btn-s btn-primary ${activeTab === 'complaint' ? 'active' : ''} ${localViolation.status === 'COMPLAINT_IN_WORK' || localViolation.status === 'COMPLAINT_AND_LEGAL_IN_WORK' ? '' : 'action'}`}
					onClick={() => setActiveTab('complaint')}
				>
					{localViolation.status === 'COMPLAINT_IN_WORK' || localViolation.status === 'COMPLAINT_AND_LEGAL_IN_WORK' ? t('complaint') : t('file-a-complaint')}
				</button>
				<button
					className={`btn-s btn-primary ${activeTab === 'claim' ? 'active' : ''} ${localViolation.status === 'LEGAL_IN_WORK' || localViolation.status === 'COMPLAINT_AND_LEGAL_IN_WORK' ? '' : 'action'}`}
					onClick={() => setActiveTab('claim')}
				>
					{localViolation.status === 'LEGAL_IN_WORK' || localViolation.status === 'COMPLAINT_AND_LEGAL_IN_WORK' ? t('case') : t('file-a-claim')}
				</button>
			</div>
			<div className="violation-info-content">
				{activeTab === 'complaint' && (
					<CaseComplaint
						key={"complaint_" + localViolation.id}
						selectedViolation={localViolation}
						updateStatusHandler={updateStatusHandler}
						setLocalViolation={setLocalViolation}
					/>
				)}
				{activeTab === 'claim' && (
					<CaseLegal
						key={"legal_" + localViolation.id}
						selectedViolation={localViolation}
						updateStatusHandler={updateStatusHandler}
						setLocalViolation={setLocalViolation}
					/>
				)}
			</div>
		</div>
	);
}