'use client';
import { Table, Button, Form, Card, Drawer, Tooltip } from 'antd';
import React, { useEffect, useRef, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import type { AppDispatch, RootState } from '@/store/store';
import { fetchAllLeads, fetchFilterLaunchList } from '../enquiries/slice';
import { ExportOutlined, LayoutOutlined, SettingOutlined } from '@ant-design/icons';
import ColumnHideShowModal from '@/components/commonModal/ColumnHideShowModal';
import InputSelect from '@/components/form/InputSelect';
import PageHeader from '@/components/pageHeader';
import {
  type ClearAllFiltersMethods,
  type Column,
  type LeadsPayload,
  type LeadsRecordI,
  type VisibleColumnsI,
  type filterI,
} from '../enquiries/interface';
import FilterLeads from '../enquiries/components/FilterLeads';
import { displayDate, displayTime, removeEmptyKeys } from '@/utills/helper';
import { useRoles } from '@/hooks/useRoles';
import { FILTERS, VISIBLE_COLUMNS, LEAD_TAGS } from '../enquiries/constant';
import { useSession } from 'next-auth/react';
import { LEADS_STATUS } from '@/utills/constant';
import LeadDetailsPage from '../enquiries/view-lead/[id]/LeadDetailsPage';
import { FormattedBudget } from '@/components/amountFormat/AmountFormatter';
import { getExportLeads } from '../enquiries/service';
import { useRouter, useSearchParams, usePathname } from 'next/navigation';
import { fetchRoles } from '../role/slice';
import DashboardProgressiveDropdownsTest from '../dashboard/components/DashboardProgressiveDropdownsTest';

interface RecordType {
  id: number;
  scheduled_date: string;
  status_id: number;
  team_stage: string;
  launch_name?: string;
  agreement_value: number;
  min_budget: number;
  max_budget: number;
}

// Create a modified FILTERS constant with tag pre-set to 'super_hot'
const SUPER_HOT_FILTERS = {
  ...FILTERS,
  tag: 'super_hot',
};

const SuperHotLeadsPage: React.FC = () => {
  const [form] = Form.useForm();
  const [showHideColumnModal, setShowHideColumnModal] = useState<boolean>(false);
  const [filters, setFilters] = useState<filterI>(SUPER_HOT_FILTERS);
  const [roleFilters] = useState<any>({
    page: 1,
    sortColumn: 'sort_order',
  });
  const [visibleColumns, setVisibleColumns] = useState<VisibleColumnsI>({ ...VISIBLE_COLUMNS });
  const { allLeads, leadsMeta, status } = useSelector((state: RootState) => state.allLeads);
  const { roles } = useSelector((state: RootState) => state.roles);
  const filterLaunchLList = useSelector((state: RootState) => state?.allLeads?.filterLaunchLList);
  const launchListOptions = filterLaunchLList?.map((project: any) => ({
    value: project.launch_id,
    label: project.launch_name,
  }));
  const [leadDetailsPage, setLeadDetailsPage] = useState<number | null>(null);
  const [loading, setLoading] = useState(false);

  const clearAllFilters = useRef<ClearAllFiltersMethods | null>(null);
  const dispatch: AppDispatch = useDispatch();
  const { data: session } = useSession();
  const user = session?.user;
  const userRoleId = session?.user?.role?.id;

  const router = useRouter();
  const params = useSearchParams();
  const pathname = usePathname();

  const id: any = params.get('id');

  // Fixed tab key for this page - always use 'all_leads'
  const selectedMenuItem = 'all_leads';

  // Fetch lead details when 'id' changes
  useEffect(() => {
    showLeadDetailDrawer(id);
  }, [id]);

  // Fetch projects list and retrieve visible columns from local storage on component mount
  useEffect(() => {
    fetchProjectsList();
    if (window) {
      const cols = window.localStorage.getItem('superHotLeadsColumns');
      if (cols) {
        setVisibleColumns(JSON.parse(cols));
      }
    }
  }, []);

  useEffect(() => {
    if (roles?.length === 0) {
      dispatch(fetchRoles(roleFilters));
    }
  }, [roles]);

  // Function to fetch leads data based on filters
  const fetchLeads = async (filtersParam: filterI): Promise<void> => {
    setLoading(true);
    const table = filtersParam.filterTabs[selectedMenuItem as keyof typeof filtersParam.filterTabs];
    // Always ensure tag is set to 'super_hot'
    const filtersWithTag = { ...filtersParam, tag: 'super_hot' };
    let obj = {
      filters: {
        ...filtersWithTag,
        ...table,
      },
      tabKey: selectedMenuItem,
    };
    await dispatch(fetchFilterLaunchList(filtersWithTag));
    await dispatch(fetchAllLeads(obj));
    setFilters(obj.filters);
    setLoading(false);
  };

  const fetchProjectsList = (): void => {
    dispatch(fetchFilterLaunchList(filters));
  };

  const { getRoleByName } = useRoles();

  const columns = visibleColumns[selectedMenuItem]
    ?.filter((col: Column) => col.isVisible)
    .map((col: Column) => {
      if (col.isDate) {
        col.render = (text: string) => displayDate(text);
      } else if (col?.isDateTime) {
        col.render = (text: string, record: RecordType) => {
          if (
            [
              LEADS_STATUS.scheduled_sv.id,
              LEADS_STATUS.scheduled_vc.id,
              LEADS_STATUS.scheduled_obm.id,
            ].includes(record.status_id)
          ) {
            return `${displayDate(record.scheduled_date)} ${displayTime(record.scheduled_date)}`;
          } else {
            return `${displayDate(text)} ${displayTime(text)}`;
          }
        };
      } else if (col?.dataIndex === 'remark') {
        col.render = (text: string) => {
          return (
            <div className="remark-text-length">
              <Tooltip destroyTooltipOnHide={true} title={text}>
                {text}
              </Tooltip>
            </div>
          );
        };
      }
      if (col.key === 'project_name') {
        col.render = (text: string, record: RecordType) => {
          return record.launch_name ? (
            <div id={`project_name_${record.id}`}>
              <Tooltip
                key={`project_name_${record.id}`}
                getPopupContainer={() => {
                  const element = document.getElementById(`project_name_${record.id}`);
                  return element || document.body;
                }}
                destroyTooltipOnHide={true}
                title={record.launch_name}
              >
                {text}
              </Tooltip>
            </div>
          ) : (
            text
          );
        };
      }
      if (col.key === 'min_budget') {
        col.render = (text: string, record: RecordType) => (
          <>
            <FormattedBudget minAmount={record.min_budget} maxAmount={record.max_budget} />
          </>
        );
      }
      if (col.key === 'tag') {
        col.render = (text: string) => {
          const tag = LEAD_TAGS.find((t) => t.value === text);
          return tag ? tag.label : text || '-';
        };
      }
      return col;
    });

  const handleCloseModal = (): void => {
    setShowHideColumnModal(false);
  };

  const handleTableChange = (pagination: LeadsPayload, tableFilters: filterI, sorter: filterI): void => {
    const fiData = filters.filterTabs[selectedMenuItem as keyof typeof filters.filterTabs];
    fiData.page = pagination?.current;
    fiData.pageSize = pagination?.pageSize;

    if (sorter?.order === 'ascend') {
      fiData.sortOrder = 'asc';
      fiData.sortColumn = sorter?.field ?? '';
    } else if (sorter?.order === 'descend') {
      fiData.sortOrder = 'desc';
      fiData.sortColumn = sorter?.field ?? '';
    } else {
      fiData.sortOrder = '';
      fiData.sortColumn = '';
    }

    const newFilters: filterI = {
      ...filters,
      filterTabs: {
        ...filters.filterTabs,
        [selectedMenuItem as keyof typeof filters.filterTabs]: fiData,
      },
    };
    setFilters(newFilters);
    fetchLeads(newFilters);
  };

  const onRow = (record: LeadsRecordI) => {
    return {
      onClick: () => {
        showLeadDetailDrawer(record.id);
      },
      style: { cursor: 'pointer' },
    };
  };

  function showLeadDetailDrawer(id: number) {
    if (id === null) {
      setLeadDetailsPage(null);
    } else {
      document.documentElement.style.overflow = 'hidden';
      document.body.style.overflow = 'hidden';
    }
    setLeadDetailsPage(id);
  }

  const onLeadDetailClose = () => {
    setLeadDetailsPage(null);
    document.documentElement.style.overflow = '';
    document.body.style.overflow = '';
    router.push(pathname);
  };

  const onSuccessLeadDetailClose = () => {
    onLeadDetailClose();
    fetchLeads(filters);
  };

  const updateFilters = (filterUpdates: Partial<filterI>): void => {
    const fiData = filters.filterTabs[selectedMenuItem as keyof typeof filters.filterTabs];
    fiData.page = 1;

    const newFilters = {
      ...filters,
      ...filterUpdates,
      tag: 'super_hot', // Always ensure tag is super_hot

      filterTabs: {
        ...filters.filterTabs,
        [selectedMenuItem as keyof typeof filters.filterTabs]: fiData,
      },
    };
    setFilters(newFilters);
    fetchLeads(newFilters);
  };

  const handleLeadExport = () => {
    const queryString = removeEmptyKeys({
      ...filters,
      ...filters.filterTabs[selectedMenuItem as keyof typeof filters.filterTabs],
      tag: 'super_hot',
    });
    if (allLeads.length) {
      getExportLeads(queryString, selectedMenuItem);
    }
  };

  const resetLaunchList = () => {
    form.resetFields(['launch_list']);
    setFilters({ ...filters, launch_id: '' });
  };

  let showCombineView =
    userRoleId === getRoleByName('team_lead')?.id ||
    userRoleId === getRoleByName('field_sales')?.id ||
    userRoleId === getRoleByName('pre_sales')?.id;

  return (
    <div>
      <PageHeader
        title="Super Hot Leads"
        isBack={false}
        headerClass="all-leads-page-header"
        leftExtra={
          <>
            <DashboardProgressiveDropdownsTest
              onUpdateFilters={updateFilters}
              loading={loading}
              resetLaunchList={resetLaunchList}
              viewData={form.getFieldValue('veiw_data')}
              showCombineView={showCombineView}
            />
          </>
        }
        extra={
          <Form form={form} initialValues={{ launch_list: null }}>
            <div className="leads-right-filter">
              <Form.Item label="Showing Data For:" className="label-showing-data-for"></Form.Item>
              <InputSelect
                options={launchListOptions}
                className="project-list-select"
                name="launch_list"
                placeholder="Launch List"
                isSearchable
                onSelect={(value) => {
                  Object.keys(filters.filterTabs).map((item: string) => {
                    filters.filterTabs[item as keyof typeof filters.filterTabs] = {
                      ...filters.filterTabs[item as keyof typeof filters.filterTabs],
                      page: 1,
                    };
                  });
                  setFilters({ ...filters, launch_id: value });
                  fetchLeads({ ...filters, launch_id: value });
                }}
                onClear={() => {
                  resetLaunchList();
                }}
                disabled={loading === true}
              />
              {(userRoleId === getRoleByName('super_admin')?.id || userRoleId === getRoleByName('city_head')?.id) && (
                <Button
                  onClick={handleLeadExport}
                  disabled={!allLeads?.length}
                  type="primary"
                  ghost
                  icon={<ExportOutlined />}
                  className="export-btn"
                >
                  Export Data
                </Button>
              )}
            </div>
          </Form>
        }
      />
      <div>
        <Card
          size="small"
          className="mb-3"
          style={{
            padding: 0,
            borderRadius: '8px',
          }}
        >
          <div
            style={{
              display: 'flex',
              alignItems: 'flex-start',
              gap: '16px',
            }}
          >
            <FilterLeads
              forwardRef={clearAllFilters}
              onSearch={(filter) => {
                // Always ensure tag is super_hot when searching
                fetchLeads({ ...filter, tag: 'super_hot' });
              }}
              showLeadsCalendar={false}
              selectedMenuItem={selectedMenuItem}
              setFilters={setFilters}
              filters={filters}
              hideTagFilter={true}
            />

            <Button
              icon={
                <div className="column-layout-icon">
                  <LayoutOutlined />
                  <SettingOutlined />
                </div>
              }
              onClick={() => {
                setShowHideColumnModal(true);
              }}
              className="column-layout-btn"
            />
          </div>
        </Card>

        <ColumnHideShowModal
          visibleColumns={visibleColumns}
          setVisibleColumns={setVisibleColumns}
          selectedMenuItem={selectedMenuItem}
          showHideColumnModal={showHideColumnModal}
          handleCloseModal={handleCloseModal}
        />

        <Table
          columns={columns}
          dataSource={allLeads}
          bordered
          rowKey="id"
          onRow={onRow}
          rowClassName={(record: LeadsRecordI) =>
            record.lead_status_name === 'Interested' ? 'custom-error-row' : ''
          }
          tableLayout="fixed"
          scroll={{ x: true }}
          className="table-layout-fixed"
          loading={loading === true}
          pagination={{
            current: leadsMeta?.current_page,
            pageSize: leadsMeta?.per_page,
            total: leadsMeta?.total,
            showSizeChanger: true,
            pageSizeOptions: ['10', '20', '50', '100'],
            defaultPageSize: 10,
            showTotal: (total, range) => `${range[0]}-${range[1]} of ${total} entries`,
          }}
          onChange={(pagination: any, tableFilters: any, sorter: any) => {
            const myTableFilter = {
              ...tableFilters,
              ...filters,
            };
            handleTableChange(pagination, myTableFilter, sorter);
          }}
        />
      </div>

      <Drawer
        title="Lead Detail"
        width={'calc(100vw - 235px)'}
        onClose={onLeadDetailClose}
        open={leadDetailsPage !== null}
        className="lead-detail-drawer"
      >
        {leadDetailsPage && (
          <LeadDetailsPage
            params={{ id: `${leadDetailsPage}` }}
            getLeads={() => fetchLeads(filters)}
            onClose={onLeadDetailClose}
            onSuccess={onSuccessLeadDetailClose}
          />
        )}
      </Drawer>
    </div>
  );
};

export default SuperHotLeadsPage;