/* eslint-disable spellcheck/spell-checker */
'use client';
import React, { useEffect, useState, useCallback } from 'react';
import { useSession } from 'next-auth/react';
import PageHeader from '@/components/pageHeader';
import { Typography, Spin, Select, message } from 'antd';
import DashboardProgressiveDropdownsTest from '../dashboard/components/DashboardProgressiveDropdownsTest';
import FYSummaryCards from './components/FYSummaryCards';
import LastWeekCards from './components/LastWeekCards';
import FYMonthlyTable from './components/FYMonthlyTable';
import {
  getAnalyticsFYSummary,
  getAnalyticsLastWeek,
  getAnalyticsFYMonthly,
  getAnalyticsRoleFilterOptions,
} from './service';
import {
  FYSummaryData,
  LastWeekData,
  FYMonthlyData,
  RoleFilterOptionsData,
  AnalyticsParams,
} from './interface';

const { Title } = Typography;

function AnalyticsPage() {
  const { data: session } = useSession();

  const [financialYear, setFinancialYear] = useState<string>('');
  const [filterUserId, setFilterUserId] = useState<number | undefined>();
  const [filterUserRole, setFilterUserRole] = useState<string | undefined>();
  // Ancestor user IDs above the selected user (top-down, excluding the selected user itself)
  const [filterAncestorIds, setFilterAncestorIds] = useState<number[]>([]);
  const [viewType, setViewType] = useState<string>('combine_view');

  const [roleFilterData, setRoleFilterData] = useState<RoleFilterOptionsData | null>(null);
  const [fySummary, setFySummary] = useState<FYSummaryData | null>(null);
  const [lastWeek, setLastWeek] = useState<LastWeekData | null>(null);
  const [fyMonthly, setFyMonthly] = useState<FYMonthlyData | null>(null);

  const [loading, setLoading] = useState(true);
  const [summaryLoading, setSummaryLoading] = useState(false);
  const [weekLoading, setWeekLoading] = useState(false);
  const [monthlyLoading, setMonthlyLoading] = useState(false);

  // Determine if business fields should be hidden
  // TODO: migrate to ID-based comparison using getRoleByName('pre_sales')?.id once
  // filterUserRole and currentRole carry numeric IDs instead of name strings
  const isPreSalesView = (() => {
    if (filterUserRole) return filterUserRole === 'pre_sales';
    return roleFilterData?.currentRole === 'pre_sales';
  })();

  // Fetch APIs sequentially: fy-summary → last-week → fy-monthly
  // skipWeek = true when only FY changes (last week data is always current week)
  const fetchAnalyticsData = useCallback(
    async(fy: string, userId?: number, userRole?: string, skipWeek = false, veiwData?: string) => {
      const params: AnalyticsParams = { financial_year: fy };
      if (userId && userRole) {
        params.filter_user_id = userId;
        params.filter_user_role = userRole;
      }
      if (veiwData) params.veiw_data = veiwData;

      try {
        // Step 1: FY Summary
        setSummaryLoading(true);
        const summaryRes = await getAnalyticsFYSummary(params);
        if (summaryRes?.data?.success) setFySummary(summaryRes.data.data);
        setSummaryLoading(false);

        // Step 2: Last Week (skip if only FY changed)
        if (!skipWeek) {
          setWeekLoading(true);
          const weekRes = await getAnalyticsLastWeek(params);
          if (weekRes?.data?.success) setLastWeek(weekRes.data.data);
          setWeekLoading(false);
        }

        // Step 3: FY Monthly
        setMonthlyLoading(true);
        const monthlyRes = await getAnalyticsFYMonthly(params);
        if (monthlyRes?.data?.success) setFyMonthly(monthlyRes.data.data);
        setMonthlyLoading(false);
      } catch (error: any) {
        setSummaryLoading(false);
        setWeekLoading(false);
        setMonthlyLoading(false);
        if (error?.response?.status === 403) {
          message.error(error?.response?.data?.message || 'You do not have permission to filter by this role.');
        } else {
          message.error('Something went wrong. Please try again.');
        }
      }
    },
    []
  );

  // Initial load: fetch role-filter-options, then data APIs
  useEffect(() => {
    const init = async() => {
      try {
        const res = await getAnalyticsRoleFilterOptions();
        if (res?.data?.success) {
          const data: RoleFilterOptionsData = res.data.data;
          console.log(data, 'DATA++');
          setRoleFilterData(data);
          setFinancialYear(data.financialYear);
          await fetchAnalyticsData(data.financialYear, undefined, undefined, false, 'combine_view');
        }
      } catch {
        message.error('Failed to load analytics. Please try again.');
      } finally {
        setLoading(false);
      }
    };
    init();
  }, []);

  // Handle FY change — skip last-week API (it's always current week data)
  const handleFYChange = (fy: string) => {
    setFinancialYear(fy);
    fetchAnalyticsData(fy, filterUserId, filterUserRole, true, viewType);
  };

  // Handle user filter change — fetch all 3 APIs.
  // veiwDataOverride is set when the selected user carries its own view type
  // (e.g. "Team Leader (Self)" always implies self_view) — keep it in sync with
  // `viewType` state so a later FY change (which re-sends `viewType`) doesn't lose it.
  const handleUserFilterChange = (userId: number | undefined, userRole: string | undefined, veiwDataOverride?: string) => {
    setFilterUserId(userId);
    setFilterUserRole(userRole);
    if (veiwDataOverride !== undefined) setViewType(veiwDataOverride);
    fetchAnalyticsData(financialYear, userId, userRole, false, veiwDataOverride ?? viewType);
  };

  // Handle view type change (combine/self/partner) — reset user filter, refetch
  const handleViewChange = (newViewType: string) => {
    setViewType(newViewType);
    setFilterUserId(undefined);
    setFilterUserRole(undefined);
    setFilterAncestorIds([]);
    fetchAnalyticsData(financialYear, undefined, undefined, false, newViewType);
  };

  if (loading) {
    return (
      <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '80vh' }}>
        <Spin size="large" tip="Loading Analytics..." />
      </div>
    );
  }

  return (
    <div className="analytics-page dashboard px-4">
      <PageHeader
        isBack={false}
        title="Performance Analytics"
        headerClass="analytics-page-header mb-2"
        extra={
          roleFilterData && (
            <Select
              value={financialYear}
              onChange={handleFYChange}
              style={{ width: 160 }}
              disabled={summaryLoading || weekLoading || monthlyLoading}
              options={roleFilterData.availableFinancialYears.map((fy) => ({
                value: fy,
                label: `FY ${fy}`,
              }))}
            />
          )
        }
      />
      <div className="px-0">
        {/* Filters: Progressive dropdowns (left) + FY dropdown (right) */}
        {/* TODO: migrate to ID-based comparison using getRoleByName once currentRole carries numeric IDs */}
        {roleFilterData && !['pre_sales', 'field_sales'].includes(roleFilterData.currentRole) && (
          <DashboardProgressiveDropdownsTest
            loading={summaryLoading || weekLoading || monthlyLoading}
            onUpdateFilters={(filterUpdates) => {
              // A concrete user was selected (e.g. a manager, Field Sales/Pre-Sales, or
              // the synthetic "Team Leader (Self)" entry) — this takes priority over the
              // veiw_data check below, since a self/partner-view-carrying user selection
              // sets both fields at once and must still resolve to that specific user.
              const hasUserSelection = filterUpdates.lead_user_id !== null && filterUpdates.lead_user_id !== undefined;
              if (hasUserSelection) {
                handleUserFilterChange(
                  filterUpdates.lead_user_id ?? undefined,
                  filterUpdates.lead_user_role_name,
                  filterUpdates.veiw_data as string | undefined
                );
              } else if (filterUpdates.veiw_data !== undefined) {
                handleViewChange(filterUpdates.veiw_data as string);
              } else {
                handleUserFilterChange(undefined, undefined);
              }
            }}
            onSelectionChainChange={(chain) => {
              // chain is all selected users top-down; ancestors = all except the last
              const ancestors = chain.slice(0, -1).map(u => u.id);
              setFilterAncestorIds(ancestors);
            }}
            onApply={() => {}}
            resetLaunchList={() => {}}
            viewData={viewType}
            showCombineView={roleFilterData.currentRole === 'team_lead'}
          />
        )}

        {/* FY Summary Pallets */}
        <Spin spinning={summaryLoading}>
          {fySummary ? (
            <FYSummaryCards data={fySummary} showBusiness={!isPreSalesView} />
          ) : (
            !summaryLoading && <div className="text-center p-6"><Title level={5} type="secondary">No summary data available.</Title></div>
          )}
        </Spin>

        {/* Last Week Performance Pallets */}
        <Spin spinning={weekLoading}>
          {lastWeek ? (
            <LastWeekCards data={lastWeek} showBusiness={!isPreSalesView} />
          ) : (
            !weekLoading && <div className="text-center p-6"><Title level={5} type="secondary">No last week data available.</Title></div>
          )}
        </Spin>

        {/* Monthly Breakdown Table */}
        <Spin spinning={monthlyLoading}>
          {fyMonthly ? (
            <FYMonthlyTable
              data={fyMonthly}
              showBusiness={!isPreSalesView}
              filterUserId={filterUserId}
              filterUserRole={filterUserRole}
              filterAncestorIds={filterAncestorIds}
            />
          ) : (
            !monthlyLoading && <div className="text-center p-6"><Title level={5} type="secondary">No monthly data available.</Title></div>
          )}
        </Spin>
      </div>
    </div>
  );
}

export default AnalyticsPage;