'use client';

import { ResumeData } from '@/types/types';
import { useQuery } from 'react-query';
import React from 'react';
import { Card, Spin, Button } from 'antd';
import style from './Resume.module.scss';
import {
	fetchJobsMatches,
	fetchJobsHardSkills,
	downloadResume,
} from '@/api/api';

interface ResumeProps {
	id: number;
}

const Resume: React.FC<ResumeProps> = ({ id }) => {
	// Получение данных о резюме
	const {
		data: resumeData,
		error: resumeError,
		isLoading: resumeLoading,
	} = useQuery<ResumeData[]>(['matches', id], () => fetchJobsMatches(id), {
		refetchOnWindowFocus: false,
		retry: false,
	});

	// Получение данных о хардскиллах
	const {
		data: hardSkillsData,
		error: hardSkillsError,
		isLoading: hardSkillsLoading,
	} = useQuery<string[]>(['hardSkills', id], () => fetchJobsHardSkills(id), {
		refetchOnWindowFocus: false,
		retry: false,
	});

	if (resumeLoading || hardSkillsLoading) return <Spin size='large' />;
	if (resumeError || hardSkillsError)
		return (
			<div className={style.not_found}>
				Произошла ошибка при загрузке данных
			</div>
		);

	// Функция для обработки клика по кнопке скачивания
	const handleDownload = (filename: string) => {
		downloadResume(filename);
	};


	console.log(resumeData)
	return (
		<div>
			{resumeData && resumeData.length > 0 ? (
				<div className={style.card_wrapper}>
					{resumeData.map((resume, index) => (
						<Card
							key={index}
							title={resume.Name}
							bordered={false}
							className={style.card_item}
						>
							<p>
								<strong>Тип:</strong> {resume.Type}
							</p>
							<p>
								<strong>Группа:</strong> {resume.Group}
							</p>
							<p>
								<strong>Занятость:</strong>{' '}
								{resume.Time.length > 1
									? resume.Time.join(', ')
									: resume.Time[0]}
							</p>
							<p>
								<strong>Soft Skills:</strong> {resume.Soft_skills}
							</p>
							<p>
								<strong>Номер телефона:</strong> {resume.Phone_number}
							</p>
							<p>
								<strong>Факультет:</strong> {resume.Faculties}
							</p>
							<p>
								<strong>Email:</strong> {resume.Email}
							</p>
							{hardSkillsData && hardSkillsData.length > 0 && (
								<p>
									<strong>Hard Skills:</strong> {hardSkillsData.join(', ')}
								</p>
							)}
							<Button
								type='primary'
								onClick={() => handleDownload(resume.Link)}
							>
								Скачать PDF
							</Button>
						</Card>
					))}
				</div>
			) : (
				<div>Подходящих резюме не найдено</div>
			)}
		</div>
	);
};

export default Resume;