import { Table } from 'antd';
import axios from 'axios';
import Cookies from 'js-cookie';
import React, { useEffect, useState } from 'react'

const MarketerList = () => {
  const [data, setData] = useState<any[]>([]);
  const [loading, setLoading] = useState<boolean>(true);
  const [error, setError] = useState<string | null>(null);

  const columns = [
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: 'Phone',
      dataIndex: 'phone',
      key: 'phone',
    },
    {
      title: 'Referral Code',
      dataIndex: 'referralCode',
      key: 'referralCode',
    },
    {
      title: 'Referral Count',
      dataIndex: 'referralUserCount',
      key: 'referralUserCount',
    },
    {
      title: 'Item Count',
      dataIndex: 'totalProductCount',
      key: 'totalProductCount',
    },
  ];

  useEffect(() => {
    const fetchData = async () => {
      const accessToken = Cookies.get("jazz_token");
      try {
        const response = await axios.get('https://api.jazzagain.com/public/index.php/api/admin/getReferralData', {
          headers: {
            authorization: `Bearer ${accessToken}`,
          },
        });

        const result = response.data.data;

        if (result) {
          const formattedData = result.map((item: any, index: number) => ({
            ...item,
            key: item.referralCode || index,
          }));
          setData(formattedData);
        } else {
          setError('No data found');
        }
      } catch (err) {
        setError('Failed to fetch data');
        console.error(err);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []);

  if (loading) {
    return <div className='p-2'>Loading...</div>;
  }

  if (error) {
    return <div className='p-2'>Error: {error}</div>;
  }

  return (
    <div className='mt-[10%] md:mt-[3%]'>
      <Table dataSource={data} columns={columns} />
    </div>
  )
}

export default MarketerList