'use client';
import React, { useEffect, useState } from 'react';
import { Col, notification, Row, Table, Tabs, TabsProps, Tooltip, Typography } from 'antd';
import { AppDispatch, RootState } from '@/store/store';
import { useDispatch, useSelector } from 'react-redux';
import {
  fetchSourceEfficiency,
  fetchSourceEfficiencyTeamLead,
  setDashboardFilter,
  setSourceEfficiencyTab,
} from '../slice';
import { ColumnsType } from 'antd/es/table';
import { dashboardSourceEfficiency } from '../interface';
import { TablePaginationConfig } from 'antd/lib';
import InputSelectAndSearch from '@/components/form/InputSelectAndSearch';
import { getLocalitiesByCityId } from '@/app/cities/service';
import { useSession } from 'next-auth/react';
import { DefaultRoles } from '@/utills/constant';
import { useRoles } from '@/hooks/useRoles';
const { Title, Text } = Typography;

interface Props {
    roles: {
        roleId: number | undefined
        defaultRoles: Record<string, number>;
    }
}

const SourceEfficiency: React.FC<Props> = ({ roles }) => {
   const { data } = useSession();
  const { getRoleByName } = useRoles();
  const dispatch: AppDispatch = useDispatch();
  const {
    sourceEfficiencyData,
    sourceEfficiencyTableHeader,
    sourceEfficiencyTeamLeadData,
    sourceEfficiencyTeamLeadTableHeader,
    dashboardFilter,
    sourceEfficiencyTab,
  } = useSelector((state: RootState) => state.dashboard);
  // Pagination state for different tabs
  const [paginationVisited, setPaginationVisited] = useState({ current: 1, pageSize: 10 });
  const [paginationToken, setPaginationToken] = useState({ current: 1, pageSize: 10 });
  const [paginationBooked, setPaginationBooked] = useState({ current: 1, pageSize: 10 });
  const [selectedCityId, setSelectedCityId] = useState<number>(data?.user?.cities[0]?.city_id || 0)
  const [localityOptions, setLocalityOptions] = useState([]);

  // Determine table data based on user role
  let tableData;
  if (roles?.roleId === roles?.defaultRoles.team_lead) {
    if (sourceEfficiencyTeamLeadData) {
      tableData = [...sourceEfficiencyTeamLeadData];
      tableData.sort((a, b) => a.project_name.localeCompare(b.project_name));
    }
  } else {
    if (sourceEfficiencyData) {
      tableData = [...sourceEfficiencyData];
      tableData.sort((a, b) => a.launch_name.localeCompare(b.launch_name));
    }
  }
  // Determine table header based on user role
  const tableHeader =
        roles?.roleId === roles?.defaultRoles.team_lead
          ? sourceEfficiencyTeamLeadTableHeader
          : sourceEfficiencyTableHeader;

  // Fetch source efficiency data based on user role
  const handleDashboardSourceQualityData = () => {
    if (roles?.roleId === roles?.defaultRoles.team_lead) {
      dispatch(fetchSourceEfficiencyTeamLead({}));
    } else {
      dispatch(fetchSourceEfficiency({}));
    }
  };
  const handleSourceEfficiencyTab = (value: string) => {
    dispatch(setSourceEfficiencyTab(value));
  };

  // Fetch data on component mount and on filter change
  useEffect(() => {
    handleDashboardSourceQualityData();
  }, [
    sourceEfficiencyTab,
    dashboardFilter.launch_id,
    dashboardFilter.lead_user_city_id,
    dashboardFilter.lead_user_id,
    dashboardFilter.lead_user_role_name,
    dashboardFilter?.veiw_data,
  ]);

  // Fetch Locality Options for the specific city
  useEffect(() => {
    const fetchLocalities = async(search?: string) => {
      try {
        const res = await getLocalitiesByCityId(selectedCityId || 0, { search });
        const formatData = res?.data?.data?.map(
          (locality: { name: string }) => ({
            value: locality?.name,
            label: locality?.name,
          }),
        );
        setLocalityOptions(formatData);
      } catch (error) {
        notification.error({ message: 'Error fetching localities' });
      }
    };
    fetchLocalities();
  }, []);

  const columnsSourceEfficiency: ColumnsType<dashboardSourceEfficiency> = [
    {
      title:
                roles?.roleId === roles?.defaultRoles.team_lead
                  ? 'Project / Source'
                  : 'Launch / Source',
      dataIndex:
                roles?.roleId === roles?.defaultRoles.team_lead ? 'project_name' : 'launch_name',
      key:
                roles?.roleId === roles?.defaultRoles.team_lead ? 'project_name' : 'launch_name',
      align: 'left',
      width: 200,
      fixed: 'left',
    },
    ...tableHeader.map((item: { dataIndex: number; }) => ({
      ...item,
      render: (data: { value: string; color: string }, record: { [x: string]: string; }) => {
        return (
          <Tooltip
            title={`Total Lead Count: ${
              record[`${item.dataIndex}_total_count`] !== undefined
                ? record[`${item.dataIndex}_total_count`]
                : '0'
            }`}>
            <Text style={{ color: data?.color || 'inherit' }}>
              {data?.value || '0%'}
            </Text>
          </Tooltip>
        );
      },
    })),
  ];

  // Handlers for pagination change events
  const handleTableChangeVisited = (pagination: TablePaginationConfig) => {
    setPaginationVisited(pagination as { current: number; pageSize: number });
  };

  const handleTableChangeToken = (pagination: TablePaginationConfig) => {
    setPaginationToken(pagination as { current: number; pageSize: number });
  };

  const handleTableChangeBooked = (pagination: TablePaginationConfig) => {
    setPaginationBooked(pagination as { current: number; pageSize: number });
  };

  // Source Efficiency Tabs Content
  const sourceEfficiencyItems: TabsProps['items'] = [
    {
      key: 'visited',
      label: 'Visits',
      children: (
        <>
          <Table
            bordered
            pagination={{ ...paginationVisited }}
            onChange={handleTableChangeVisited}
            tableLayout="fixed"
            scroll={{ x: true }}
            className="table-layout-fixed"
            dataSource={tableData}
            columns={columnsSourceEfficiency}
          />
        </>
      ),
    },
    {
      key: 'token',
      label: 'Tokens',
      children: (
        <>
          <Table
            bordered
            pagination={{ ...paginationToken }}
            onChange={handleTableChangeToken}
            tableLayout="fixed"
            scroll={{ x: true }}
            className="table-layout-fixed"
            dataSource={tableData}
            columns={columnsSourceEfficiency}
          />
        </>
      ),
    },
    {
      key: 'booked',
      label: 'Bookings',
      children: (
        <>
          <Table
            bordered
            pagination={{ ...paginationBooked }}
            onChange={handleTableChangeBooked}
            tableLayout="fixed"
            scroll={{ x: true }}
            className="table-layout-fixed"
            dataSource={tableData}
            columns={columnsSourceEfficiency}
          />
        </>
      ),
    },
  ];

  // handle Locality filter change
  const handleFilterChange = (key: string, value: any) => {
    let locality_names = value. join(',');
    // Dispatch to Redux
    dispatch(setDashboardFilter({ [key]: locality_names }));
    handleDashboardSourceQualityData();
  }
  return (
    <Row gutter={[40, 40]} className="mb-5">
      <Col span={24}>
        <div className="dashboard-section-header" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <Title level={4} style={{ margin: 0 }}>Source Efficiency</Title>
          {/* Localities Filter for Visit, Token & Booking Numbers in City Head & Cluster Manager Source Efficiency Section */}
          {(roles.roleId == getRoleByName('city_head')?.id || roles.roleId == getRoleByName('cluster_manager')?.id) && <InputSelectAndSearch
            mode="multiple"
            label=""
            name="value"
            placeholder="Locality"
            options={localityOptions}
            style={{ width: '220px' }}
            onChange={(value) => {
              handleFilterChange('locality', value);
            }}
          />}
        </div>
        <Tabs
          defaultActiveKey="visited"
          size="middle"
          items={sourceEfficiencyItems}
          onChange={handleSourceEfficiencyTab}
          className="custom-tabs-horizontal"
        />
      </Col>
    </Row>
  );
};
export default SourceEfficiency;