import { useEffect, useState } from "react";
import { useMutation } from "@tanstack/react-query";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Label } from "@/components/ui/label";
import { CheckCircle, LoaderCircleIcon } from "lucide-react";
import { useAuth } from "@/hooks/use-auth";
import { useToast } from "@/hooks/use-toast";
import { PatientTable } from "@/components/patients/patient-table";
import { apiRequest, queryClient } from "@/lib/queryClient";
import { useAppDispatch, useAppSelector } from "@/redux/hooks";
import {
  setTaskStatus,
  clearTaskStatus,
} from "@/redux/slices/seleniumTaskSlice";
import { SeleniumTaskBanner } from "@/components/ui/selenium-task-banner";
import { formatLocalDate, parseLocalDate } from "@/utils/dateUtils";
import { socket } from "@/lib/socket";
import { InsertPatient, Patient } from "@repo/db/types";
import { DateInput } from "@/components/ui/dateInput";
import { QK_PATIENTS_BASE } from "@/components/patients/patient-table";
import { PdfPreviewModal } from "@/components/insurance-status/pdf-preview-modal";
import { useLocation } from "wouter";
import { DdmaEligibilityButton } from "@/components/insurance-status/ddma-buton-modal";
import { DeltaInsEligibilityButton } from "@/components/insurance-status/deltains-button-modal";
import { TuftsSCOEligibilityButton } from "@/components/insurance-status/tufts-sco-button-modal";
import { UnitedSCOEligibilityButton } from "@/components/insurance-status/united-sco-button-modal";
import { CCAEligibilityButton } from "@/components/insurance-status/cca-button-modal";

export default function InsuranceStatusPage() {
  const { user } = useAuth();
  const { toast } = useToast();
  const dispatch = useAppDispatch();
  const { status, message, show } = useAppSelector(
    (state) => state.seleniumTasks.eligibilityCheck,
  );
  const [selectedPatient, setSelectedPatient] = useState<Patient | null>(null);
  const [location, setLocation] = useLocation();

  // Insurance eligibility and claim check form fields
  const [memberId, setMemberId] = useState("");
  const [dateOfBirth, setDateOfBirth] = useState<Date | null>(null);
  const [firstName, setFirstName] = useState("");
  const [lastName, setLastName] = useState("");
  const isFormIncomplete = !memberId || !dateOfBirth;
  const [isCheckingEligibilityStatus, setIsCheckingEligibilityStatus] =
    useState(false);
  const [isCheckingEligibilityAppointment, setIsCheckingEligibilityAppointment] =
    useState(false);
  const [isCheckingEligibilityClaimsPreAuth, setIsCheckingEligibilityClaimsPreAuth] =
    useState(false);

  // PDF preview modal state
  const [previewOpen, setPreviewOpen] = useState(false);
  const [previewPdfId, setPreviewPdfId] = useState<number | null>(null);
  const [previewFallbackFilename, setPreviewFallbackFilename] = useState<
    string | null
  >(null);

  // Populate fields from selected patient
  useEffect(() => {
    if (selectedPatient) {
      setMemberId(selectedPatient.insuranceId ?? "");
      setFirstName(selectedPatient.firstName ?? "");
      setLastName(selectedPatient.lastName ?? "");

      const dob =
        typeof selectedPatient.dateOfBirth === "string"
          ? parseLocalDate(selectedPatient.dateOfBirth)
          : selectedPatient.dateOfBirth;
      setDateOfBirth(dob);
    } else {
      setMemberId("");
      setFirstName("");
      setLastName("");
      setDateOfBirth(null);
    }
  }, [selectedPatient]);

  // Add patient mutation
  const addPatientMutation = useMutation({
    mutationFn: async (patient: InsertPatient) => {
      const res = await apiRequest("POST", "/api/patients/", patient);
      return res.json();
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: QK_PATIENTS_BASE });
      toast({
        title: "Success",
        description: "Patient added successfully!",
        variant: "default",
      });
    },
    onError: (error: any) => {
      const msg = error.message;

      if (msg === "A patient with this insurance ID already exists.") {
        toast({
          title: "Patient already exists",
          description: msg,
          variant: "destructive",
        });
      } else {
        toast({
          title: "Error",
          description: `Failed to add patient: ${msg}`,
          variant: "destructive",
        });
      }
    },
  });

  // Shared: run MH eligibility selenium job, return jobResult or throw
  const runMHEligibilitySelenium = async (): Promise<any> => {
    const formattedDob = dateOfBirth ? formatLocalDate(dateOfBirth) : "";

    const data = {
      memberId,
      dateOfBirth: formattedDob,
      insuranceSiteKey: "MH",
      firstName: firstName || undefined,
      lastName: lastName || undefined,
    };

    dispatch(
      setTaskStatus({
        key: "eligibilityCheck",
        status: "pending",
        message: "Sending Data to Selenium...",
      }),
    );

    const response = await apiRequest(
      "POST",
      "/api/insurance-status/eligibility-check",
      { data: data, socketId: socket.id },
    );
    const enqueueResult = await response.json();
    if (enqueueResult.error) throw new Error(enqueueResult.error);

    const jobId = enqueueResult.jobId;
    if (!jobId) throw new Error("No jobId returned from server");

    dispatch(
      setTaskStatus({
        key: "eligibilityCheck",
        status: "pending",
        message: "Selenium browser starting...",
      }),
    );

    return new Promise<any>((resolve, reject) => {
      const handler = (payload: any) => {
        if (String(payload.jobId) !== String(jobId)) return;
        if (payload.status === "active") {
          dispatch(
            setTaskStatus({
              key: "eligibilityCheck",
              status: "pending",
              message: payload.message ?? "Selenium running...",
            }),
          );
        } else if (payload.status === "completed") {
          socket.off("job:update", handler);
          resolve(payload.result ?? {});
        } else if (payload.status === "failed") {
          socket.off("job:update", handler);
          reject(new Error(payload.error ?? "Selenium job failed"));
        }
      };
      socket.on("job:update", handler);
    });
  };

  const handleAddPatient = async () => {
    const newPatient: InsertPatient = {
      firstName,
      lastName,
      dateOfBirth: dateOfBirth,
      gender: "",
      phone: "",
      userId: user?.id ?? 1,
      insuranceId: memberId,
    };
    await addPatientMutation.mutateAsync(newPatient);
  };

  // MH Eligibility — check eligibility, save to DB, open PDF preview
  const handleMHEligibilityButton = async () => {
    if (!memberId || !dateOfBirth) {
      toast({
        title: "Missing Fields",
        description: "Please fill in all the required fields: Member ID, Date of Birth.",
        variant: "destructive",
      });
      return;
    }

    setIsCheckingEligibilityStatus(true);
    try {
      const jobResult = await runMHEligibilitySelenium();

      dispatch(
        setTaskStatus({
          key: "eligibilityCheck",
          status: "success",
          message: "Patient status is updated, and its eligibility pdf is uploaded at Document Page.",
        }),
      );
      toast({
        title: "Selenium service done.",
        description: "Your Patient Eligibility is fetched and updated, Kindly search through the patient.",
        variant: "default",
      });

      setSelectedPatient(null);
      await queryClient.invalidateQueries({ queryKey: QK_PATIENTS_BASE });

      if (jobResult.pdfFileId) {
        setPreviewPdfId(Number(jobResult.pdfFileId));
        setPreviewFallbackFilename(jobResult.pdfFilename ?? `eligibility_${memberId}.pdf`);
        setPreviewOpen(true);
      }
    } catch (error: any) {
      dispatch(setTaskStatus({ key: "eligibilityCheck", status: "error", message: error.message || "Selenium submission failed" }));
      toast({ title: "Selenium service error", description: error.message || "An error occurred.", variant: "destructive" });
    } finally {
      setIsCheckingEligibilityStatus(false);
    }
  };

  // MH Eligibility & Appointment — check eligibility, save to DB, navigate to appointments
  const handleMHEligibilityAppointmentButton = async () => {
    if (!memberId || !dateOfBirth) {
      toast({
        title: "Missing Fields",
        description: "Please fill in all the required fields: Member ID, Date of Birth.",
        variant: "destructive",
      });
      return;
    }

    setIsCheckingEligibilityAppointment(true);
    try {
      const jobResult = await runMHEligibilitySelenium();

      const isInactive = jobResult?.patientUpdateStatus?.includes("INACTIVE");

      if (isInactive) {
        dispatch(
          setTaskStatus({
            key: "eligibilityCheck",
            status: "error",
            message: "Insurance is inactive. Staying on Eligibility page.",
          }),
        );
        toast({
          title: "Insurance Inactive",
          description: "Patient insurance is inactive. Staying on Eligibility page.",
          variant: "destructive",
        });
        await queryClient.invalidateQueries({ queryKey: QK_PATIENTS_BASE });
        return;
      }

      dispatch(
        setTaskStatus({
          key: "eligibilityCheck",
          status: "success",
          message: "Eligibility checked and saved. Redirecting to Appointments...",
        }),
      );
      toast({
        title: "Eligibility checked.",
        description: "Patient eligibility saved. Redirecting to Appointments.",
        variant: "default",
      });

      setSelectedPatient(null);
      await queryClient.invalidateQueries({ queryKey: QK_PATIENTS_BASE });
      setLocation("/appointments");
    } catch (error: any) {
      dispatch(setTaskStatus({ key: "eligibilityCheck", status: "error", message: error.message || "Selenium submission failed" }));
      toast({ title: "Selenium service error", description: error.message || "An error occurred.", variant: "destructive" });
    } finally {
      setIsCheckingEligibilityAppointment(false);
    }
  };

  // MH Eligibility & Claims/PreAuth — check eligibility, save to DB, navigate to claims
  const handleMHEligibilityClaimsPreAuthButton = async () => {
    if (!memberId || !dateOfBirth) {
      toast({
        title: "Missing Fields",
        description: "Please fill in all the required fields: Member ID, Date of Birth.",
        variant: "destructive",
      });
      return;
    }

    setIsCheckingEligibilityClaimsPreAuth(true);
    try {
      await runMHEligibilitySelenium();

      dispatch(
        setTaskStatus({
          key: "eligibilityCheck",
          status: "success",
          message: "Eligibility checked and saved. Redirecting to Claims/PreAuth...",
        }),
      );
      toast({
        title: "Eligibility checked.",
        description: "Patient eligibility saved. Redirecting to Claims/PreAuth.",
        variant: "default",
      });

      setSelectedPatient(null);
      await queryClient.invalidateQueries({ queryKey: QK_PATIENTS_BASE });
      setLocation("/claims");
    } catch (error: any) {
      dispatch(setTaskStatus({ key: "eligibilityCheck", status: "error", message: error.message || "Selenium submission failed" }));
      toast({ title: "Selenium service error", description: error.message || "An error occurred.", variant: "destructive" });
    } finally {
      setIsCheckingEligibilityClaimsPreAuth(false);
    }
  };

  // small helper: remove given query params from the current URL (silent, no reload)
  const clearUrlParams = (params: string[]) => {
    try {
      const url = new URL(window.location.href);
      let changed = false;
      for (const p of params) {
        if (url.searchParams.has(p)) {
          url.searchParams.delete(p);
          changed = true;
        }
      }
      if (changed) {
        window.history.replaceState({}, document.title, url.toString());
      }
    } catch (e) {
      // ignore
    }
  };

  // handling case-1, when redirect happens from appointment page:
  useEffect(() => {
    const params = new URLSearchParams(window.location.search);
    const appointmentId = params.get("appointmentId");
    const action = params.get("action"); // 'eligibility' | 'claim'
    if (!appointmentId) return;
    const id = Number(appointmentId);
    if (Number.isNaN(id) || id <= 0) return;
    if (!action || (action !== "eligibility" && action !== "claim")) return;

    let cancelled = false;

    (async () => {
      try {
        const res = await apiRequest("GET", `/api/appointments/${id}/patient`);
        if (!res.ok) {
          let body: any = null;
          try {
            body = await res.json();
          } catch {}
          if (!cancelled) {
            toast({
              title: "Failed to load patient",
              description:
                body?.message ??
                body?.error ??
                `Could not fetch patient for appointment ${id}.`,
              variant: "destructive",
            });
          }
          return;
        }

        const data = await res.json();
        const patient = data?.patient ?? data;
        if (!cancelled && patient) {
          // set selectedPatient as before
          setSelectedPatient(patient as Patient);

          clearUrlParams(["appointmentId", "action"]);
        }
      } catch (err: any) {
        if (!cancelled) {
          console.error("Error fetching patient for appointment:", err);
          toast({
            title: "Error",
            description:
              err?.message ?? "An error occurred while fetching patient.",
            variant: "destructive",
          });
        }
      }
    })();

    return () => {
      cancelled = true;
    };
  }, [location]);

  // handling case-1, when redirect happens from appointment page:
  useEffect(() => {
    const params = new URLSearchParams(window.location.search);
    const appointmentId = params.get("appointmentId");
    if (!appointmentId) return;

    const id = Number(appointmentId);
    if (Number.isNaN(id) || id <= 0) return;

    let cancelled = false;

    (async () => {
      try {
        const res = await apiRequest("GET", `/api/appointments/${id}/patient`);
        if (!res.ok) return;

        const data = await res.json();
        const patient = data?.patient ?? data;

        if (!cancelled && patient) {
          // ✅ ONLY prefill patient
          setSelectedPatient(patient as Patient);

          // ✅ clean URL (no auto selenium)
          clearUrlParams(["appointmentId", "action"]);
        }
      } catch (err) {
        console.error("Failed to fetch patient from appointment", err);
      }
    })();

    return () => {
      cancelled = true;
    };
  }, [location]);

  return (
    <div>
      <SeleniumTaskBanner
        status={status}
        message={message}
        show={show}
        onClear={() => dispatch(clearTaskStatus("eligibilityCheck"))}
      />

      <div className="container mx-auto space-y-6">
        <div className="flex justify-between items-center">
          <div>
            <h1 className="text-3xl font-bold tracking-tight">
              Insurance Eligibility
            </h1>
            <p className="text-muted-foreground">
              Check insurance eligibility.
            </p>
          </div>
        </div>

        {/* Insurance Eligibility Check Form */}
        <Card className="mb-6">
          <CardHeader>
            <CardTitle>Check Insurance Eligibility</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="grid grid-cols-4 md:grid-cols-4 gap-4 mb-4">
              <div className="space-y-2">
                <Label htmlFor="memberId">Member ID</Label>
                <Input
                  id="memberId"
                  placeholder="Enter member ID"
                  value={memberId}
                  onChange={(e) => setMemberId(e.target.value)}
                />
              </div>

              <div className="space-y-2">
                <DateInput
                  label="Date of Birth"
                  value={dateOfBirth}
                  onChange={setDateOfBirth}
                  disableFuture
                />
              </div>

              <div className="space-y-2">
                <Label htmlFor="firstName">First Name <span className="text-muted-foreground font-normal">(Optional)</span></Label>
                <Input
                  id="firstName"
                  placeholder="Enter first name"
                  value={firstName}
                  onChange={(e) => setFirstName(e.target.value)}
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="lastName">Last Name <span className="text-muted-foreground font-normal">(Optional)</span></Label>
                <Input
                  id="lastName"
                  placeholder="Enter last name"
                  value={lastName}
                  onChange={(e) => setLastName(e.target.value)}
                />
              </div>
            </div>

            <div className="flex flex-col-2 gap-4">
              <Button
                onClick={() => handleMHEligibilityButton()}
                className="w-full"
                disabled={isCheckingEligibilityStatus}
              >
                {isCheckingEligibilityStatus ? (
                  <>
                    <LoaderCircleIcon className="h-4 w-4 mr-2 animate-spin" />
                    Processing...
                  </>
                ) : (
                  <>
                    <CheckCircle className="h-4 w-4 mr-2" />
                    MH Eligibility
                  </>
                )}
              </Button>

              <Button
                onClick={() => handleMHEligibilityAppointmentButton()}
                className="w-full"
                disabled={isCheckingEligibilityAppointment}
              >
                {isCheckingEligibilityAppointment ? (
                  <>
                    <LoaderCircleIcon className="h-4 w-4 mr-2 animate-spin" />
                    Processing...
                  </>
                ) : (
                  <>
                    <CheckCircle className="h-4 w-4 mr-2" />
                    MH Eligibility&Appointment
                  </>
                )}
              </Button>

              <Button
                onClick={() => handleMHEligibilityClaimsPreAuthButton()}
                className="w-full"
                disabled={isCheckingEligibilityClaimsPreAuth}
              >
                {isCheckingEligibilityClaimsPreAuth ? (
                  <>
                    <LoaderCircleIcon className="h-4 w-4 mr-2 animate-spin" />
                    Processing...
                  </>
                ) : (
                  <>
                    <CheckCircle className="h-4 w-4 mr-2" />
                    MH Eligibility&Claims/PreAuth
                  </>
                )}
              </Button>
            </div>

            {/* TEMP PROVIDER BUTTONS */}
            <div className="space-y-4 mt-6">
              <h3 className="text-sm font-medium text-muted-foreground">
                Other provider checks
              </h3>

              {/* Row 1 */}
              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                <DdmaEligibilityButton
                  memberId={memberId}
                  dateOfBirth={dateOfBirth}
                  firstName={firstName}
                  lastName={lastName}
                  isFormIncomplete={isFormIncomplete}
                  onPdfReady={(pdfId, fallbackFilename) => {
                    setPreviewPdfId(pdfId);
                    setPreviewFallbackFilename(
                      fallbackFilename ?? `eligibility_ddma_${memberId}.pdf`,
                    );
                    setPreviewOpen(true);
                  }}
                />

                <DeltaInsEligibilityButton
                  memberId={memberId}
                  dateOfBirth={dateOfBirth}
                  firstName={firstName}
                  lastName={lastName}
                  isFormIncomplete={isFormIncomplete}
                  onPdfReady={(pdfId, fallbackFilename) => {
                    setPreviewPdfId(pdfId);
                    setPreviewFallbackFilename(
                      fallbackFilename ?? `eligibility_deltains_${memberId}.pdf`,
                    );
                    setPreviewOpen(true);
                  }}
                />

                <Button
                  className="w-full"
                  variant="outline"
                  disabled={isFormIncomplete}
                >
                  <CheckCircle className="h-4 w-4 mr-2" />
                  BCBS
                </Button>
              </div>

              {/* Row 2 */}
              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                <TuftsSCOEligibilityButton
                  memberId={memberId}
                  dateOfBirth={dateOfBirth}
                  firstName={firstName}
                  lastName={lastName}
                  isFormIncomplete={isFormIncomplete}
                  onPdfReady={(pdfId, fallbackFilename) => {
                    setPreviewPdfId(pdfId);
                    setPreviewFallbackFilename(
                      fallbackFilename ?? `eligibility_unitedsco_${memberId}.pdf`,
                    );
                    setPreviewOpen(true);
                  }}
                />

                <UnitedSCOEligibilityButton
                  memberId={memberId}
                  dateOfBirth={dateOfBirth}
                  firstName={firstName}
                  lastName={lastName}
                  isFormIncomplete={isFormIncomplete}
                  onPdfReady={(pdfId, fallbackFilename) => {
                    setPreviewPdfId(pdfId);
                    setPreviewFallbackFilename(
                      fallbackFilename ?? `eligibility_unitedsco_${memberId}.pdf`,
                    );
                    setPreviewOpen(true);
                  }}
                />

                <CCAEligibilityButton
                  memberId={memberId}
                  dateOfBirth={dateOfBirth}
                  firstName={firstName}
                  lastName={lastName}
                  isFormIncomplete={isFormIncomplete}
                  onPdfReady={(pdfId, fallbackFilename) => {
                    setPreviewPdfId(pdfId);
                    setPreviewFallbackFilename(
                      fallbackFilename ?? `eligibility_cca_${memberId}.pdf`,
                    );
                    setPreviewOpen(true);
                  }}
                />
              </div>

              {/* Row 3 */}
              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                <Button
                  className="w-full"
                  variant="outline"
                  disabled={isFormIncomplete}
                >
                  <CheckCircle className="h-4 w-4 mr-2" />
                  United AAPR
                </Button>

                <Button
                  className="w-full"
                  variant="outline"
                  disabled={isFormIncomplete}
                >
                  <CheckCircle className="h-4 w-4 mr-2" />
                  Aetna
                </Button>
                <Button
                  className="w-full"
                  variant="outline"
                  disabled={isFormIncomplete}
                >
                  <CheckCircle className="h-4 w-4 mr-2" />
                  Altus
                </Button>
                <Button
                  className="w-full"
                  variant="outline"
                  disabled={isFormIncomplete}
                >
                  <CheckCircle className="h-4 w-4 mr-2" />
                  Metlife Dental
                </Button>

                <Button
                  className="w-full"
                  variant="outline"
                  disabled={isFormIncomplete}
                >
                  <CheckCircle className="h-4 w-4 mr-2" />
                  Cigna
                </Button>

                <Button
                  className="w-full"
                  variant="outline"
                  disabled={isFormIncomplete}
                >
                  <CheckCircle className="h-4 w-4 mr-2" />
                  Delta WA
                </Button>
              </div>

              {/* Row 5 */}
              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                <Button
                  className="w-full"
                  variant="outline"
                  disabled={isFormIncomplete}
                >
                  <CheckCircle className="h-4 w-4 mr-2" />
                  Delta IL
                </Button>

                <Button
                  className="w-full"
                  variant="outline"
                  disabled={isFormIncomplete}
                >
                  <CheckCircle className="h-4 w-4 mr-2" />
                  Others
                </Button>
              </div>
            </div>
          </CardContent>
        </Card>

        {/* Patients Table */}
        <Card>
          <CardHeader>
            <CardTitle>Patient Records</CardTitle>
            <CardDescription>
              Select Patients and Check Their Eligibility
            </CardDescription>
          </CardHeader>
          <CardContent>
            <PatientTable
              allowView={true}
              allowDelete={true}
              allowCheckbox={true}
              allowEdit={true}
              onSelectPatient={setSelectedPatient}
            />
          </CardContent>
        </Card>
      </div>

      {/* Pdf preview modal */}
      <PdfPreviewModal
        open={previewOpen}
        onClose={() => {
          setPreviewOpen(false);
          setPreviewPdfId(null);
          setPreviewFallbackFilename(null);
        }}
        pdfId={previewPdfId ?? undefined}
        fallbackFilename={previewFallbackFilename ?? undefined} // optional
      />
    </div>
  );
}