import { useState, useEffect, useRef, useCallback, memo, useMemo } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
import { Label } from "@/components/ui/label";
import { X, Calendar as CalendarIcon, HelpCircle, Trash2 } from "lucide-react";
import { useToast } from "@/hooks/use-toast";
import { Calendar } from "@/components/ui/calendar";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";
import { useQuery } from "@tanstack/react-query";
import { apiRequest } from "@/lib/queryClient";
import {
  MultipleFileUploadZone,
  MultipleFileUploadZoneHandle,
} from "../file-upload/multiple-file-upload-zone";
import { useAuth } from "@/hooks/use-auth";
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/components/ui/tooltip";
import { formatLocalDate, parseLocalDate } from "@/utils/dateUtils";
import {
  Claim,
  ClaimFileMeta,
  ClaimFormData,
  ClaimPreAuthData,
  InputServiceLine,
  InsertAppointment,
  MissingTeethStatus,
  NpiProvider,
  Patient,
  Staff,
  UpdateAppointment,
  UpdatePatient,
} from "@repo/db/types";
import { Decimal } from "decimal.js";
import {
  mapPricesForForm,
  applyComboToForm,
  getDescriptionForCode,
  findPriceMismatches,
  type PriceMismatch,
} from "@/utils/procedureCombosMapping";
import { PROCEDURE_COMBOS } from "@/utils/procedureCombos";
import { DateInput } from "../ui/dateInput";
import { MissingTeethSimple, type MissingMapStrict } from "./tooth-ui";
import { RemarksField } from "./claims-ui";
import {
  DirectComboButtons,
  RegularComboButtons,
} from "@/components/procedure/procedure-combo-buttons";
import { Switch } from "@/components/ui/switch";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/components/ui/alert-dialog";

interface ClaimFormProps {
  patientId: number;
  appointmentId?: number;
  autoSubmit?: boolean;
  /** When true: form saves to AppointmentProcedure (Select Procedures flow), shows only Save button */
  proceduresOnly?: boolean;
  onSubmit: (data: ClaimFormData) => Promise<Claim>;
  onHandleAppointmentSubmit: (
    appointmentData: InsertAppointment | UpdateAppointment,
  ) => Promise<number | { id: number }>;
  onHandleUpdatePatient: (patient: UpdatePatient & { id: number }) => void;
  onHandleForMHSeleniumClaim: (data: ClaimFormData) => void;
  onHandleForMHSeleniumClaimPreAuth: (data: ClaimPreAuthData) => void;
  onHandleForCCASeleniumClaim: (data: ClaimFormData) => void;
  onHandleForCCASeleniumPreAuth: (data: ClaimPreAuthData) => void;
  onHandleForDDMASeleniumClaim: (data: ClaimFormData) => void;
  onHandleForUnitedDHSeleniumClaim: (data: ClaimFormData) => void;
  onHandleForTuftsSCOSeleniumClaim: (data: ClaimFormData) => void;
  onClose: () => void;
  isLicensed?: boolean;
}

export function ClaimForm({
  patientId,
  appointmentId,
  autoSubmit,
  proceduresOnly = false,
  onHandleAppointmentSubmit,
  onHandleUpdatePatient,
  onHandleForMHSeleniumClaim,
  onHandleForMHSeleniumClaimPreAuth,
  onHandleForCCASeleniumClaim,
  onHandleForCCASeleniumPreAuth,
  onHandleForDDMASeleniumClaim,
  onHandleForUnitedDHSeleniumClaim,
  onHandleForTuftsSCOSeleniumClaim,
  onSubmit,
  onClose,
  isLicensed = false,
}: ClaimFormProps) {
  const { toast } = useToast();
  const { user } = useAuth();

  const [prefillDone, setPrefillDone] = useState(false);
  const autoSubmittedRef = useRef(false);
  // When an existing claim is loaded for the appointment, store its ID so
  // the form submits an update instead of creating a new claim.
  const [existingClaimId, setExistingClaimId] = useState<number | null>(null);

  const [directSubmitEnabled, setDirectSubmitEnabled] = useState(false);
  const [patient, setPatient] = useState<Patient | null>(null);
  // staffId from the appointment column — used for claim creation, not shown in UI
  const [appointmentStaffId, setAppointmentStaffId] = useState<number | null>(null);
  // npiProviderId loaded from AppointmentProcedure (2b) — restored to form when npiProviders load
  const [savedProcNpiId, setSavedProcNpiId] = useState<number | null>(null);

  // Query patient based on given patient id
  const {
    data: fetchedPatient,
    isLoading,
    error,
  } = useQuery<Patient>({
    queryKey: ["/api/patients/", patientId],
    queryFn: async () => {
      const res = await apiRequest("GET", `/api/patients/${patientId}`);
      if (!res.ok) throw new Error("Failed to fetch patient");
      return res.json();
    },
    enabled: !!patientId,
  });

  // Sync fetched patient when available
  useEffect(() => {
    if (fetchedPatient) {
      setPatient(fetchedPatient);
    }
  }, [fetchedPatient]);

  //Fetching staff memebers
  const [staff, setStaff] = useState<Staff | null>(null);
  const { data: staffMembersRaw = [] as Staff[], isLoading: isLoadingStaff } =
    useQuery<Staff[]>({
      queryKey: ["/api/staffs/"],
      queryFn: async () => {
        const res = await apiRequest("GET", "/api/staffs/");
        return res.json();
      },
    });
  useEffect(() => {
    if (staffMembersRaw.length > 0 && !staff) {
      const kaiGao = staffMembersRaw.find(
        (member) => member.name === "Kai Gao",
      );
      const defaultStaff = kaiGao || staffMembersRaw[0];
      if (defaultStaff) setStaff(defaultStaff);
    }
  }, [staffMembersRaw, staff]);

  // fetching npi providers
  const { data: npiProviders = [] } = useQuery<NpiProvider[]>({
    queryKey: ["/api/npiProviders/"],
    queryFn: async () => {
      const res = await apiRequest("GET", "/api/npiProviders/");
      if (!res.ok) throw new Error("Failed to fetch NPI providers");
      return res.json();
    },
  });

  useEffect(() => {
    if (!npiProviders.length) return;

    // do not override if user already selected
    if (form.npiProvider?.npiNumber) return;

    const maryScannell = npiProviders.find(
      (p) => p.providerName.toLowerCase() === "mary scannell",
    );

    const fallback = maryScannell || npiProviders[0];

    if (fallback) {
      setForm((prev) => ({
        ...prev,
        npiProvider: {
          npiNumber: fallback.npiNumber,
          providerName: fallback.providerName,
        },
      }));
    }
  }, [npiProviders]);

  // Service date state
  const [serviceDateValue, setServiceDateValue] = useState<Date>(new Date());
  const [serviceDate, setServiceDate] = useState<string>(
    formatLocalDate(new Date()),
  );
  const [serviceDateOpen, setServiceDateOpen] = useState(false);
  const [openProcedureDateIndex, setOpenProcedureDateIndex] = useState<
    number | null
  >(null);

  //incase when appointmentId is given - directly from appoinmentpage - claimpage - to here.
  // then, update the service date as per the appointment date.
  useEffect(() => {
    if (!appointmentId) return;
    if (!Number.isFinite(appointmentId) || appointmentId <= 0) return;

    let cancelled = false;

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

        const appointment = await res.json();

        // Capture the column staffId from the appointment
        if (!cancelled && appointment?.staffId) {
          setAppointmentStaffId(Number(appointment.staffId));
        }

        // appointment.date is expected to be either "YYYY-MM-DD" or an ISO string.
        const rawDate = appointment?.date ?? appointment?.day ?? "";
        if (!rawDate) return;

        // Use your parseLocalDate to create a local-midnight Date (avoid TZ shifts)
        let dateVal: Date;
        try {
          dateVal = parseLocalDate(String(rawDate));
        } catch (e) {
          // Fallback - try constructing Date and then normalize
          const maybe = new Date(rawDate);
          if (isNaN(maybe.getTime())) {
            console.error("Could not parse appointment date:", rawDate);
            return;
          }
          dateVal = new Date(
            maybe.getFullYear(),
            maybe.getMonth(),
            maybe.getDate(),
          );
        }

        if (!cancelled) {
          setServiceDateValue(dateVal);
          setServiceDate(formatLocalDate(dateVal));
        }
      } catch (err: any) {
        if (!cancelled) {
          console.error("Error fetching appointment:", err);
          toast({
            title: "Error",
            description: err?.message ?? "Failed to fetch Appointment.",
            variant: "destructive",
          });
        }
      }
    })();

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

  //

  // 2a. Load existing saved claim for this appointment (if any).
  //     Skipped in proceduresOnly mode — that mode always reads from AppointmentProcedure.
  useEffect(() => {
    if (!appointmentId) return;
    if (proceduresOnly) return;
    let cancelled = false;

    (async () => {
      try {
        const res = await apiRequest(
          "GET",
          `/api/claims/by-appointment/${appointmentId}`,
        );
        if (!res.ok) return; // 404 = no existing claim, that's fine

        const claim = await res.json();
        if (cancelled || !claim?.id) return;

        setExistingClaimId(claim.id);

        // Restore service date
        const rawDate = claim.serviceDate ?? "";
        const claimDate = rawDate
          ? String(rawDate).split("T")[0] ?? ""
          : "";
        if (claimDate) {
          try {
            setServiceDateValue(parseLocalDate(claimDate));
            setServiceDate(claimDate);
          } catch {}
        }

        // Prefer AppointmentProcedure records for service lines — they reflect any
        // updates the user made in the Select Procedure dialog after the claim was saved.
        let serviceLines: InputServiceLine[] = [];
        try {
          const procRes = await apiRequest(
            "GET",
            `/api/appointment-procedures/prefill-from-appointment/${appointmentId}`,
          );
          if (procRes.ok) {
            const procData = await procRes.json();
            if ((procData.procedures || []).length > 0) {
              serviceLines = (procData.procedures as any[]).map((p) => ({
                procedureCode: p.procedureCode ?? "",
                procedureDate: claimDate || serviceDate,
                quad: p.quad || "",
                arch: p.arch || "",
                toothNumber: p.toothNumber || "",
                toothSurface: p.toothSurface || "",
                totalBilled: new Decimal(Number(p.fee ?? 0)),
                totalAdjusted: new Decimal(0),
                totalPaid: new Decimal(0),
              }));
            }
          }
        } catch {}

        // Fall back to the claim's own service lines if no AppointmentProcedure records exist
        if (serviceLines.length === 0) {
          serviceLines = (claim.serviceLines ?? []).map((sl: any) => ({
            procedureCode: sl.procedureCode ?? "",
            procedureDate: sl.procedureDate
              ? String(sl.procedureDate).split("T")[0]
              : claimDate,
            quad: sl.quad ?? "",
            arch: sl.arch ?? "",
            toothNumber: sl.toothNumber ?? "",
            toothSurface: sl.toothSurface ?? "",
            totalBilled: new Decimal(Number(sl.totalBilled ?? 0)),
            totalAdjusted: new Decimal(Number(sl.totalAdjusted ?? 0)),
            totalPaid: new Decimal(Number(sl.totalPaid ?? 0)),
          }));
        }

        setForm((prev) => ({
          ...prev,
          claimId: claim.id,
          serviceDate: claimDate || prev.serviceDate,
          serviceLines: serviceLines.length > 0 ? serviceLines : prev.serviceLines,
          remarks: claim.remarks ?? "",
          missingTeethStatus: (claim.missingTeethStatus as MissingTeethStatus) ?? "No_missing",
          missingTeeth: (claim.missingTeeth as Record<string, "X" | "O">) ?? {},
          insuranceProvider: claim.insuranceProvider ?? "",
          insuranceSiteKey: claim.insuranceSiteKey || deriveInsuranceSiteKey(claim.insuranceProvider),
          ...(claim.staffId ? { staffId: claim.staffId } : {}),
          claimFiles: claim.claimFiles ?? [],
        }));

        // Restore staff selection
        if (claim.staffId && staffMembersRaw.length > 0) {
          const matchedStaff = staffMembersRaw.find(
            (s) => Number(s.id) === Number(claim.staffId),
          );
          if (matchedStaff) setStaff(matchedStaff);
        }

        // Restore NPI provider selection
        if ((claim as any).npiProviderId && npiProviders.length > 0) {
          const matchedNpi = npiProviders.find(
            (p) => Number(p.id) === Number((claim as any).npiProviderId),
          );
          if (matchedNpi) {
            setForm((prev) => ({
              ...prev,
              npiProvider: {
                npiNumber: matchedNpi.npiNumber,
                providerName: matchedNpi.providerName,
              },
            }));
          }
        }

        setPrefillDone(true);
      } catch (err) {
        // no existing claim — silently continue
      }
    })();

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

  // 2b. Prefill procedures from AppointmentProcedure records.
  //     Skipped when an existing claim was already loaded above.
  useEffect(() => {
    if (!appointmentId) return;
    if (existingClaimId) return; // existing claim takes priority

    let cancelled = false;

    (async () => {
      try {
        const res = await apiRequest(
          "GET",
          `/api/appointment-procedures/prefill-from-appointment/${appointmentId}`,
        );
        if (!res.ok) return;

        const data = await res.json();

        if (cancelled) return;

        const mappedLines = (data.procedures || []).map((p: any) => ({
          procedureCode: p.procedureCode,
          procedureDate: serviceDate,
          quad: (p as any).quad || "",
          arch: (p as any).arch || "",
          toothNumber: p.toothNumber || "",
          toothSurface: p.toothSurface || "",
          totalBilled: new Decimal(p.fee || 0),
          totalAdjusted: new Decimal(0),
          totalPaid: new Decimal(0),
        }));

        setForm((prev) => ({
          ...prev,
          serviceLines: mappedLines,
          ...(data.appointmentFiles?.length
            ? { claimFiles: data.appointmentFiles }
            : {}),
        }));

        // Restore NPI provider from saved procedures
        if (data.npiProviderId) {
          const npiId = Number(data.npiProviderId);
          setSavedProcNpiId(npiId);
          // Apply immediately if providers are already loaded
          const matched = npiProviders.find((p) => p.id === npiId);
          if (matched) {
            setForm((prev) => ({
              ...prev,
              npiProvider: { npiNumber: matched.npiNumber, providerName: matched.providerName },
            }));
          }
        }

        setPrefillDone(true);
      } catch (err) {
        console.error("Failed to prefill procedures:", err);
      }
    })();

    return () => {
      cancelled = true;
    };
  }, [appointmentId, serviceDate, existingClaimId]);

  // Restore NPI provider from saved procedures when npiProviders list loads after 2b
  useEffect(() => {
    if (!savedProcNpiId || !npiProviders.length) return;
    if (form.npiProvider?.npiNumber) return; // already set
    const matched = npiProviders.find((p) => p.id === savedProcNpiId);
    if (matched) {
      setForm((prev) => ({
        ...prev,
        npiProvider: { npiNumber: matched.npiNumber, providerName: matched.providerName },
      }));
    }
  }, [savedProcNpiId, npiProviders]);

  // Update service date when calendar date changes
  const onServiceDateChange = (date: Date | undefined) => {
    if (date) {
      const formattedDate = formatLocalDate(date);
      setServiceDateValue(date);
      setServiceDate(formattedDate);
      setForm((prev) => ({ ...prev, serviceDate: formattedDate }));
    }
  };

  // when service date is chenged, it will change the each service lines procedure date in sync as well.
  useEffect(() => {
    setForm((prevForm) => {
      const updatedLines = prevForm.serviceLines.map((line) => ({
        ...line,
        procedureDate: serviceDate, // set all to current serviceDate string
      }));
      return {
        ...prevForm,
        serviceLines: updatedLines,
        serviceDate, // keep form.serviceDate in sync as well
      };
    });
  }, [serviceDate]);

  // Determine patient date of birth format - required as date extracted from pdfs has different format.
  // Replace previous implementation with this type-safe normalizer.
  // Always returns canonical YYYY-MM-DD or "" if it cannot parse.
  function normalizeToIsoDateString(dob: string | Date | undefined): string {
    if (!dob) return "";

    // Date object -> canonicalize
    if (dob instanceof Date) {
      if (isNaN(dob.getTime())) return "";
      return formatLocalDate(dob);
    }

    const raw = String(dob).trim();
    if (!raw) return "";

    // 1) If already date-only ISO (yyyy-mm-dd)
    if (/^\d{4}-\d{2}-\d{2}$/.test(raw)) {
      try {
        parseLocalDate(raw); // validate
        return raw;
      } catch {
        return "";
      }
    }

    // 2) Try parseLocalDate for ISO-like inputs (will throw if not suitable)
    try {
      const parsed = parseLocalDate(raw);
      return formatLocalDate(parsed);
    } catch {
      // continue to other fallbacks
    }

    // 3) MM/DD/YYYY or M/D/YYYY -> convert to ISO
    const m1 = raw.match(/^(\d{1,2})\/(\d{1,2})\/(\d{4})$/);
    if (m1) {
      const mm = m1[1] ?? "";
      const dd = m1[2] ?? "";
      const yyyy = m1[3] ?? "";
      if (mm && dd && yyyy) {
        const iso = `${yyyy}-${mm.padStart(2, "0")}-${dd.padStart(2, "0")}`;
        try {
          parseLocalDate(iso);
          return iso;
        } catch {
          return "";
        }
      }
    }

    // 4) OCR-ish short form: MMDDYY (exactly 6 digits) -> guess century
    const m2 = raw.match(/^(\d{6})$/);
    if (m2) {
      const s = m2[1];
      if (s && s.length === 6) {
        const mm = s.slice(0, 2);
        const dd = s.slice(2, 4);
        const yy = s.slice(4, 6);
        const year = Number(yy) < 50 ? 2000 + Number(yy) : 1900 + Number(yy);
        const iso = `${year}-${mm.padStart(2, "0")}-${dd.padStart(2, "0")}`;
        try {
          parseLocalDate(iso);
          return iso;
        } catch {
          return "";
        }
      }
    }

    // 5) Last resort: naive Date parse -> normalize to local calendar fields
    try {
      const maybe = new Date(raw);
      if (!isNaN(maybe.getTime())) {
        return formatLocalDate(maybe);
      }
    } catch {
      /* ignore */
    }

    return "";
  }

  // assumes input is either "" or "YYYY-MM-DD"
  const toMMDDYYYY = (iso: string): string => {
    if (!iso) return "";
    const m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(iso);
    return m ? `${m[2]}-${m[3]}-${m[1]}` : "";
  };

  // MAIN FORM INITIAL STATE
  const [form, setForm] = useState<ClaimFormData & { uploadedFiles: File[] }>({
    patientId: patientId || 0,
    appointmentId: 0,
    userId: Number(user?.id),
    staffId: appointmentStaffId ?? Number(staff?.id),
    patientName: `${patient?.firstName} ${patient?.lastName}`.trim(),
    memberId: patient?.insuranceId ?? "",
    dateOfBirth: normalizeToIsoDateString(patient?.dateOfBirth),
    remarks: "",
    missingTeethStatus: "No_missing",
    missingTeeth: {} as MissingMapStrict,
    serviceDate: serviceDate,
    insuranceProvider: "",
    insuranceSiteKey: "",
    status: "PENDING",
    serviceLines: Array.from({ length: 10 }, () => ({
      procedureCode: "",
      procedureDate: serviceDate,
      quad: "",
      arch: "",
      toothNumber: "",
      toothSurface: "",
      totalBilled: new Decimal(0),
      totalAdjusted: new Decimal(0),
      totalPaid: new Decimal(0),
    })),
    uploadedFiles: [],
  });

  // Map patient.insuranceProvider (free-text from eligibility) → insuranceSiteKey
  const deriveInsuranceSiteKey = (provider: string | null | undefined): string => {
    const p = (provider || "").toLowerCase().trim();
    if (!p) return "";
    if (p.includes("masshealth") || p === "mh" || p === "mass health") return "MH";
    if (p.includes("commonwealth care alliance") || p === "cca") return "CCA";
    if (p.includes("ddma") || p.includes("delta dental ma")) return "DDMA";
    if (p.includes("delta ins") || p === "deltains") return "DeltaIns";
    if (p.includes("tufts") || p.includes("dentaquest") || p === "tuftssco") return "TuftsSCO";
    if ((p.includes("united") && p.includes("sco")) || p === "unitedsco") return "UnitedSCO";
    if (p.includes("cmsp")) return "CMSP";
    if (p.includes("bcbs") || p.includes("blue cross")) return "BCBS";
    if (p.includes("united aapr") || p === "unitedaapr") return "UnitedAAPR";
    if (p.includes("aetna")) return "Aetna";
    if (p.includes("altus")) return "Altus";
    if (p.includes("metlife")) return "MetlifeDental";
    if (p.includes("cigna")) return "Cigna";
    if (p.includes("delta wa") || p === "deltawa") return "DeltaWA";
    if (p.includes("delta il") || p === "deltail") return "DeltaIL";
    return "";
  };

  // Sync patient data to form when patient updates
  useEffect(() => {
    if (patient) {
      const fullName =
        `${patient.firstName || ""} ${patient.lastName || ""}`.trim();
      const siteKey = deriveInsuranceSiteKey(patient.insuranceProvider);
      setForm((prev) => ({
        ...prev,
        patientId: Number(patient.id),
        patientName: fullName,
        dateOfBirth: normalizeToIsoDateString(patient.dateOfBirth),
        memberId: patient.insuranceId || "",
        ...(siteKey ? { insuranceSiteKey: siteKey } : {}),
      }));
    }
  }, [patient]);

  // Handle patient field changes (to make inputs controlled and editable)
  const updatePatientField = (field: keyof Patient, value: any) => {
    setPatient((prev) => (prev ? { ...prev, [field]: value } : null));
  };

  const updateServiceLine = (
    index: number,
    field: keyof InputServiceLine,
    value: any,
  ) => {
    const updatedLines = [...form.serviceLines];

    if (updatedLines[index]) {
      if (field === "totalBilled") {
        const num = typeof value === "string" ? parseFloat(value) : value;
        const rounded = Math.round((isNaN(num) ? 0 : num) * 100) / 100;
        updatedLines[index][field] = new Decimal(rounded);
      } else {
        updatedLines[index][field] = value;
      }
    }

    setForm({ ...form, serviceLines: updatedLines });
  };

  const updateProcedureDate = (index: number, date: Date | undefined) => {
    if (!date) return;
    const formattedDate = formatLocalDate(date);
    const updatedLines = [...form.serviceLines];

    if (updatedLines[index]) {
      updatedLines[index].procedureDate = formattedDate;
    }

    setForm({ ...form, serviceLines: updatedLines });
  };

  // normalize for display while typing: uppercase and allow letters, commas and spaces
  function normalizeToothSurface(raw?: string): string {
    if (!raw) return "";
    // Uppercase and remove characters that are not A-Z, comma or space
    return raw.toUpperCase().replace(/[^A-Z,\s]/g, "");
  }

  // Missing teeth section
  const setMissingTeethStatus = (status: MissingTeethStatus) => {
    setForm((prev) => {
      if (prev.missingTeethStatus === status) return prev; // no-op
      return {
        ...prev,
        missingTeethStatus: status,
        missingTeeth: status === "Yes_missing" ? prev.missingTeeth : {},
      };
    });
  };

  const clearAllToothSelections = () =>
    setForm((prev) => ({ ...prev, missingTeeth: {} as MissingMapStrict }));

  // for serviceLine rows, to auto scroll when it got updated by combo buttons and all.
  const rowRefs = useRef<(HTMLDivElement | null)[]>([]);

  const scrollToLine = (index: number) => {
    const el = rowRefs.current[index];
    if (el) {
      el.scrollIntoView({ behavior: "smooth", block: "start" });
    }
  };

  // Map Price function — uses the fee schedule for the selected insurance type
  const onMapPrice = () => {
    setForm((prev) =>
      mapPricesForForm({
        form: prev,
        patientDOB: patient?.dateOfBirth ?? "",
        insuranceSiteKey: prev.insuranceSiteKey,
      }),
    );
  };

  // FILE UPLOAD ZONE
  const uploadZoneRef = useRef<MultipleFileUploadZoneHandle | null>(null);
  const [isUploading, setIsUploading] = useState(false);
  const [priceMismatches, setPriceMismatches] = useState<PriceMismatch[]>([]);
  const pendingClaimAction = useRef<(() => void) | null>(null);

  // NO validation here — the upload zone handles validation, toasts, max files, sizes, etc.
  const handleFilesChange = useCallback((files: File[]) => {
    setForm((prev) => ({ ...prev, uploadedFiles: files }));
  }, []);

  // 1st Button workflow - Mass Health Button Handler
  const handleMHSubmit = async (
    formToUse?: ClaimFormData & { uploadedFiles?: File[] },
  ) => {
    // Use the passed form, or fallback to current state
    const f = formToUse ?? form;

    // 0. Validate required fields
    const missingFields: string[] = [];

    if (!f.memberId?.trim()) missingFields.push("Member ID");
    if (!f.dateOfBirth?.trim()) missingFields.push("Date of Birth");
    if (!patient?.firstName?.trim()) missingFields.push("First Name");

    if (missingFields.length > 0) {
      toast({
        title: "Missing Required Fields",
        description: `Please fill out the following field(s): ${missingFields.join(", ")}`,
        variant: "destructive",
      });
      return;
    }

    // require at least one procedure code before proceeding
    const filteredServiceLines = (f.serviceLines || []).filter(
      (line) => (line.procedureCode ?? "").trim() !== "",
    );
    if (filteredServiceLines.length === 0) {
      toast({
        title: "No procedure codes",
        description:
          "Please add at least one procedure code before submitting the claim.",
        variant: "destructive",
      });
      return;
    }

    if (!f.npiProvider?.npiNumber) {
      toast({
        title: "NPI Provider Required",
        description: "Please select a NPI Provider.",
        variant: "destructive",
      });
      return;
    }

    // 1. Create or update appointment
    let appointmentIdToUse = appointmentId;

    if (appointmentIdToUse == null) {
      const appointmentData = {
        patientId: patientId,
        date: serviceDate,
        staffId: appointmentStaffId ?? staff?.id,
      };
      const created = await onHandleAppointmentSubmit(appointmentData);

      if (typeof created === "number" && created > 0) {
        appointmentIdToUse = created;
      } else if (created && typeof (created as any).id === "number") {
        appointmentIdToUse = (created as any).id;
      }
    }

    // 3. Create Claim(if not)
    // Filter out empty service lines (empty procedureCode)
    const {
      uploadedFiles,
      insuranceSiteKey,
      npiProvider,
      ...formToCreateClaim
    } = f;

    // build claimFiles metadata from uploadedFiles (only filename + mimeType)
    const claimFilesMeta: ClaimFileMeta[] = (uploadedFiles || []).map((f) => ({
      filename: f.name,
      mimeType: f.type,
    }));

    const selectedNpiProviderId = npiProvider?.npiNumber
      ? npiProviders.find((p) => p.npiNumber === npiProvider.npiNumber)?.id ?? null
      : null;

    const createdClaim = await onSubmit({
      ...formToCreateClaim,
      serviceLines: filteredServiceLines,
      staffId: appointmentStaffId ?? Number(staff?.id),
      patientId: patientId,
      insuranceProvider: "MassHealth",
      appointmentId: appointmentIdToUse!,
      claimFiles: claimFilesMeta,
      ...(selectedNpiProviderId ? { npiProviderId: selectedNpiProviderId } : {}),
    });

    // 4. sending form data to selenium service
    onHandleForMHSeleniumClaim({
      ...f,
      dateOfBirth: toMMDDYYYY(f.dateOfBirth),
      serviceLines: filteredServiceLines,
      staffId: appointmentStaffId ?? Number(staff?.id),
      npiProvider: f.npiProvider,
      patientId: patientId,
      insuranceProvider: "Mass Health",
      appointmentId: appointmentIdToUse!,
      insuranceSiteKey: "MH",
      claimId: createdClaim.id,
    });

    // 5. Close form
    onClose();
  };

  // 2st Button workflow - Mass Health Pre Auth Button Handler
  const handleMHPreAuth = async (
    formToUse?: ClaimFormData & { uploadedFiles?: File[] },
  ) => {
    // Use the passed form, or fallback to current state
    const f = formToUse ?? form;

    // 0. Validate required fields
    const missingFields: string[] = [];

    if (!f.memberId?.trim()) missingFields.push("Member ID");
    if (!f.dateOfBirth?.trim()) missingFields.push("Date of Birth");
    if (!patient?.firstName?.trim()) missingFields.push("First Name");

    if (missingFields.length > 0) {
      toast({
        title: "Missing Required Fields",
        description: `Please fill out the following field(s): ${missingFields.join(", ")}`,
        variant: "destructive",
      });
      return;
    }

    // require at least one procedure code before proceeding
    const filteredServiceLines = (f.serviceLines || []).filter(
      (line) => (line.procedureCode ?? "").trim() !== "",
    );
    if (filteredServiceLines.length === 0) {
      toast({
        title: "No procedure codes",
        description:
          "Please add at least one procedure code before submitting the claim preAuth.",
        variant: "destructive",
      });
      return;
    }

    if (!f.npiProvider?.npiNumber) {
      toast({
        title: "NPI Provider Required",
        description: "Please select a NPI Provider.",
        variant: "destructive",
      });
      return;
    }

    // sending form data to selenium service
    onHandleForMHSeleniumClaimPreAuth({
      ...f,
      dateOfBirth: toMMDDYYYY(f.dateOfBirth),
      serviceLines: filteredServiceLines,
      staffId: appointmentStaffId ?? Number(staff?.id),
      npiProvider: f.npiProvider,
      patientId: patientId,
      insuranceProvider: "Mass Health",
      insuranceSiteKey: "MH",
    });

    // 5. Close form
    onClose();
  };

  // 3rd Button workflow — CCA Claim: saves to DB then submits via Selenium
  const handleCCAClaim = async () => {
    const missingFields: string[] = [];
    if (!form.memberId?.trim()) missingFields.push("Member ID");
    if (!form.dateOfBirth?.trim()) missingFields.push("Date of Birth");
    if (!patient?.firstName?.trim()) missingFields.push("First Name");
    if (missingFields.length > 0) {
      toast({
        title: "Missing Required Fields",
        description: `Please fill out the following field(s): ${missingFields.join(", ")}`,
        variant: "destructive",
      });
      return;
    }

    const filteredServiceLines = (form.serviceLines || []).filter(
      (line) => (line.procedureCode ?? "").trim() !== "",
    );
    if (filteredServiceLines.length === 0) {
      toast({
        title: "No procedure codes",
        description: "Please add at least one procedure code before submitting the claim.",
        variant: "destructive",
      });
      return;
    }

    // Create appointment if needed
    let appointmentIdToUse = appointmentId;
    if (appointmentIdToUse == null) {
      const created = await onHandleAppointmentSubmit({
        patientId,
        date: serviceDate,
        staffId: appointmentStaffId ?? staff?.id,
      });
      if (typeof created === "number" && created > 0) {
        appointmentIdToUse = created;
      } else if (created && typeof (created as any).id === "number") {
        appointmentIdToUse = (created as any).id;
      }
    }

    const { uploadedFiles, insuranceSiteKey, npiProvider, ...formToCreateClaim } = form;
    const claimFilesMeta: ClaimFileMeta[] = (uploadedFiles || []).map((f) => ({
      filename: f.name,
      mimeType: f.type,
    }));

    const selectedNpiProviderId = npiProvider?.npiNumber
      ? npiProviders.find((p) => p.npiNumber === npiProvider.npiNumber)?.id ?? null
      : null;

    // Save claim to DB
    const createdClaim = await onSubmit({
      ...formToCreateClaim,
      serviceLines: filteredServiceLines,
      staffId: appointmentStaffId ?? Number(staff?.id),
      patientId,
      insuranceProvider: "CCA",
      appointmentId: appointmentIdToUse!,
      claimFiles: claimFilesMeta,
      ...(selectedNpiProviderId ? { npiProviderId: selectedNpiProviderId } : {}),
    });

    // Send to CCA Selenium — send raw YYYY-MM-DD so Python _format_dob converts correctly
    onHandleForCCASeleniumClaim({
      ...form,
      serviceLines: filteredServiceLines,
      staffId: appointmentStaffId ?? Number(staff?.id),
      patientId,
      insuranceProvider: "CCA",
      appointmentId: appointmentIdToUse!,
      insuranceSiteKey: "CCA",
      claimId: createdClaim.id,
    });

    onClose();
  };

  // Delta MA Claim: saves to DB then submits via Selenium
  const handleDDMAClaim = async () => {
    const missingFields: string[] = [];
    if (!form.memberId?.trim()) missingFields.push("Member ID");
    if (!form.dateOfBirth?.trim()) missingFields.push("Date of Birth");
    if (!patient?.firstName?.trim()) missingFields.push("First Name");
    if (missingFields.length > 0) {
      toast({
        title: "Missing Required Fields",
        description: `Please fill out the following field(s): ${missingFields.join(", ")}`,
        variant: "destructive",
      });
      return;
    }

    const filteredServiceLines = (form.serviceLines || []).filter(
      (line) => (line.procedureCode ?? "").trim() !== "",
    );
    if (filteredServiceLines.length === 0) {
      toast({
        title: "No procedure codes",
        description: "Please add at least one procedure code before submitting the claim.",
        variant: "destructive",
      });
      return;
    }

    let appointmentIdToUse = appointmentId;
    if (appointmentIdToUse == null) {
      const created = await onHandleAppointmentSubmit({
        patientId,
        date: serviceDate,
        staffId: appointmentStaffId ?? staff?.id,
      });
      if (typeof created === "number" && created > 0) {
        appointmentIdToUse = created;
      } else if (created && typeof (created as any).id === "number") {
        appointmentIdToUse = (created as any).id;
      }
    }

    const { uploadedFiles, insuranceSiteKey, npiProvider, ...formToCreateClaim } = form;

    // Upload files to server so we get local filePaths for Selenium
    const claimFilesMeta: ClaimFileMeta[] = uploadedFiles?.length
      ? await uploadAttachmentsToLocalFolder(uploadedFiles)
      : [];

    const selectedNpiProviderId = npiProvider?.npiNumber
      ? npiProviders.find((p) => p.npiNumber === npiProvider.npiNumber)?.id ?? null
      : null;

    const createdClaim = await onSubmit({
      ...formToCreateClaim,
      serviceLines: filteredServiceLines,
      staffId: appointmentStaffId ?? Number(staff?.id),
      patientId,
      insuranceProvider: "Delta Dental MA",
      appointmentId: appointmentIdToUse!,
      claimFiles: claimFilesMeta,
      ...(selectedNpiProviderId ? { npiProviderId: selectedNpiProviderId } : {}),
    });

    onHandleForDDMASeleniumClaim({
      ...form,
      serviceLines: filteredServiceLines,
      staffId: appointmentStaffId ?? Number(staff?.id),
      patientId,
      insuranceProvider: "Delta Dental MA",
      appointmentId: appointmentIdToUse!,
      insuranceSiteKey: "DDMA",
      claimId: createdClaim.id,
      claimFiles: claimFilesMeta,
    });

    onClose();
  };

  // United/DentalHub Claim: saves to DB then submits via Selenium
  const handleUnitedDHClaim = async () => {
    const missingFields: string[] = [];
    if (!form.memberId?.trim()) missingFields.push("Member ID");
    if (!form.dateOfBirth?.trim()) missingFields.push("Date of Birth");
    if (!patient?.firstName?.trim()) missingFields.push("First Name");
    if (missingFields.length > 0) {
      toast({
        title: "Missing Required Fields",
        description: `Please fill out the following field(s): ${missingFields.join(", ")}`,
        variant: "destructive",
      });
      return;
    }

    const filteredServiceLines = (form.serviceLines || []).filter(
      (line) => (line.procedureCode ?? "").trim() !== "",
    );
    if (filteredServiceLines.length === 0) {
      toast({
        title: "No procedure codes",
        description: "Please add at least one procedure code before submitting the claim.",
        variant: "destructive",
      });
      return;
    }

    let appointmentIdToUse = appointmentId;
    if (appointmentIdToUse == null) {
      const created = await onHandleAppointmentSubmit({
        patientId,
        date: serviceDate,
        staffId: appointmentStaffId ?? staff?.id,
      });
      if (typeof created === "number" && created > 0) {
        appointmentIdToUse = created;
      } else if (created && typeof (created as any).id === "number") {
        appointmentIdToUse = (created as any).id;
      }
    }

    const { uploadedFiles, insuranceSiteKey, npiProvider, ...formToCreateClaim } = form;

    const claimFilesMeta: ClaimFileMeta[] = uploadedFiles?.length
      ? await uploadAttachmentsToLocalFolder(uploadedFiles)
      : [];

    const selectedNpiProviderId = npiProvider?.npiNumber
      ? npiProviders.find((p) => p.npiNumber === npiProvider.npiNumber)?.id ?? null
      : null;

    const createdClaim = await onSubmit({
      ...formToCreateClaim,
      serviceLines: filteredServiceLines,
      staffId: appointmentStaffId ?? Number(staff?.id),
      patientId,
      insuranceProvider: "United/DentalHub",
      appointmentId: appointmentIdToUse!,
      claimFiles: claimFilesMeta,
      ...(selectedNpiProviderId ? { npiProviderId: selectedNpiProviderId } : {}),
    });

    onHandleForUnitedDHSeleniumClaim({
      ...form,
      serviceLines: filteredServiceLines,
      staffId: appointmentStaffId ?? Number(staff?.id),
      patientId,
      insuranceProvider: "United/DentalHub",
      appointmentId: appointmentIdToUse!,
      insuranceSiteKey: "UNITED_SCO",
      claimId: createdClaim.id,
      claimFiles: claimFilesMeta,
    });

    onClose();
  };

  // Tufts SCO Claim: saves to DB then submits via Selenium
  const handleTuftsSCOClaim = async () => {
    const missingFields: string[] = [];
    if (!form.memberId?.trim()) missingFields.push("Member ID");
    if (!form.dateOfBirth?.trim()) missingFields.push("Date of Birth");
    if (!patient?.firstName?.trim()) missingFields.push("First Name");
    if (missingFields.length > 0) {
      toast({
        title: "Missing Required Fields",
        description: `Please fill out the following field(s): ${missingFields.join(", ")}`,
        variant: "destructive",
      });
      return;
    }

    const filteredServiceLines = (form.serviceLines || []).filter(
      (line) => (line.procedureCode ?? "").trim() !== "",
    );
    if (filteredServiceLines.length === 0) {
      toast({
        title: "No procedure codes",
        description: "Please add at least one procedure code before submitting the claim.",
        variant: "destructive",
      });
      return;
    }

    let appointmentIdToUse = appointmentId;
    if (appointmentIdToUse == null) {
      const created = await onHandleAppointmentSubmit({
        patientId,
        date: serviceDate,
        staffId: appointmentStaffId ?? staff?.id,
      });
      if (typeof created === "number" && created > 0) {
        appointmentIdToUse = created;
      } else if (created && typeof (created as any).id === "number") {
        appointmentIdToUse = (created as any).id;
      }
    }

    const { uploadedFiles, insuranceSiteKey, npiProvider, ...formToCreateClaim } = form;

    const claimFilesMeta: ClaimFileMeta[] = uploadedFiles?.length
      ? await uploadAttachmentsToLocalFolder(uploadedFiles)
      : [];

    const selectedNpiProviderId = npiProvider?.npiNumber
      ? npiProviders.find((p) => p.npiNumber === npiProvider.npiNumber)?.id ?? null
      : null;

    let createdClaim: any;
    try {
      createdClaim = await onSubmit({
        ...formToCreateClaim,
        serviceLines: filteredServiceLines,
        staffId: appointmentStaffId ?? Number(staff?.id),
        patientId,
        insuranceProvider: "Tufts SCO",
        appointmentId: appointmentIdToUse!,
        claimFiles: claimFilesMeta,
        ...(selectedNpiProviderId ? { npiProviderId: selectedNpiProviderId } : {}),
      });
    } catch (err: any) {
      toast({
        title: "Failed to save claim",
        description: err?.message || "An error occurred saving the claim.",
        variant: "destructive",
      });
      return;
    }

    onHandleForTuftsSCOSeleniumClaim({
      ...form,
      serviceLines: filteredServiceLines,
      staffId: appointmentStaffId ?? Number(staff?.id),
      patientId,
      insuranceProvider: "Tufts SCO",
      appointmentId: appointmentIdToUse!,
      insuranceSiteKey: "TuftsSCO",
      claimId: createdClaim.id,
      claimFiles: claimFilesMeta,
    });

    onClose();
  };

  const handleClaimAll = () => {
    const siteKey = (form.insuranceSiteKey || deriveInsuranceSiteKey(form.insuranceProvider || "")).toUpperCase();
    if (siteKey === "MH" || siteKey === "MASSHEALTH") {
      runWithPriceCheck(() => handleMHSubmit());
    } else if (siteKey === "CCA") {
      runWithPriceCheck(handleCCAClaim);
    } else if (siteKey === "DDMA") {
      runWithPriceCheck(handleDDMAClaim);
    } else if (siteKey === "TUFTSSCO" || siteKey === "TUFTS_SCO") {
      runWithPriceCheck(handleTuftsSCOClaim);
    } else if (siteKey === "UNITEDSCO" || siteKey === "UNITEDDH" || siteKey === "UNITED_SCO") {
      runWithPriceCheck(handleUnitedDHClaim);
    } else {
      toast({
        title: "No automated claim for this insurance",
        description: `Insurance type "${form.insuranceSiteKey || "unknown"}" does not have an automated claim. Please use one of the buttons below.`,
        variant: "destructive",
      });
    }
  };

  const handleCCAPreAuth = async () => {
    const missingFields: string[] = [];
    if (!form.memberId?.trim()) missingFields.push("Member ID");
    if (!form.dateOfBirth?.trim()) missingFields.push("Date of Birth");
    if (!patient?.firstName?.trim()) missingFields.push("First Name");
    if (missingFields.length > 0) {
      toast({
        title: "Missing Required Fields",
        description: `Please fill out the following field(s): ${missingFields.join(", ")}`,
        variant: "destructive",
      });
      return;
    }

    const filteredServiceLines = (form.serviceLines || []).filter(
      (line) => (line.procedureCode ?? "").trim() !== "",
    );
    if (filteredServiceLines.length === 0) {
      toast({
        title: "No procedure codes",
        description: "Please add at least one procedure code before submitting the pre-authorization.",
        variant: "destructive",
      });
      return;
    }

    onHandleForCCASeleniumPreAuth({
      ...form,
      serviceLines: filteredServiceLines,
      staffId: appointmentStaffId ?? Number(staff?.id),
      patientId,
      insuranceProvider: "CCA",
      insuranceSiteKey: "CCA",
    });

    onClose();
  };

  /** Check prices against the fee schedule. If mismatches exist, show dialog and
   *  store the action to run after the user responds. Otherwise run immediately. */
  const runWithPriceCheck = (action: () => void) => {
    const siteKey = form.insuranceSiteKey || deriveInsuranceSiteKey(form.insuranceProvider || "");
    const mismatches = findPriceMismatches(
      (form.serviceLines || []).filter(l => (l.procedureCode || "").trim()),
      siteKey,
      patient?.dateOfBirth || "",
      form.serviceDate || serviceDate,
    );
    if (mismatches.length === 0) {
      action();
    } else {
      pendingClaimAction.current = action;
      setPriceMismatches(mismatches);
    }
  };

  const savePricesToSchedule = async (mismatches: PriceMismatch[]) => {
    const siteKey = form.insuranceSiteKey || deriveInsuranceSiteKey(form.insuranceProvider || "");
    await Promise.all(
      mismatches.map(m =>
        apiRequest("POST", "/api/fee-schedule/update-price", {
          siteKey,
          procedureCode: m.procedureCode,
          price: m.enteredPrice,
        })
      )
    );
  };

  const uploadAttachmentsToLocalFolder = async (files: File[]): Promise<ClaimFileMeta[]> => {
    if (!files.length) return [];

    const patientName = patient?.firstName && patient?.lastName
      ? `${patient.firstName} ${patient.lastName}`
      : patient?.firstName ?? `patient-${patientId}`;

    const formData = new FormData();
    formData.append("patientName", patientName);
    files.forEach((f) => formData.append("files", f));

    const res = await apiRequest("POST", "/api/claims/upload-attachments", formData);
    const data = await res.json();
    return (data.data ?? []) as ClaimFileMeta[];
  };

  const handleSave = async () => {
    const filteredServiceLines = form.serviceLines.filter(
      (line) => (line.procedureCode ?? "").trim() !== "",
    );

    if (filteredServiceLines.length === 0) {
      toast({
        title: "No procedure codes",
        description: "Please add at least one procedure code before saving.",
        variant: "destructive",
      });
      return;
    }

    const missingFields: string[] = [];
    if (!form.memberId?.trim()) missingFields.push("Member ID");
    if (!form.dateOfBirth?.trim()) missingFields.push("Date of Birth");
    if (missingFields.length > 0) {
      toast({
        title: "Missing Required Fields",
        description: `Please fill out: ${missingFields.join(", ")}`,
        variant: "destructive",
      });
      return;
    }

    let appointmentIdToUse = appointmentId;

    if (appointmentIdToUse == null) {
      const appointmentData = {
        patientId: patientId,
        date: serviceDate,
        staffId: appointmentStaffId ?? staff?.id,
      };
      const created = await onHandleAppointmentSubmit(appointmentData);
      if (typeof created === "number" && created > 0) {
        appointmentIdToUse = created;
      } else if (created && typeof (created as any).id === "number") {
        appointmentIdToUse = (created as any).id;
      }
    }

    const { uploadedFiles, insuranceSiteKey, npiProvider, ...formToSave } = form;

    const claimFilesMeta: ClaimFileMeta[] = uploadedFiles?.length
      ? await uploadAttachmentsToLocalFolder(uploadedFiles)
      : [];

    // Find the npiProviderId matching the currently selected NPI provider
    const selectedNpiProviderId = npiProvider?.npiNumber
      ? npiProviders.find((p) => p.npiNumber === npiProvider.npiNumber)?.id ?? null
      : null;

    try {
      await onSubmit({
        ...formToSave,
        serviceLines: filteredServiceLines,
        staffId: appointmentStaffId ?? Number(staff?.id),
        patientId: patientId,
        insuranceProvider: "MassHealth",
        appointmentId: appointmentIdToUse!,
        claimFiles: claimFilesMeta,
        ...(selectedNpiProviderId ? { npiProviderId: selectedNpiProviderId } : {}),
        isDraft: true,
      });
      toast({ title: "Saved", description: "Claim saved successfully." });
    } catch (err: any) {
      toast({
        title: "Save failed",
        description: err?.message ?? "Failed to save claim.",
        variant: "destructive",
      });
    }
  };

  // Saves CDT codes + NPI provider to AppointmentProcedure (proceduresOnly mode)
  const handleProceduresSave = async () => {
    if (!appointmentId || !patientId) {
      toast({ title: "Missing appointment", description: "Cannot save without an appointment.", variant: "destructive" });
      return;
    }

    const filteredServiceLines = form.serviceLines.filter(
      (line) => (line.procedureCode ?? "").trim() !== "",
    );
    if (filteredServiceLines.length === 0) {
      toast({ title: "No procedure codes", description: "Please add at least one procedure code.", variant: "destructive" });
      return;
    }

    const selectedNpiProviderId = form.npiProvider?.npiNumber
      ? (npiProviders.find((p) => p.npiNumber === form.npiProvider!.npiNumber)?.id ?? null)
      : null;

    try {
      const attachments = form.uploadedFiles?.length
        ? await uploadAttachmentsToLocalFolder(form.uploadedFiles)
        : [];

      const res = await apiRequest("POST", "/api/appointment-procedures/save-for-appointment", {
        appointmentId,
        patientId,
        npiProviderId: selectedNpiProviderId,
        procedures: filteredServiceLines.map((l) => ({
          procedureCode: l.procedureCode,
          fee: Number(l.totalBilled) || null,
          toothNumber: l.toothNumber || null,
          toothSurface: l.toothSurface || null,
        })),
        attachments,
      });
      const data = await res.json();
      if (!data.success) throw new Error("Failed to save procedures");
      const attachMsg = attachments.length ? ` and ${attachments.length} attachment(s)` : "";
      toast({ title: "Procedures saved", description: `${data.count} procedure(s)${attachMsg} saved.` });
      onClose();
    } catch (err: any) {
      toast({ title: "Save failed", description: err?.message ?? "Failed to save procedures.", variant: "destructive" });
    }
  };

  // Same as handleProceduresSave but also resets any existing submitted claim so
  // batch-column will treat this appointment as needing a new submission.
  const handleProceduresUpdate = async () => {
    if (!appointmentId) return;
    try {
      await apiRequest("POST", "/api/claims/reset-for-resubmit", { appointmentId });
    } catch {
      // Non-fatal: if reset fails we still save procedures
    }
    await handleProceduresSave();
  };

  // Saves claim to DB with all info (member ID, DOB, service date, provider, CDT codes, NPI).
  // No Selenium action — works like a real MassHealth claim for payment/report tracking.
  const handleClaimSaved = async () => {
    const missingFields: string[] = [];
    if (!form.memberId?.trim()) missingFields.push("Member ID");
    if (!form.dateOfBirth?.trim()) missingFields.push("Date of Birth");
    if (!patient?.firstName?.trim()) missingFields.push("First Name");

    if (missingFields.length > 0) {
      toast({
        title: "Missing Required Fields",
        description: `Please fill out: ${missingFields.join(", ")}`,
        variant: "destructive",
      });
      return;
    }

    const filteredServiceLines = form.serviceLines.filter(
      (line) => (line.procedureCode ?? "").trim() !== "",
    );
    if (filteredServiceLines.length === 0) {
      toast({
        title: "No procedure codes",
        description: "Please add at least one procedure code before saving.",
        variant: "destructive",
      });
      return;
    }

    let appointmentIdToUse = appointmentId;
    if (appointmentIdToUse == null) {
      const created = await onHandleAppointmentSubmit({
        patientId: patientId,
        date: serviceDate,
        staffId: appointmentStaffId ?? staff?.id,
      });
      if (typeof created === "number" && created > 0) {
        appointmentIdToUse = created;
      } else if (created && typeof (created as any).id === "number") {
        appointmentIdToUse = (created as any).id;
      }
    }

    const { uploadedFiles, insuranceSiteKey, npiProvider, ...formToCreateClaim } = form;

    const claimFilesMeta: ClaimFileMeta[] = uploadedFiles?.length
      ? await uploadAttachmentsToLocalFolder(uploadedFiles)
      : [];

    const selectedNpiProviderId = npiProvider?.npiNumber
      ? npiProviders.find((p) => p.npiNumber === npiProvider.npiNumber)?.id ?? null
      : null;

    try {
      await onSubmit({
        ...formToCreateClaim,
        serviceLines: filteredServiceLines,
        staffId: appointmentStaffId ?? Number(staff?.id),
        patientId: patientId,
        insuranceProvider: patient?.insuranceProvider || "MassHealth",
        appointmentId: appointmentIdToUse!,
        claimFiles: claimFilesMeta,
        ...(selectedNpiProviderId ? { npiProviderId: selectedNpiProviderId } : {}),
      });
      toast({ title: "Claim Saved", description: "Claim saved to database successfully." });
      onClose();
    } catch (err: any) {
      toast({
        title: "Save failed",
        description: err?.message ?? "Failed to save claim.",
        variant: "destructive",
      });
    }
  };

  // Marks the claim for this appointment as VOID so batch-column will always skip it.
  const handleProceduresVoid = async () => {
    if (!appointmentId) return;
    try {
      await apiRequest("POST", "/api/claims/void-for-appointment", { appointmentId });
      toast({ title: "Claim voided", description: "This appointment will be skipped when claiming for the column." });
      onClose();
    } catch (err: any) {
      toast({ title: "Void failed", description: err?.message ?? "Failed to void claim.", variant: "destructive" });
    }
  };

  // for direct combo button.
  const applyComboAndThenMH = async (
    comboId: keyof typeof PROCEDURE_COMBOS,
  ) => {
    const nextForm = applyComboToForm(
      form,
      comboId,
      patient?.dateOfBirth ?? "",
      { replaceAll: false, lineDate: form.serviceDate },
      form.insuranceSiteKey,
    );

    setForm(nextForm);
    setTimeout(() => scrollToLine(0), 0);

    await handleMHSubmit(nextForm);
  };

  const isFormReady = useMemo(() => {
    return (
      !!patient &&
      !!form.memberId?.trim() &&
      !!form.dateOfBirth?.trim() &&
      !!form.patientName?.trim() &&
      Array.isArray(form.serviceLines) &&
      form.serviceLines.some(
        (l) => l.procedureCode && l.procedureCode.trim() !== "",
      )
    );
  }, [
    patient,
    form.memberId,
    form.dateOfBirth,
    form.patientName,
    form.serviceLines,
  ]);

  // when autoSubmit mode is given, it will then submit the claims.
  useEffect(() => {
    if (!autoSubmit) return;
    if (!prefillDone) return;
    if (!isFormReady) return;

    if (autoSubmittedRef.current) return;
    autoSubmittedRef.current = true;

    handleMHSubmit();
  }, [autoSubmit, prefillDone, isFormReady]);

  // overlay click handler (close when clicking backdrop)
  const onOverlayMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {
    // only close if clicked the backdrop itself (not inner modal)
    if (e.target === e.currentTarget) {
      onClose();
    }
  };

  useEffect(() => {
    return () => {
      // reset when ClaimForm unmounts (modal closes)
      autoSubmittedRef.current = false;
      setPrefillDone(false);
    };
  }, []);

  return (
    <div
      className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4 overflow-y-auto"
      onMouseDown={onOverlayMouseDown}
    >
      <Card className="w-[90vw] h-[90vh] max-w-none overflow-auto bg-white relative">
        <Tabs defaultValue="claim">
          <CardHeader className="sticky top-0 z-20 pb-2 border-b bg-white/95 backdrop-blur-sm">
            <div className="flex flex-row items-center justify-between mb-2">
              <CardTitle className="text-xl font-bold">
                Insurance Forms
              </CardTitle>
              <Button onClick={onClose}>
                <X className="w-4 h-4" />
              </Button>
            </div>
            <TabsList>
              <TabsTrigger value="claim">Insurance Claim</TabsTrigger>
              <TabsTrigger value="preauth" className="data-[state=active]:bg-blue-600 data-[state=active]:text-white">PreAuth</TabsTrigger>
            </TabsList>
          </CardHeader>
          <CardContent className="pt-4">

            {/* ── Insurance Claim Tab ── */}
            <TabsContent value="claim">
              <div className="space-y-6">
                {/* Patient Information */}
                <div className="grid grid-cols-4 gap-4">
                  <div>
                    <Label htmlFor="memberId">Member ID</Label>
                    <Input
                      id="memberId"
                      value={form.memberId}
                      onChange={(e) => {
                        setForm({ ...form, memberId: e.target.value });
                        updatePatientField("insuranceId", e.target.value);
                      }}
                    />
                  </div>
                  <div>
                    <Label htmlFor="dateOfBirth">Date Of Birth</Label>
                    <DateInput
                      value={
                        form.dateOfBirth ? parseLocalDate(form.dateOfBirth) : null
                      }
                      onChange={(date: Date | null) => {
                        const formatted = date ? formatLocalDate(date) : "";
                        setForm((prev) => ({ ...prev, dateOfBirth: formatted }));
                        updatePatientField("dateOfBirth", formatted);
                      }}
                      disableFuture
                    />
                  </div>
                  <div>
                    <Label htmlFor="firstName">First Name</Label>
                    <Input
                      id="firstName"
                      value={patient?.firstName || ""}
                      onChange={(e) => {
                        updatePatientField("firstName", e.target.value);
                        setForm((prev) => ({
                          ...prev,
                          patientName:
                            `${e.target.value} ${patient?.lastName || ""}`.trim(),
                        }));
                      }}
                      disabled={isLoading}
                    />
                  </div>
                  <div>
                    <Label htmlFor="lastName">Last Name</Label>
                    <Input
                      id="lastName"
                      value={patient?.lastName || ""}
                      onChange={(e) => {
                        updatePatientField("lastName", e.target.value);
                        setForm((prev) => ({
                          ...prev,
                          patientName:
                            `${patient?.firstName || ""} ${e.target.value}`.trim(),
                        }));
                      }}
                      disabled={isLoading}
                    />
                  </div>
                </div>

                {/* Service Lines */}
                <div>
                  <h3 className="text-xl font-semibold mb-2 text-center">
                    Service Lines
                  </h3>

                  <div className="flex flex-col gap-2">
                    <div className="flex justify-end items-center mb-4">
                      <div className="flex gap-2">
                        <Label className="flex items-center">Insurance Type</Label>
                        <Select
                          value={form.insuranceSiteKey || ""}
                          onValueChange={(val) =>
                            setForm((prev) => ({ ...prev, insuranceSiteKey: val }))
                          }
                        >
                          <SelectTrigger className="w-44 mr-4">
                            <SelectValue placeholder="Select Insurance" />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="MH">MassHealth</SelectItem>
                            <SelectItem value="CCA">CCA</SelectItem>
                            <SelectItem value="DDMA">DDMA</SelectItem>
                            <SelectItem value="DeltaIns">Delta Ins</SelectItem>
                            <SelectItem value="TuftsSCO">Tufts SCO</SelectItem>
                            <SelectItem value="UnitedSCO">United SCO</SelectItem>
                            <SelectItem value="CMSP">CMSP</SelectItem>
                            <SelectItem value="BCBS">BCBS</SelectItem>
                            <SelectItem value="UnitedAAPR">United AAPR</SelectItem>
                            <SelectItem value="Aetna">Aetna</SelectItem>
                            <SelectItem value="Altus">Altus</SelectItem>
                            <SelectItem value="MetlifeDental">Metlife Dental</SelectItem>
                            <SelectItem value="Cigna">Cigna</SelectItem>
                            <SelectItem value="DeltaWA">Delta WA</SelectItem>
                            <SelectItem value="DeltaIL">Delta IL</SelectItem>
                            <SelectItem value="Others">Others</SelectItem>
                          </SelectContent>
                        </Select>
                        <Label className="flex items-center">Service Date</Label>
                        <Popover
                          open={serviceDateOpen}
                          onOpenChange={setServiceDateOpen}
                        >
                          <PopoverTrigger asChild>
                            <Button
                              variant="outline"
                              className="w-[140px] justify-start text-left font-normal mr-4"
                            >
                              <CalendarIcon className="mr-2 h-4 w-4" />
                              {form.serviceDate}
                            </Button>
                          </PopoverTrigger>
                          <PopoverContent className="w-auto">
                            <Calendar
                              mode="single"
                              selected={serviceDateValue}
                              onSelect={(date) => { onServiceDateChange(date); }}
                              onClose={() => setServiceDateOpen(false)}
                            />
                          </PopoverContent>
                        </Popover>
                        <Label className="flex items-center ml-2">
                          Rendering Provider
                        </Label>
                        <Select
                          value={form.npiProvider?.npiNumber || ""}
                          onValueChange={(npiNumber) => {
                            const selected = npiProviders.find(
                              (p) => p.npiNumber === npiNumber,
                            );
                            if (!selected) return;
                            setForm((prev) => ({
                              ...prev,
                              npiProvider: {
                                npiNumber: selected.npiNumber,
                                providerName: selected.providerName,
                              },
                            }));
                          }}
                        >
                          <SelectTrigger className="w-56">
                            <SelectValue placeholder="Select NPI Provider" />
                          </SelectTrigger>
                          <SelectContent>
                            {npiProviders.map((p) => (
                              <SelectItem key={p.id} value={p.npiNumber}>
                                {p.npiNumber} — {p.providerName}
                              </SelectItem>
                            ))}
                          </SelectContent>
                        </Select>
                      </div>
                    </div>

                    <div className="flex items-center gap-3 mb-2">
                      <Switch
                        id="direct-submit-toggle"
                        checked={directSubmitEnabled}
                        onCheckedChange={setDirectSubmitEnabled}
                      />
                      <Label htmlFor="direct-submit-toggle" className="text-sm cursor-pointer select-none">
                        Direct Submission {directSubmitEnabled ? <span className="text-green-600 font-semibold">ON</span> : <span className="text-muted-foreground">OFF</span>}
                      </Label>
                    </div>
                    <DirectComboButtons
                      onDirectCombo={(comboKey) => {
                        if (directSubmitEnabled) {
                          applyComboAndThenMH(comboKey as any);
                        } else {
                          setForm((prev) => {
                            const next = applyComboToForm(
                              prev,
                              comboKey as any,
                              patient?.dateOfBirth ?? "",
                              { replaceAll: false, lineDate: prev.serviceDate },
                              prev.insuranceSiteKey,
                            );
                            setTimeout(() => scrollToLine(0), 0);
                            return next;
                          });
                        }
                      }}
                    />
                  </div>

                  <div className="flex justify-end mb-2">
                    <Button variant="success" onClick={onMapPrice}>
                      Map Price
                    </Button>
                  </div>

                  {/* Header */}
                  <div className="grid grid-cols-[1.5fr,0.5fr,1fr,1fr,1fr,1fr,1fr,0.5fr,1fr,1fr] gap-1 mb-2 mt-10 font-medium text-sm text-gray-700 items-center">
                    <div className="grid grid-cols-[auto,1fr] items-center gap-2">
                      <span />
                      <span className="pl-8">Procedure Code</span>
                    </div>
                    <span className="justify-self-center">Info</span>
                    <span>Procedure Date</span>
                    <span>Tooth Number</span>
                    <span>Tooth Surface</span>
                    <span>Quad</span>
                    <span>Arch</span>
                    <span>Qty</span>
                    <span>Auth No.</span>
                    <span>Billed Amount</span>
                  </div>

                  {/* Dynamic Rows */}
                  {form.serviceLines.map((line, i) => {
                    const raw = line.procedureCode || "";
                    const code = raw.trim();
                    const desc = code
                      ? getDescriptionForCode(code) || "No description available"
                      : "Enter a procedure code";

                    return (
                      <div
                        key={i}
                        ref={(el) => {
                          rowRefs.current[i] = el;
                          if (!el) rowRefs.current.splice(i, 1);
                        }}
                        className="scroll-mt-28 grid grid-cols-[1.5fr,0.5fr,1fr,1fr,1fr,1fr,1fr,0.5fr,1fr,1fr] gap-1 mb-2 items-center"
                      >
                        <div className="grid grid-cols-[auto,1fr] items-center gap-2">
                          <button
                            type="button"
                            onClick={() =>
                              setForm((prev) => {
                                const next = {
                                  ...prev,
                                  serviceLines: [...prev.serviceLines],
                                };
                                next.serviceLines.splice(i, 1);
                                return next;
                              })
                            }
                            className="p-1 rounded hover:bg-red-50"
                          >
                            <Trash2 className="h-4 w-4 text-red-500 hover:text-red-700" />
                          </button>
                          <Input
                            placeholder="eg. D0120"
                            value={line.procedureCode}
                            onChange={(e) =>
                              updateServiceLine(
                                i,
                                "procedureCode",
                                e.target.value.toUpperCase(),
                              )
                            }
                          />
                        </div>

                        <div className="flex justify-center">
                          <Tooltip>
                            <TooltipTrigger asChild>
                              <HelpCircle className="h-4 w-4 text-gray-400 hover:text-gray-600 cursor-help" />
                            </TooltipTrigger>
                            <TooltipContent>
                              <div className="text-sm">{desc}</div>
                            </TooltipContent>
                          </Tooltip>
                        </div>

                        <Popover
                          open={openProcedureDateIndex === i}
                          onOpenChange={(open) =>
                            setOpenProcedureDateIndex(open ? i : null)
                          }
                        >
                          <PopoverTrigger asChild>
                            <Button
                              variant="outline"
                              className="w-full text-left font-normal"
                            >
                              <CalendarIcon className="mr-2 h-4 w-4" />
                              {line.procedureDate || "Pick Date"}
                            </Button>
                          </PopoverTrigger>
                          <PopoverContent className="w-auto">
                            <Calendar
                              mode="single"
                              selected={
                                line.procedureDate
                                  ? new Date(line.procedureDate)
                                  : undefined
                              }
                              onSelect={(date) => updateProcedureDate(i, date)}
                              onClose={() => setOpenProcedureDateIndex(null)}
                            />
                          </PopoverContent>
                        </Popover>

                        <Input
                          placeholder="eg. 14"
                          value={line.toothNumber}
                          onChange={(e) =>
                            updateServiceLine(i, "toothNumber", e.target.value)
                          }
                        />
                        <Input
                          placeholder="eg. B,D,F,I,L,M,O (comma-separated)"
                          value={line.toothSurface}
                          onChange={(e) => {
                            const typed = normalizeToothSurface(e.target.value);
                            updateServiceLine(i, "toothSurface", typed);
                          }}
                        />
                        <Select
                          value={line.quad ?? ""}
                          onValueChange={(value) =>
                            updateServiceLine(i, "quad", value)
                          }
                        >
                          <SelectTrigger className="w-full">
                            <SelectValue placeholder="Quad" />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="UL">UL</SelectItem>
                            <SelectItem value="LL">LL</SelectItem>
                            <SelectItem value="UR">UR</SelectItem>
                            <SelectItem value="LR">LR</SelectItem>
                          </SelectContent>
                        </Select>
                        <Select
                          value={line.arch ?? ""}
                          onValueChange={(value) =>
                            updateServiceLine(i, "arch", value)
                          }
                        >
                          <SelectTrigger className="w-full">
                            <SelectValue placeholder="Arch" />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="Mandible">Mandible</SelectItem>
                            <SelectItem value="Maxilla">Maxilla</SelectItem>
                          </SelectContent>
                        </Select>
                        <Input
                          type="number"
                          placeholder="Qty"
                          value={line.quantity ?? ""}
                          onChange={(e) =>
                            updateServiceLine(i, "quantity", e.target.value)
                          }
                        />
                        <Input
                          placeholder="Quad"
                          value={line.quad}
                          onChange={(e) =>
                            updateServiceLine(i, "quad", e.target.value)
                          }
                        />
                        <Input
                          type="number"
                          step="0.01"
                          placeholder="$0.00"
                          value={
                            line.totalBilled?.toNumber() === 0
                              ? ""
                              : line.totalBilled?.toNumber()
                          }
                          onChange={(e) => {
                            updateServiceLine(i, "totalBilled", e.target.value);
                          }}
                          onBlur={(e) => {
                            const val = parseFloat(e.target.value);
                            const rounded = Math.round(val * 100) / 100;
                            updateServiceLine(
                              i,
                              "totalBilled",
                              isNaN(rounded) ? 0 : rounded,
                            );
                          }}
                        />
                      </div>
                    );
                  })}

                  <Button
                    className="mt-2"
                    variant="outline"
                    onClick={() =>
                      setForm((prev) => ({
                        ...prev,
                        serviceLines: [
                          ...prev.serviceLines,
                          {
                            procedureCode: "",
                            procedureDate: serviceDate,
                            quad: "",
                            arch: "",
                            toothNumber: "",
                            toothSurface: "",
                            totalBilled: new Decimal(0),
                            totalAdjusted: new Decimal(0),
                            totalPaid: new Decimal(0),
                          },
                        ],
                      }))
                    }
                  >
                    + Add Service Line
                  </Button>

                  <RegularComboButtons
                    onRegularCombo={(comboKey) => {
                      setForm((prev) => {
                        const next = applyComboToForm(
                          prev,
                          comboKey as any,
                          patient?.dateOfBirth ?? "",
                          { replaceAll: false, lineDate: prev.serviceDate },
                        );
                        setTimeout(() => scrollToLine(0), 0);
                        return next;
                      });
                    }}
                  />
                </div>

                {/* File Upload Section */}
                <h3 className="text-xl pt-8 font-semibold text-center">
                  File Upload
                </h3>
                <div className="mt-4 bg-gray-100 p-4 rounded-md space-y-4">
                  <p className="text-sm text-gray-500">
                    You can upload up to 10 files. Allowed types: PDF, JPG, PNG, WEBP.
                  </p>
                  <MultipleFileUploadZone
                    ref={uploadZoneRef}
                    onFilesChange={handleFilesChange}
                    isUploading={isUploading}
                    acceptedFileTypes="application/pdf,image/jpeg,image/jpg,image/png,image/webp"
                    maxFiles={10}
                  />
                  {form.uploadedFiles.length > 0 && (
                    <ul className="text-sm text-gray-700 list-disc ml-6">
                      {form.uploadedFiles.map((file, index) => (
                        <li key={index}>{file.name}</li>
                      ))}
                    </ul>
                  )}
                </div>

                {/* Missing Teeth */}
                <div className="mt-8 pt-8 space-y-4">
                  <h3 className="text-xl font-semibold text-center">Missing Teeth</h3>
                  <div className="flex flex-wrap gap-2 items-center justify-center">
                    <Label className="mr-2">Status</Label>
                    <Button
                      type="button"
                      variant={form.missingTeethStatus === "No_missing" ? "default" : "outline"}
                      onClick={() => setMissingTeethStatus("No_missing")}
                      aria-pressed={form.missingTeethStatus === "No_missing"}
                    >
                      No Missing
                    </Button>
                    <Button
                      type="button"
                      variant={form.missingTeethStatus === "endentulous" ? "default" : "outline"}
                      onClick={() => setMissingTeethStatus("endentulous")}
                      aria-pressed={form.missingTeethStatus === "endentulous"}
                    >
                      Edentulous
                    </Button>
                    <Button
                      type="button"
                      variant={form.missingTeethStatus === "Yes_missing" ? "default" : "outline"}
                      onClick={() => setMissingTeethStatus("Yes_missing")}
                      aria-pressed={form.missingTeethStatus === "Yes_missing"}
                    >
                      Specify Missing
                    </Button>
                    {form.missingTeethStatus === "Yes_missing" && (
                      <Button type="button" variant="outline" onClick={clearAllToothSelections}>
                        Clear All
                      </Button>
                    )}
                  </div>
                  {form.missingTeethStatus === "Yes_missing" && (
                    <MissingTeethSimple
                      value={form.missingTeeth}
                      onChange={(next) =>
                        setForm((prev) => ({ ...prev, missingTeeth: next }))
                      }
                    />
                  )}
                </div>

                {/* Remarks */}
                <div className="mt-8 pt-8 space-y-4">
                  <h3 className="text-xl font-semibold text-center">Remarks</h3>
                  <RemarksField
                    value={form.remarks}
                    onChange={(next) =>
                      setForm((prev) => ({ ...prev, remarks: next }))
                    }
                  />
                </div>

                {/* Insurance Carriers */}
                <div className="pt-6">
                  <h3 className="text-xl font-semibold mb-4 text-center">
                    {proceduresOnly ? "Save Procedures" : "Insurance Carriers"}
                  </h3>
                  {proceduresOnly ? (
                    <div className="flex justify-center gap-3">
                      <Button className="w-40" variant="default" onClick={() => runWithPriceCheck(handleProceduresSave)}>
                        Save Procedures
                      </Button>
                      <Button className="w-40" variant="secondary" onClick={() => runWithPriceCheck(handleProceduresUpdate)}>
                        Update &amp; Resubmit
                      </Button>
                      <Button className="w-28" variant="destructive" onClick={handleProceduresVoid}>
                        Void
                      </Button>
                    </div>
                  ) : (
                    <>
                      <div className="flex justify-center mb-3">
                        <Button
                          className="w-36 bg-slate-800 hover:bg-slate-900 text-white font-semibold"
                          onClick={handleClaimAll}
                        >
                          Claim All
                        </Button>
                      </div>
                    <div className="flex flex-wrap gap-2 justify-center">
                      <Button
                        className="w-32 bg-blue-600 hover:bg-blue-700 text-white"
                        onClick={() => runWithPriceCheck(() => handleMHSubmit())}
                      >
                        MH Claim
                      </Button>
                      <Button
                        className="w-32 bg-blue-600 hover:bg-blue-700 text-white"
                        onClick={() => runWithPriceCheck(handleCCAClaim)}
                        disabled={!isLicensed}
                        title={!isLicensed ? "License required" : undefined}
                      >
                        CCA Claim
                      </Button>
                      <Button
                        className="w-36 bg-violet-600 hover:bg-violet-700 text-white"
                        onClick={() => runWithPriceCheck(handleDDMAClaim)}
                        disabled={!isLicensed}
                        title={!isLicensed ? "License required" : undefined}
                      >
                        Delta MA Claim
                      </Button>
                      <Button
                        className="w-44 bg-orange-600 hover:bg-orange-700 text-white"
                        onClick={() => runWithPriceCheck(handleUnitedDHClaim)}
                        disabled={!isLicensed}
                        title={!isLicensed ? "License required" : undefined}
                      >
                        United/DentalHub Claim
                      </Button>
                      <Button
                        className="w-32 bg-teal-600 hover:bg-teal-700 text-white"
                        onClick={() => runWithPriceCheck(handleTuftsSCOClaim)}
                        disabled={!isLicensed}
                        title={!isLicensed ? "License required" : undefined}
                      >
                        Tufts Claim
                      </Button>
                      <Button
                        className="w-36 bg-emerald-600 hover:bg-emerald-700 text-white"
                        onClick={() => runWithPriceCheck(handleClaimSaved)}
                      >
                        Claim Saved
                      </Button>
                    </div>
                    </>
                  )}
                </div>
              </div>
            </TabsContent>

            {/* ── PreAuth Tab ── */}
            <TabsContent value="preauth">
              <div className="space-y-6">
                {/* Patient Information */}
                <div className="grid grid-cols-4 gap-4">
                  <div>
                    <Label htmlFor="pa-memberId">Member ID</Label>
                    <Input
                      id="pa-memberId"
                      value={form.memberId}
                      onChange={(e) => {
                        setForm({ ...form, memberId: e.target.value });
                        updatePatientField("insuranceId", e.target.value);
                      }}
                    />
                  </div>
                  <div>
                    <Label htmlFor="pa-dateOfBirth">Date Of Birth</Label>
                    <DateInput
                      value={
                        form.dateOfBirth ? parseLocalDate(form.dateOfBirth) : null
                      }
                      onChange={(date: Date | null) => {
                        const formatted = date ? formatLocalDate(date) : "";
                        setForm((prev) => ({ ...prev, dateOfBirth: formatted }));
                        updatePatientField("dateOfBirth", formatted);
                      }}
                      disableFuture
                    />
                  </div>
                  <div>
                    <Label htmlFor="pa-firstName">First Name</Label>
                    <Input
                      id="pa-firstName"
                      value={patient?.firstName || ""}
                      onChange={(e) => {
                        updatePatientField("firstName", e.target.value);
                        setForm((prev) => ({
                          ...prev,
                          patientName:
                            `${e.target.value} ${patient?.lastName || ""}`.trim(),
                        }));
                      }}
                      disabled={isLoading}
                    />
                  </div>
                  <div>
                    <Label htmlFor="pa-lastName">Last Name</Label>
                    <Input
                      id="pa-lastName"
                      value={patient?.lastName || ""}
                      onChange={(e) => {
                        updatePatientField("lastName", e.target.value);
                        setForm((prev) => ({
                          ...prev,
                          patientName:
                            `${patient?.firstName || ""} ${e.target.value}`.trim(),
                        }));
                      }}
                      disabled={isLoading}
                    />
                  </div>
                </div>

                {/* Service Lines */}
                <div>
                  <h3 className="text-xl font-semibold mb-2 text-center">
                    Service Lines
                  </h3>

                  <div className="flex flex-col gap-2">
                    <div className="flex justify-end items-center mb-4">
                      <div className="flex gap-2">
                        <Label className="flex items-center">Insurance Type</Label>
                        <Select
                          value={form.insuranceSiteKey || ""}
                          onValueChange={(val) =>
                            setForm((prev) => ({ ...prev, insuranceSiteKey: val }))
                          }
                        >
                          <SelectTrigger className="w-44 mr-4">
                            <SelectValue placeholder="Select Insurance" />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="MH">MassHealth</SelectItem>
                            <SelectItem value="CCA">CCA</SelectItem>
                            <SelectItem value="DDMA">DDMA</SelectItem>
                            <SelectItem value="DeltaIns">Delta Ins</SelectItem>
                            <SelectItem value="TuftsSCO">Tufts SCO</SelectItem>
                            <SelectItem value="UnitedSCO">United SCO</SelectItem>
                            <SelectItem value="CMSP">CMSP</SelectItem>
                            <SelectItem value="BCBS">BCBS</SelectItem>
                            <SelectItem value="UnitedAAPR">United AAPR</SelectItem>
                            <SelectItem value="Aetna">Aetna</SelectItem>
                            <SelectItem value="Altus">Altus</SelectItem>
                            <SelectItem value="MetlifeDental">Metlife Dental</SelectItem>
                            <SelectItem value="Cigna">Cigna</SelectItem>
                            <SelectItem value="DeltaWA">Delta WA</SelectItem>
                            <SelectItem value="DeltaIL">Delta IL</SelectItem>
                            <SelectItem value="Others">Others</SelectItem>
                          </SelectContent>
                        </Select>
                        <Label className="flex items-center">Tentative Service Date</Label>
                        <Popover
                          open={serviceDateOpen}
                          onOpenChange={setServiceDateOpen}
                        >
                          <PopoverTrigger asChild>
                            <Button
                              variant="outline"
                              className="w-[140px] justify-start text-left font-normal mr-4"
                            >
                              <CalendarIcon className="mr-2 h-4 w-4" />
                              {form.serviceDate}
                            </Button>
                          </PopoverTrigger>
                          <PopoverContent className="w-auto">
                            <Calendar
                              mode="single"
                              selected={serviceDateValue}
                              onSelect={(date) => { onServiceDateChange(date); }}
                              onClose={() => setServiceDateOpen(false)}
                            />
                          </PopoverContent>
                        </Popover>
                        <Label className="flex items-center ml-2">
                          Rendering Provider
                        </Label>
                        <Select
                          value={form.npiProvider?.npiNumber || ""}
                          onValueChange={(npiNumber) => {
                            const selected = npiProviders.find(
                              (p) => p.npiNumber === npiNumber,
                            );
                            if (!selected) return;
                            setForm((prev) => ({
                              ...prev,
                              npiProvider: {
                                npiNumber: selected.npiNumber,
                                providerName: selected.providerName,
                              },
                            }));
                          }}
                        >
                          <SelectTrigger className="w-56">
                            <SelectValue placeholder="Select NPI Provider" />
                          </SelectTrigger>
                          <SelectContent>
                            {npiProviders.map((p) => (
                              <SelectItem key={p.id} value={p.npiNumber}>
                                {p.npiNumber} — {p.providerName}
                              </SelectItem>
                            ))}
                          </SelectContent>
                        </Select>
                      </div>
                    </div>
                  </div>

                  <div className="flex justify-end mb-2">
                    <Button variant="success" onClick={onMapPrice}>
                      Map Price
                    </Button>
                  </div>

                  {/* Header */}
                  <div className="grid grid-cols-[1.5fr,0.5fr,1fr,1fr,1fr,1fr,1fr,0.5fr,1fr,1fr] gap-1 mb-2 mt-10 font-medium text-sm text-gray-700 items-center">
                    <div className="grid grid-cols-[auto,1fr] items-center gap-2">
                      <span />
                      <span className="pl-8">Procedure Code</span>
                    </div>
                    <span className="justify-self-center">Info</span>
                    <span>Procedure Date</span>
                    <span>Tooth Number</span>
                    <span>Tooth Surface</span>
                    <span>Quad</span>
                    <span>Arch</span>
                    <span>Qty</span>
                    <span>Auth No.</span>
                    <span>Billed Amount</span>
                  </div>

                  {/* Dynamic Rows */}
                  {form.serviceLines.map((line, i) => {
                    const raw = line.procedureCode || "";
                    const code = raw.trim();
                    const desc = code
                      ? getDescriptionForCode(code) || "No description available"
                      : "Enter a procedure code";

                    return (
                      <div
                        key={i}
                        ref={(el) => {
                          rowRefs.current[i] = el;
                          if (!el) rowRefs.current.splice(i, 1);
                        }}
                        className="scroll-mt-28 grid grid-cols-[1.5fr,0.5fr,1fr,1fr,1fr,1fr,1fr,0.5fr,1fr,1fr] gap-1 mb-2 items-center"
                      >
                        <div className="grid grid-cols-[auto,1fr] items-center gap-2">
                          <button
                            type="button"
                            onClick={() =>
                              setForm((prev) => {
                                const next = {
                                  ...prev,
                                  serviceLines: [...prev.serviceLines],
                                };
                                next.serviceLines.splice(i, 1);
                                return next;
                              })
                            }
                            className="p-1 rounded hover:bg-red-50"
                          >
                            <Trash2 className="h-4 w-4 text-red-500 hover:text-red-700" />
                          </button>
                          <Input
                            placeholder="eg. D0120"
                            value={line.procedureCode}
                            onChange={(e) =>
                              updateServiceLine(
                                i,
                                "procedureCode",
                                e.target.value.toUpperCase(),
                              )
                            }
                          />
                        </div>

                        <div className="flex justify-center">
                          <Tooltip>
                            <TooltipTrigger asChild>
                              <HelpCircle className="h-4 w-4 text-gray-400 hover:text-gray-600 cursor-help" />
                            </TooltipTrigger>
                            <TooltipContent>
                              <div className="text-sm">{desc}</div>
                            </TooltipContent>
                          </Tooltip>
                        </div>

                        <Popover
                          open={openProcedureDateIndex === i}
                          onOpenChange={(open) =>
                            setOpenProcedureDateIndex(open ? i : null)
                          }
                        >
                          <PopoverTrigger asChild>
                            <Button
                              variant="outline"
                              className="w-full text-left font-normal"
                            >
                              <CalendarIcon className="mr-2 h-4 w-4" />
                              {line.procedureDate || "Pick Date"}
                            </Button>
                          </PopoverTrigger>
                          <PopoverContent className="w-auto">
                            <Calendar
                              mode="single"
                              selected={
                                line.procedureDate
                                  ? new Date(line.procedureDate)
                                  : undefined
                              }
                              onSelect={(date) => updateProcedureDate(i, date)}
                              onClose={() => setOpenProcedureDateIndex(null)}
                            />
                          </PopoverContent>
                        </Popover>

                        <Input
                          placeholder="eg. 14"
                          value={line.toothNumber}
                          onChange={(e) =>
                            updateServiceLine(i, "toothNumber", e.target.value)
                          }
                        />
                        <Input
                          placeholder="eg. B,D,F,I,L,M,O (comma-separated)"
                          value={line.toothSurface}
                          onChange={(e) => {
                            const typed = normalizeToothSurface(e.target.value);
                            updateServiceLine(i, "toothSurface", typed);
                          }}
                        />
                        <Select
                          value={line.quad ?? ""}
                          onValueChange={(value) =>
                            updateServiceLine(i, "quad", value)
                          }
                        >
                          <SelectTrigger className="w-full">
                            <SelectValue placeholder="Quad" />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="UL">UL</SelectItem>
                            <SelectItem value="LL">LL</SelectItem>
                            <SelectItem value="UR">UR</SelectItem>
                            <SelectItem value="LR">LR</SelectItem>
                          </SelectContent>
                        </Select>
                        <Select
                          value={line.arch ?? ""}
                          onValueChange={(value) =>
                            updateServiceLine(i, "arch", value)
                          }
                        >
                          <SelectTrigger className="w-full">
                            <SelectValue placeholder="Arch" />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="Mandible">Mandible</SelectItem>
                            <SelectItem value="Maxilla">Maxilla</SelectItem>
                          </SelectContent>
                        </Select>
                        <Input
                          type="number"
                          placeholder="Qty"
                          value={line.quantity ?? ""}
                          onChange={(e) =>
                            updateServiceLine(i, "quantity", e.target.value)
                          }
                        />
                        <Input
                          placeholder="Quad"
                          value={line.quad}
                          onChange={(e) =>
                            updateServiceLine(i, "quad", e.target.value)
                          }
                        />
                        <Input
                          type="number"
                          step="0.01"
                          placeholder="$0.00"
                          value={
                            line.totalBilled?.toNumber() === 0
                              ? ""
                              : line.totalBilled?.toNumber()
                          }
                          onChange={(e) => {
                            updateServiceLine(i, "totalBilled", e.target.value);
                          }}
                          onBlur={(e) => {
                            const val = parseFloat(e.target.value);
                            const rounded = Math.round(val * 100) / 100;
                            updateServiceLine(
                              i,
                              "totalBilled",
                              isNaN(rounded) ? 0 : rounded,
                            );
                          }}
                        />
                      </div>
                    );
                  })}

                  <Button
                    className="mt-2"
                    variant="outline"
                    onClick={() =>
                      setForm((prev) => ({
                        ...prev,
                        serviceLines: [
                          ...prev.serviceLines,
                          {
                            procedureCode: "",
                            procedureDate: serviceDate,
                            quad: "",
                            arch: "",
                            toothNumber: "",
                            toothSurface: "",
                            totalBilled: new Decimal(0),
                            totalAdjusted: new Decimal(0),
                            totalPaid: new Decimal(0),
                          },
                        ],
                      }))
                    }
                  >
                    + Add Service Line
                  </Button>

                  <RegularComboButtons
                    excludeCategories={[
                      "Recalls & New Patients",
                      "Composite Fillings (Front)",
                      "Composite Fillings (Back)",
                      "Pedo",
                    ]}
                    excludeIds={["simpleExtraction", "babyTeethExtraction"]}
                    onRegularCombo={(comboKey) => {
                      setForm((prev) => {
                        const next = applyComboToForm(
                          prev,
                          comboKey as any,
                          patient?.dateOfBirth ?? "",
                          { replaceAll: false, lineDate: prev.serviceDate },
                        );
                        setTimeout(() => scrollToLine(0), 0);
                        return next;
                      });
                    }}
                  />
                </div>

                {/* File Upload Section */}
                <h3 className="text-xl pt-8 font-semibold text-center">
                  File Upload
                </h3>
                <div className="mt-4 bg-gray-100 p-4 rounded-md space-y-4">
                  <p className="text-sm text-gray-500">
                    You can upload up to 10 files. Allowed types: PDF, JPG, PNG, WEBP.
                  </p>
                  <MultipleFileUploadZone
                    ref={uploadZoneRef}
                    onFilesChange={handleFilesChange}
                    isUploading={isUploading}
                    acceptedFileTypes="application/pdf,image/jpeg,image/jpg,image/png,image/webp"
                    maxFiles={10}
                  />
                  {form.uploadedFiles.length > 0 && (
                    <ul className="text-sm text-gray-700 list-disc ml-6">
                      {form.uploadedFiles.map((file, index) => (
                        <li key={index}>{file.name}</li>
                      ))}
                    </ul>
                  )}
                </div>

                {/* Missing Teeth */}
                <div className="mt-8 pt-8 space-y-4">
                  <h3 className="text-xl font-semibold text-center">Missing Teeth</h3>
                  <div className="flex flex-wrap gap-2 items-center justify-center">
                    <Label className="mr-2">Status</Label>
                    <Button
                      type="button"
                      variant={form.missingTeethStatus === "No_missing" ? "default" : "outline"}
                      onClick={() => setMissingTeethStatus("No_missing")}
                      aria-pressed={form.missingTeethStatus === "No_missing"}
                    >
                      No Missing
                    </Button>
                    <Button
                      type="button"
                      variant={form.missingTeethStatus === "endentulous" ? "default" : "outline"}
                      onClick={() => setMissingTeethStatus("endentulous")}
                      aria-pressed={form.missingTeethStatus === "endentulous"}
                    >
                      Edentulous
                    </Button>
                    <Button
                      type="button"
                      variant={form.missingTeethStatus === "Yes_missing" ? "default" : "outline"}
                      onClick={() => setMissingTeethStatus("Yes_missing")}
                      aria-pressed={form.missingTeethStatus === "Yes_missing"}
                    >
                      Specify Missing
                    </Button>
                    {form.missingTeethStatus === "Yes_missing" && (
                      <Button type="button" variant="outline" onClick={clearAllToothSelections}>
                        Clear All
                      </Button>
                    )}
                  </div>
                  {form.missingTeethStatus === "Yes_missing" && (
                    <MissingTeethSimple
                      value={form.missingTeeth}
                      onChange={(next) =>
                        setForm((prev) => ({ ...prev, missingTeeth: next }))
                      }
                    />
                  )}
                </div>

                {/* Remarks */}
                <div className="mt-8 pt-8 space-y-4">
                  <h3 className="text-xl font-semibold text-center">Remarks</h3>
                  <RemarksField
                    value={form.remarks}
                    onChange={(next) =>
                      setForm((prev) => ({ ...prev, remarks: next }))
                    }
                  />
                </div>

                {/* PreAuth Buttons */}
                <div className="pt-6">
                  <h3 className="text-xl font-semibold mb-4 text-center">
                    PreAuth
                  </h3>
                  <div className="flex flex-wrap gap-2 justify-center">
                    <Button
                      className="w-32 bg-blue-600 hover:bg-blue-700 text-white"
                      onClick={() => handleMHPreAuth()}
                      disabled={!isLicensed}
                      title={!isLicensed ? "License required" : undefined}
                    >
                      MH PreAuth
                    </Button>
                    <Button
                      className="w-32 bg-blue-600 hover:bg-blue-700 text-white"
                      onClick={handleCCAPreAuth}
                      disabled={!isLicensed}
                      title={!isLicensed ? "License required" : undefined}
                    >
                      CCA PreAuth
                    </Button>
                    <Button
                      className="w-44"
                      variant="secondary"
                      disabled={!isLicensed}
                      title={!isLicensed ? "License required" : undefined}
                    >
                      United/DentalHub PreAuth
                    </Button>
                    <Button
                      className="w-32"
                      variant="secondary"
                      disabled={!isLicensed}
                      title={!isLicensed ? "License required" : undefined}
                    >
                      Tufts PreAuth
                    </Button>
                  </div>
                </div>
              </div>
            </TabsContent>

          </CardContent>
        </Tabs>
      </Card>

      {/* Price mismatch dialog */}
      <AlertDialog open={priceMismatches.length > 0} onOpenChange={open => { if (!open) setPriceMismatches([]); }}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Save new price to the app?</AlertDialogTitle>
            <AlertDialogDescription asChild>
              <div className="space-y-2">
                <p>The following procedure prices differ from the fee schedule:</p>
                <ul className="text-sm space-y-1">
                  {priceMismatches.map(m => (
                    <li key={m.procedureCode} className="flex justify-between gap-4">
                      <span className="font-medium">{m.procedureCode}</span>
                      <span className="text-muted-foreground">Schedule: ${m.schedulePrice.toFixed(2)}</span>
                      <span className="text-foreground font-semibold">Entered: ${m.enteredPrice.toFixed(2)}</span>
                    </li>
                  ))}
                </ul>
                <p className="text-sm">Do you want to save the new price(s) to the fee schedule for future use?</p>
              </div>
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel onClick={() => {
              setPriceMismatches([]);
              pendingClaimAction.current?.();
              pendingClaimAction.current = null;
            }}>
              No
            </AlertDialogCancel>
            <AlertDialogAction onClick={async () => {
              await savePricesToSchedule(priceMismatches);
              setPriceMismatches([]);
              pendingClaimAction.current?.();
              pendingClaimAction.current = null;
            }}>
              Yes
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </div>
  );
}