'use client';

import React, { useState, useMemo, useEffect } from 'react';
import {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogTitle,
  DialogDescription,
  DialogClose,
} from '@/components/ui/dialog';
import CommonImage from '@/components/common/CommonImage';
import { Text } from '@/components/ui/text';
import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
import { useForm } from 'react-hook-form';
import { Form } from '@/components/ui/form';
import { z } from 'zod';
import { zodResolver } from '@hookform/resolvers/zod';
import {
  API_ENDPOINTS,
  VC_ASSOCIATE_TYPES,
  VC_COMMISSION_TYPE,
} from '@/constants';
import { useToast } from '@/hooks/use-toast';
import { UnknownRecord } from '@/types';
import { globalApiGet, globalApiPost } from '@/services/global/globalApiCalls';
import { Button } from '@/components/ui/button';
import { getMonthShortName } from '@/utils/formatDate';
import { formatDate } from '@/utils/decorators';
import CaseCards from './CaseCards';
import { AddCommissionContractProps } from '@/components/visa-commission/contracts/forms/constants';
import StepOneInfo from '@/components/visa-commission/enquiry/form-components/StepOneInfo';

const CommissionReceivedView: React.FC<AddCommissionContractProps> = ({
  record,
  triggerIcon,
  bucket,
}) => {
  const { toast } = useToast();
  const [dialogKey, setDialogKey] = useState(0);
  const [isOpen, setIsOpen] = useState(false);
  const [nextStepValues, setNextStepValues] = useState<UnknownRecord[]>([]);
  const [eligibleCases, setEligibleCases] = useState<UnknownRecord[]>([]);
  const [isFormInitialized, setIsFormInitialized] = useState(false);
  const [existingCommissionAmount, setExistingCommissionAmount] = useState<
    any[]
  >([]);
  const [totalCommission, setTotalCommission] = useState<string | number>('');
  const [isLoading, setIsLoading] = useState(false);

  const EditCommissionEnquirySchema = bucket?.crud?.edit.schema.validator;

  const form = useForm<z.infer<typeof EditCommissionEnquirySchema>>({
    resolver: zodResolver(EditCommissionEnquirySchema),
    defaultValues: {},
  });

  const {
    control,
    formState: { errors },
    setValue,
  } = form;

  const enquiryType = useMemo(
    () => bucket?.additional_info?.association_type,
    [bucket],
  );

  const enquiryTypeLabel = useMemo(
    () => (enquiryType ? VC_ASSOCIATE_TYPES[enquiryType as string] : ''),
    [enquiryType],
  );

  useEffect(() => {
    if (eligibleCases.length > 0 && !isFormInitialized && !isLoading) {
      const initialItems = eligibleCases.map((rec, index) => {
        const visaCaseId = String(rec.visa_case_id ?? rec.id);

        const sameCaseRecords = eligibleCases.filter(
          (r) => String(r.visa_case_id ?? r.id) === visaCaseId,
        );

        const initialItem = {
          response: rec.response || '',
          commission_date: rec.commission_date
            ? formatDate(rec.commission_date, 'DD/MM/YYYY')
            : '',
          difference: rec.difference || '',
          difference_reason: rec.difference_reason || '',
          remarks: rec.remarks || '',
          response_reason: rec.response_reason || '',
          response_reason_id: rec.response_reason_id || '',
          difference_reason_id: rec.difference_reason_id || '',

          // Commission data
          tuition_fees: rec.tuition_fees || '0',
          commission_type: rec.commission_type || '1',
          commission_percentage: rec.commission_percentage || '0',
          commission_amount: rec.commission_amount || '0',
          tuition_fees_currency: rec.tuition_fees_currency || 'USD',
          commission_currency: rec.commission_currency || 'USD',
          ma_commission_type: rec.ma_commission_type || '1',
          ma_commission_percentage: String(rec.ma_commission_percentage) || '0',
          ma_commission_amount: String(rec.ma_commission_amount) || '0',

          // Student data
          case_uid: rec.case_uid,
          course_end_date: rec.course_end_date,
          course_start_date: rec.course_start_date,
          fname: rec.fname,
          lname: rec.lname,
          student_uid: rec.student_uid,
          visa_result_on: rec.visa_result_on,
          visa_status: rec.visa_status,
          id: rec.main_id ?? rec.id,
          visa_case_id: visaCaseId,
          modified_by_user: String(rec.modified_by_user ?? ''),
          is_revised: rec.response === '' ? '1' : '0',

          // Grouping metadata
          group_index: sameCaseRecords.findIndex(
            (r) => r.main_id === rec.main_id || r.id === rec.id,
          ),
          group_total: sameCaseRecords.length,
          group_id: visaCaseId,
        };

        return initialItem;
      });

      let commissionAmount = 0;

      // Reset existing commission amounts
      setExistingCommissionAmount([]);

      initialItems.forEach((item: any, index) => {
        const amount = parseFloat(item.commission_amount) || 0;
        commissionAmount += amount;

        setExistingCommissionAmount((prev) => ({
          ...prev,
          [index]: item,
        }));

        Object.keys(item).forEach((key) => {
          setValue(`items.${index}.${key}`, item[key]);
        });
      });

      commissionAmount = parseFloat(commissionAmount.toFixed(2));
      setTotalCommission(commissionAmount);

      setIsFormInitialized(true);
    }
  }, [eligibleCases, isFormInitialized, setValue, isLoading]);

  const handleDialogOpen = async () => {
    try {
      const res: UnknownRecord = await globalApiPost(
        API_ENDPOINTS.VC_RECEIVED.RECEIVED_INFO,
        {
          id: String(record?.id),
          association_type: enquiryType,
        },
      );
      const enquiry = enquiryType == 1 ? res.institute_enquiry : res.ma_enquiry;

      const set: UnknownRecord = await globalApiGet(
        `${API_ENDPOINTS.VCM.CONTRACT_SET_DETAILS_BY_ID}/${enquiry?.contract_set_id}`,
      );

      const applicableOnId = enquiry?.applicable_on_id ?? 0;

      const applicableOn: UnknownRecord = await globalApiPost(
        `${API_ENDPOINTS.VCM.CONTRACT_APPLICABLE_ON_BY_ID}`,
        { id: String(applicableOnId), type: '2' },
      );

      let applicableOnIndex = 0;
      if (applicableOn && applicableOnId) {
        applicableOnIndex = applicableOn.findIndex(
          (item: { id: number | string }) =>
            String(item.id) === String(applicableOnId),
        );
      }

      const baseValues = [
        { title: 'Client Country', value: enquiry?.client_country?.name },
        { title: 'Visa Service Country', value: enquiry?.visa_country?.name },
        {
          title: 'Institute',
          value: `${enquiry?.institute?.institueName} (${enquiry?.institute?.UID})`,
        },
        {
          title: 'Intake',
          value: `${getMonthShortName(enquiry?.intake?.intakemonth, false)}-${enquiry?.intake?.intakeyear}`,
        },
        {
          title: 'Applicable On',
          value: `Applicable On Set - ${applicableOnIndex + 1}`,
        },
        { title: 'Contract Set', value: `${set?.set_name}` },
        {
          title: 'Commission Instance',
          value: `Instance ${enquiry?.instance?.instance}`,
        },
        { title: 'Invoice Branch', value: enquiry?.branch?.center_name },
        {
          title: 'Invoice Bank Account',
          value: `${enquiry?.bank?.acc_number || ''} - ${enquiry?.bank?.bank_name || ''}, ${enquiry?.bank?.company_bank_address || ''}`,
        },
      ];

      if (Number(enquiryType) === 2) {
        baseValues.splice(2, 0, {
          title: 'Associate',
          value:
            `${res?.ma_enquiry?.associate?.masteragentName} (${res?.ma_enquiry?.associate?.uid})` ||
            'N/A',
        });
      }

      const commissionType = Number(res?.ma_enquiry?.ma_commission_type);

      const commissionTypeObj = VC_COMMISSION_TYPE.find(
        (item) => item.id === commissionType,
      );

      let maCommissionField: any[] = [];

      if (commissionType === 1) {
        maCommissionField = [
          {
            title: '(MA) Commission Amount',
            value: res?.ma_enquiry?.ma_commission_amount ?? 'N/A',
          },
        ];
      } else if (commissionType === 2) {
        maCommissionField = [
          {
            title: '(MA) Commission Percentage',
            value: res?.ma_enquiry?.ma_commission_percentage
              ? `${res.ma_enquiry?.ma_commission_percentage}%`
              : 'N/A',
          },
        ];
      }

      const finalValues =
        Number(enquiryType) === 2
          ? [
              ...baseValues,
              {
                title: '(MA) Commission Type',
                value: commissionTypeObj?.label || 'N/A',
              },
              ...maCommissionField,
            ]
          : baseValues;

      setNextStepValues(finalValues);

      const details = res.case_details;
      setEligibleCases(Array.isArray(details) ? details : []);
    } catch (error) {
      console.error('Error fetching details:', error);
      setEligibleCases([]);
    }
  };

  const handleOpenChange = async (open: boolean) => {
    setIsOpen(open);
    if (open) {
      setIsLoading(true);

      try {
        await handleDialogOpen();
      } catch (error) {
        console.error('Error loading dialog data:', error);
        toast({
          variant: 'destructive',
          title: 'Failed to load dialog data',
          duration: 2000,
        });
      } finally {
        setIsLoading(false);
      }
    }
  };

  return (
    <Dialog open={isOpen} onOpenChange={handleOpenChange}>
      <DialogTrigger asChild>
        {triggerIcon || (
          <Button className="button-action">
            <CommonImage
              src={'/main/pass-show.webp'}
              width={15}
              height={15}
              alt={'View Info'}
              classname="info-icon"
            />
          </Button>
        )}
      </DialogTrigger>

      <DialogContent
        key={dialogKey}
        className="modal-common-widget w-full max-w-7xl p-0 m-0 table-modal-settings state-widget"
        onInteractOutside={(e) => e.preventDefault()}
        onEscapeKeyDown={(e) => e.preventDefault()}
        onClick={(e) => e.stopPropagation()}
      >
        <DialogTitle className="p-5 modal-header">
          {`Commission Received Info - ${enquiryTypeLabel}`}
        </DialogTitle>
        <DialogDescription>{''}</DialogDescription>
        <DialogClose asChild>
          <button
            onClick={() => setIsOpen(false)}
            className="dialog-close absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none z-[9]"
            aria-label="Close"
          >
            <CommonImage
              src="/main/cross-arrow.webp"
              width={15}
              height={15}
              alt="Close"
              classname="dialog-close-img"
            />
          </button>
        </DialogClose>
        <VisuallyHidden>
          <DialogTitle>Hidden Title</DialogTitle>
        </VisuallyHidden>

        {isLoading ? (
          <div className="flex justify-center items-center p-8">
            <Text>Loading commission data...</Text>
          </div>
        ) : (
          <Form {...form}>
            <form>
              <Text className="main-scroll-widget">
                <Text className="flex flex-wrap p-2 form-mid mt-0">
                  <StepOneInfo titles={nextStepValues} />
                  {isFormInitialized && eligibleCases.length > 0 && (
                    <CaseCards
                      enquiryType={enquiryType as string}
                      eligibleCases={eligibleCases}
                    />
                  )}
                </Text>
              </Text>
            </form>
          </Form>
        )}
      </DialogContent>
    </Dialog>
  );
};

export default CommissionReceivedView;