/* eslint-disable spellcheck/spell-checker */
'use client';
import React, { useEffect, useState } from 'react';
import { Button, Form, Select } from 'antd';
import { fetchUserDropdown } from '@/app/enquiries/slice';
import { useDispatch, useSelector } from 'react-redux';
import type { AppDispatch, RootState } from '@/store/store';

interface User {
  id: number;
  first_name: string;
  last_name: string;
  role: string;
  role_label: string;
  role_new_label: string;
  status: string;
  transfer_status: boolean;
  is_blocked?: boolean;
  user_cities: { city_name: string; city_id: number }[];
}

interface AnalyticsFiltersProps {
  currentRole: string;
  loading?: boolean;
  onUserFilterChange: (userId: number | undefined, userRole: string | undefined) => void;
  showViewSelector?: boolean;
  viewType?: string;
  onViewChange?: (viewType: string) => void;
}

const AnalyticsFilters: React.FC<AnalyticsFiltersProps> = ({
  currentRole,
  loading,
  onUserFilterChange,
  showViewSelector = false,
  viewType = 'combine_view',
  onViewChange,
}) => {
  const [form] = Form.useForm();
  const dispatch: AppDispatch = useDispatch();

  const [dropdowns, setDropdowns] = useState<User[][]>([]);
  const [selectedUsers, setSelectedUsers] = useState<(User | null)[]>([]);
  const [pendingFetch, setPendingFetch] = useState<{
    managerRole: string | null;
    managerId: number | null;
  } | null>({ managerRole: null, managerId: null });

  // Pending / apply-button state
  const [pendingUserId, setPendingUserId] = useState<number | undefined>();
  const [pendingUserRole, setPendingUserRole] = useState<string | undefined>();
  const [pendingViewType, setPendingViewType] = useState<string>(viewType);
  const [hasPendingChanges, setHasPendingChanges] = useState(false);

  const userList = useSelector((state: RootState) => state.allLeads.dropdownList);

  // TODO: migrate to ID-based comparison using getRoleByName once currentRole carries numeric IDs instead of name strings
  const isIndividualContributor = ['pre_sales', 'field_sales'].includes(currentRole);

  const viewOptions = [
    { value: 'combine_view', label: 'Combine View' },
    { value: 'self_view', label: 'Self View' },
    { value: 'partner_view', label: 'Partner View' },
  ];

  // Role dropdowns are disabled when self/partner view is active (use pendingViewType for immediate UX feedback)
  const roleDropdownsDisabled = loading || pendingViewType === 'self_view' || pendingViewType === 'partner_view';

  // Fetch dropdown for a given reporting manager
  const fetchDropdown = (reportingManagerId: number | null = null) => {
    setPendingFetch({ managerRole: null, managerId: reportingManagerId });
    dispatch(
      fetchUserDropdown({
        filters: {
          reporting_manager_id: reportingManagerId,
        },
      })
    );
  };

  // Initial fetch on mount
  useEffect(() => {
    if (!isIndividualContributor) {
      fetchDropdown(null);
    }
  }, [currentRole]);

  // When userList updates, populate next dropdown
  useEffect(() => {
    if (pendingFetch && userList.length > 0) {
      setDropdowns((prev) => removeDuplicateDropdowns([...prev, userList]));
      setPendingFetch(null);
    }
  }, [userList]);

  const removeDuplicateDropdowns = (arrays: User[][]) => {
    return arrays.filter((arr, index, self) => {
      const ids = arr.map((user) => user.id).sort().join(',');
      return (
        index ===
        self.findIndex((other) => {
          const otherIds = other.map((user) => user.id).sort().join(',');
          return ids === otherIds;
        })
      );
    });
  };

  const handleSelect = (index: number, userId: number) => {
    const selectedUser = dropdowns[index].find((u) => u.id === userId);
    if (!selectedUser) return;

    // Trim arrays up to current index, add the selected user
    const newSelectedUsers = [...selectedUsers.slice(0, index), selectedUser];
    const newDropdowns = [...dropdowns.slice(0, index + 1)];

    setSelectedUsers(newSelectedUsers);
    setDropdowns(removeDuplicateDropdowns(newDropdowns));

    // Fetch next level
    fetchDropdown(userId);

    // Accumulate — fire only on Apply
    setPendingUserId(userId);
    setPendingUserRole(selectedUser.role);
    setHasPendingChanges(true);
  };

  const handleClear = (index: number) => {
    const updatedDropdowns = dropdowns.slice(0, index + 1);
    const updatedSelectedUsers = [...selectedUsers.slice(0, index)];
    setDropdowns(removeDuplicateDropdowns(updatedDropdowns));
    setSelectedUsers(updatedSelectedUsers);

    const filteredUsers = updatedSelectedUsers.filter((item) => item !== null);
    if (filteredUsers.length > 0) {
      const lastUser = filteredUsers[filteredUsers.length - 1];
      if (lastUser) {
        setPendingUserId(lastUser.id);
        setPendingUserRole(lastUser.role);
      } else {
        setPendingUserId(undefined);
        setPendingUserRole(undefined);
      }
    } else {
      setPendingUserId(undefined);
      setPendingUserRole(undefined);
    }
    setHasPendingChanges(true);
  };

  const handleApply = () => {
    if (!hasPendingChanges) return;
    if (pendingViewType !== viewType) {
      // View changed — parent will also reset user filter
      if (onViewChange) onViewChange(pendingViewType);
    } else {
      onUserFilterChange(pendingUserId, pendingUserRole);
    }
    setHasPendingChanges(false);
  };

  // Get styled label for user — grey for inactive, yellow for transferred, red for blocked
  const getStyledLabel = (user: User): React.ReactNode => {
    const text = `${user.first_name} ${user.last_name} (${user.role_label})`;
    if (user.is_blocked) {
      return <span style={{ color: '#e53e3e' }}>{text}</span>;
    }
    if (user.status === 'inactive') {
      return <span style={{ color: '#b0b0b0' }}>{text}</span>;
    }
    if (user.status === 'active' && user.transfer_status === true) {
      return <span style={{ color: '#d69e2e' }}>{text}</span>;
    }
    return text;
  };

  // Plain text label for filtering
  const getSearchText = (user: User) => {
    return `${user.first_name} ${user.last_name} ${user.role_label}`;
  };

  // Don't render anything for individual contributors (no subordinates)
  if (isIndividualContributor) return null;

  return (
    <div className="analytics-filters-section mb-4">
      <div className="flex items-center flex-wrap gap-2">
        {/* View selector — only for team_lead */}
        {showViewSelector && (
          <Select
            value={pendingViewType}
            options={viewOptions}
            style={{ width: '160px' }}
            disabled={loading}
            onChange={(val: string) => {
              setPendingViewType(val);
              // Reset local dropdowns immediately (same as dashboard behaviour)
              setDropdowns([]);
              setSelectedUsers([]);
              setPendingFetch({ managerRole: null, managerId: null });
              fetchDropdown(null);
              setPendingUserId(undefined);
              setPendingUserRole(undefined);
              setHasPendingChanges(true);
            }}
          />
        )}
        <Form form={form} disabled={roleDropdownsDisabled} className="page-header-left-extra flex items-center flex-wrap gap-2">
          {dropdowns.map((users, index) => (
            <Form.Item key={`dropdown-${index}`} name={`role-${index}`} className="mb-0">
                  <Select
                    options={users.map((user) => ({
                      value: user.id,
                      label: getStyledLabel(user),
                      searchText: getSearchText(user),
                    }))}
                    style={{ width: '220px' }}
                    showSearch
                    allowClear
                    placeholder={users[0]?.role_new_label || `Level ${index + 1}`}
                    filterOption={(input, option) => {
                      const text = String((option as any)?.searchText ?? '');
                      return text.toLowerCase().includes(input.toLowerCase());
                    }}
                    value={selectedUsers[index]?.id ?? undefined}
                    onChange={(value: number | null) => {
                      if (value === null || value === undefined) handleClear(index);
                      else handleSelect(index, value);
                    }}
                    onClear={() => handleClear(index)}
                    loading={loading}
                    disabled={roleDropdownsDisabled}
                  />
            </Form.Item>
          ))}
        </Form>
        <Button
          type="primary"
          disabled={loading || !hasPendingChanges}
          onClick={handleApply}
        >
          Apply
        </Button>
      </div>
    </div>
  );
};

export default AnalyticsFilters;