import { Tabs } from 'antd';
import '../../public/assets/knowledge-quest.css';
import React, { useEffect, useState } from 'react';

interface Performer {
  id: number;
  img: string;
  title: string;
  challenge: string;
  question: string;
}

export default function Index() {
  const [knowledgeDataAll, setKnowledgeDataAll] = useState<Performer[]>([]);
  const [knowledgeCompleted, setKnowledgeCompleted] = useState<Performer[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<Error | null>(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const [allResponse, completedResponse] = await Promise.all([
          fetch('http://localhost:5174/api/all-assesment'),
          fetch('http://localhost:5174/api/complete-assesment')
        ]);

        if (!allResponse.ok || !completedResponse.ok) {
          throw new Error('Network response was not ok');
        }

        const allData = await allResponse.json();
        const completedData = await completedResponse.json();

        setKnowledgeDataAll(allData);
        setKnowledgeCompleted(completedData);
        setLoading(false);
      } catch (error) {
        console.error('Error fetching data:', error);
        if (error instanceof Error) {
          setError(error);
        } else {
          setError(new Error('An unexpected error occurred'));
        }
        setLoading(false);
      }
    };

    fetchData();
  }, []);

  if (loading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  const tabItems = [
    {
      key: '1',
      label: 'All',
      children: (
        <div className='flex flex-col gap-6'>
          {knowledgeDataAll.map(data => (
            <div key={data.id} className='flex flex-col lg:flex-row justify-between px-6 place-items-center'>
              <div className='flex flex-row justify-between gap-6'>
                <img src={data.img} alt="" />
                <div className='flex flex-col space-y-3'>
                  <h2 className='text-[16px] font-[700] text-[#000]'>{data.title}</h2>
                  <p className='text-[14px] font-[600] text-[#525252]'>{data.challenge}</p>
                  <p className='text-[14px] font-[600] text-[#9D9D9D]'>{data.question}</p>
                </div>
              </div>
              <button className='bg-[#000] text-[#FFF] rounded-[8px] px-16 py-3 h-fit text-[18px] font-[600]'>Start</button>
            </div>
          ))}
        </div>
      ),
    },
    {
      key: '2',
      label: 'Completed',
      children: (
        <div className='flex flex-col gap-6'>
          {knowledgeCompleted.map(data => (
            <div key={data.id} className='flex flex-col lg:flex-row justify-between px-6 place-items-center'>
              <div className='flex flex-row justify-between gap-6'>
                <img src={data.img} alt="" />
                <div className='flex flex-col space-y-3'>
                  <h2 className='text-[16px] font-[700] text-[#000]'>{data.title}</h2>
                  <p className='text-[14px] font-[600] text-[#525252]'>{data.challenge}</p>
                  <p className='text-[14px] font-[600] text-[#9D9D9D]'>{data.question} | 200 people have taken this quiz</p>
                  <div className='flex flex-col md:flex-row gap-x-20'>
                    <p className='text-[14px] font-[600]'>Score: 9/10</p>
                    <p className='text-[14px] font-[600] inline-flex place-items-center'>Earned: 9 &nbsp;<img src="../../assets/points-icon.svg" alt="" /></p>
                  </div>
                </div>
              </div>
              <a href='#' className='bg-[#000] text-[#FFF] rounded-[8px] px-16 py-3 h-fit text-[18px] font-[600]'>Review</a>
            </div>
          ))}
        </div>
      ),
    }
  ];

  return (
    <div className=''>
      <Tabs defaultActiveKey="1" items={tabItems} />
    </div>
  );
}