import { useState, useEffect } 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 { format, parse } from "date-fns";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Label } from "@/components/ui/label";
import { X, Calendar as CalendarIcon } from "lucide-react";
import { useToast } from "@/hooks/use-toast";
import { Calendar } from "@/components/ui/calendar";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";
import {
  PatientUncheckedCreateInputObjectSchema,
  AppointmentUncheckedCreateInputObjectSchema,
} from "@repo/db/usedSchemas";
import { z } from "zod";
import { useQuery } from "@tanstack/react-query";
import { apiRequest } from "@/lib/queryClient";
import { MultipleFileUploadZone } from "../file-upload/multiple-file-upload-zone";
import { useAuth } from "@/hooks/use-auth";

const PatientSchema = (
  PatientUncheckedCreateInputObjectSchema as unknown as z.ZodObject<any>
).omit({
  appointments: true,
});
type Patient = z.infer<typeof PatientSchema>;

const updatePatientSchema = (
  PatientUncheckedCreateInputObjectSchema as unknown as z.ZodObject<any>
)
  .omit({
    id: true,
    createdAt: true,
    userId: true,
  })
  .partial();

type UpdatePatient = z.infer<typeof updatePatientSchema>;

//creating types out of schema auto generated.
type Appointment = z.infer<typeof AppointmentUncheckedCreateInputObjectSchema>;

const insertAppointmentSchema = (
  AppointmentUncheckedCreateInputObjectSchema as unknown as z.ZodObject<any>
).omit({
  id: true,
  createdAt: true,
});
type InsertAppointment = z.infer<typeof insertAppointmentSchema>;

const updateAppointmentSchema = (
  AppointmentUncheckedCreateInputObjectSchema as unknown as z.ZodObject<any>
)
  .omit({
    id: true,
    createdAt: true,
    userId: true,
  })
  .partial();
type UpdateAppointment = z.infer<typeof updateAppointmentSchema>;

interface ServiceLine {
  procedureCode: string;
  procedureDate: string; // YYYY-MM-DD
  oralCavityArea?: string;
  toothNumber?: string;
  toothSurface?: string;
  billedAmount: number;
}

interface ClaimFormData {
  patientId: number;
  appointmentId: number;
  userId: number;
  staffId: number;
  patientName: string;
  memberId: string;
  dateOfBirth: string;
  remarks: string;
  serviceDate: string; // YYYY-MM-DD
  insuranceProvider: string;
  status: string; // default "pending"
  massdhp_username?:string,
  massdhp_password?:string,
  serviceLines: ServiceLine[];
}

interface ClaimFormProps {
  patientId: number;
  extractedData?: Partial<Patient>;
  onSubmit: (data: ClaimFormData) => void;
  onHandleAppointmentSubmit: (
    appointmentData: InsertAppointment | UpdateAppointment
  ) => void;
  onHandleUpdatePatient: (patient: UpdatePatient & { id: number }) => void;
  onHandleForSelenium: (data: ClaimFormData) => void;
  onClose: () => void;
}

interface Staff {
  id: string;
  name: string;
  role: "doctor" | "hygienist";
  color: string;
}

export function ClaimForm({
  patientId,
  extractedData,
  onHandleAppointmentSubmit,
  onHandleUpdatePatient,
  onHandleForSelenium,
  onSubmit,
  onClose,
}: ClaimFormProps) {
  const { toast } = useToast();
  const { user } = useAuth();

  // Patient state - initialize from extractedData or null (new patient)
  const [patient, setPatient] = useState<Patient | null>(
    extractedData ? ({ ...extractedData } as Patient) : null
  );

  // Query patient
  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 firstStaff = staffMembersRaw[0];
      if (firstStaff) setStaff(firstStaff);
    }
  }, [staffMembersRaw, staff]);

  // Service date state
  const [serviceDateValue, setServiceDateValue] = useState<Date>(new Date());
  const [serviceDate, setServiceDate] = useState<string>(
      new Date().toLocaleDateString("en-CA") // "YYYY-MM-DD"
  );

  useEffect(() => {
    if (extractedData?.serviceDate) {
      const parsed = new Date(extractedData.serviceDate);
      const isoFormatted = parsed.toLocaleDateString("en-CA");
      setServiceDateValue(parsed);
      setServiceDate(isoFormatted);
    }
  }, [extractedData]);


  // Update service date when calendar date changes
  const onServiceDateChange = (date: Date | undefined) => {
    if (date) {
      const formattedDate = date.toLocaleDateString("en-CA"); // "YYYY-MM-DD"
      setServiceDateValue(date);
      setServiceDate(formattedDate);
      setForm((prev) => ({ ...prev, serviceDate: formattedDate }));
    }
  };

  // Determine patient date of birth format
  const formatDOB = (dob: string | undefined) => {
    if (!dob) return "";
    if (/^\d{2}\/\d{2}\/\d{4}$/.test(dob)) return dob; // already MM/DD/YYYY
    if (/^\d{4}-\d{2}-\d{2}/.test(dob)) {
      const datePart = dob?.split("T")[0]; // safe optional chaining
      if (!datePart) return "";
      const [year, month, day] = datePart.split("-");
      return `${month}/${day}/${year}`;
    }
    return dob;
  };

  // MAIN FORM INITIAL STATE
  const [form, setForm] = useState<ClaimFormData & { uploadedFiles: File[] }>({
    patientId: patientId || 0,
    appointmentId: 0, //need to update
    userId: Number(user?.id),
    staffId: Number(staff?.id),
    patientName: `${patient?.firstName} ${patient?.lastName}`.trim(),
    memberId: patient?.insuranceId,
    dateOfBirth: formatDOB(patient?.dateOfBirth),
    remarks: "",
    serviceDate: serviceDate,
    insuranceProvider: "",
    status: "pending",
    massdhp_username: "",
    massdhp_password: "",
    serviceLines: [
      {
        procedureCode: "",
        procedureDate: serviceDate,
        oralCavityArea: "",
        toothNumber: "",
        toothSurface: "",
        billedAmount: 0,
      },
    ],

    uploadedFiles: [],
  });

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

  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]);

  // 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 ServiceLine,
    value: any
  ) => {
    const updatedLines = [...form.serviceLines];

    if (updatedLines[index]) {
      if (field === "billedAmount") {
        updatedLines[index][field] = parseFloat(value) || 0;
      } else {
        updatedLines[index][field] = value;
      }
    }

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

  const updateProcedureDate = (index: number, date: Date | undefined) => {
    if (!date) return;

    const formattedDate = date.toLocaleDateString("en-CA");
    const updatedLines = [...form.serviceLines];

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

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

  // FILE UPLOAD ZONE
  const [isUploading, setIsUploading] = useState(false);

  const handleFileUpload = (files: File[]) => {
    setIsUploading(true);

    const validFiles = files.filter((file) => file.type === "application/pdf");
    if (validFiles.length > 5) {
      toast({
        title: "Too Many Files",
        description: "You can only upload up to 5 PDFs.",
        variant: "destructive",
      });
      setIsUploading(false);
      return;
    }

    setForm((prev) => ({
      ...prev,
      uploadedFiles: validFiles,
    }));

    toast({
      title: "Files Selected",
      description: `${validFiles.length} PDF file(s) ready for processing.`,
    });

    setIsUploading(false);
  };

  // Delta MA Button Handler
  const handleDeltaMASubmit = async () => {

    function convertToISODate(mmddyyyy: string): string {
      const [month, day, year] = mmddyyyy.split("/");
      return `${year}-${month?.padStart(2, "0")}-${day?.padStart(2, "0")}`;
    }

    const appointmentData = {
      patientId: patientId,
      date: serviceDate,
      staffId: staff?.id,
    };

    // 1. Create or update appointment
    const appointmentId = await onHandleAppointmentSubmit(appointmentData);

    // 2. Update patient
    if (patient && typeof patient.id === "number") {
      const { id, createdAt, userId, ...sanitizedFields } = patient;
      const updatedPatientFields = {
        id,
        ...sanitizedFields,
        insuranceProvider: "Delta MA",
      };
      onHandleUpdatePatient(updatedPatientFields);
    } else {
      toast({
        title: "Error",
        description: "Cannot update patient: Missing or invalid patient data",
        variant: "destructive",
      });
    }

    // 3. Create Claim(if not)
    const { uploadedFiles, massdhp_username, massdhp_password, ...formToCreateClaim } = form;
    onSubmit({
      ...formToCreateClaim,
      staffId: Number(staff?.id),
      patientId: patientId,
      insuranceProvider: "Delta MA",
      appointmentId: appointmentId!,
    });

    // 4. sending form data to selenium service
    onHandleForSelenium({
    ...form,
    staffId: Number(staff?.id),
    patientId: patientId,
    insuranceProvider: "Delta MA",
    appointmentId: appointmentId!,
    massdhp_username: "kqkgaox@yahoo.com",
    massdhp_password: "Lex123456", //fetch this from db, by call
  });
    // 4. Close form
    onClose();
  };

  return (
    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4 overflow-y-auto">
      <Card className="w-full max-w-5xl max-h-[90vh] overflow-y-auto bg-white">
        <CardHeader className="flex flex-row items-center justify-between pb-2 border-b">
          <CardTitle className="text-xl font-bold">
            Insurance Claim Form
          </CardTitle>
          <Button variant="ghost" size="icon" onClick={onClose}>
            <X className="h-4 w-4" />
          </Button>
        </CardHeader>
        <CardContent className="pt-4">
          <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 })
                  }
                />
              </div>
              <div>
                <Label htmlFor="dateOfBirth">Date Of Birth</Label>
                <Input
                  id="dateOfBirth"
                  value={form.dateOfBirth}
                  onChange={(e) => {
                    updatePatientField("dateOfBirth", e.target.value);
                    setForm((prev) => ({
                      ...prev,
                      dateOfBirth: e.target.value,
                    }));
                  }}
                  disabled={isLoading}
                />
              </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>

            {/* Clinical Notes Entry */}
            <div className="mb-4 flex items-center gap-2">
              <Label htmlFor="remarks" className="whitespace-nowrap">
                Remarks:
              </Label>
              <Input
                id="remarks"
                className="flex-grow"
                placeholder="Paste clinical notes here"
                value={form.remarks}
                onChange={(e) => setForm({ ...form, remarks: e.target.value })}
              />
            </div>

            {/* Service Lines */}
            <div>
              <h3 className="text-xl font-semibold mb-2 text-center">
                Service Lines
              </h3>
              <div className="flex justify-end items-center mb-2">
                {/* Service Date */}
                <div className="flex gap-2">
                  <Label className="flex items-center">Service Date</Label>
                  <Popover>
                    <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 p-0" align="start">
                      <Calendar
                        mode="single"
                        selected={serviceDateValue}
                        onSelect={onServiceDateChange}
                        initialFocus
                      />
                    </PopoverContent>
                  </Popover>
                  {/* Treating doctor */}
                  <Label className="flex items-center ml-2">
                    Treating Doctor
                  </Label>
                  <Select
                    value={staff?.id || ""}
                    onValueChange={(id) => {
                      const selected = staffMembersRaw.find(
                        (member) => member.id === id
                      );
                      if (selected) {
                        setStaff(selected);
                        setForm((prev) => ({
                          ...prev,
                          staffId: Number(selected.id),
                        }));
                      }
                    }}
                  >
                    <SelectTrigger className="w-36">
                      <SelectValue
                        placeholder={staff ? staff.name : "Select Staff"}
                      />
                    </SelectTrigger>

                    <SelectContent>
                      {staffMembersRaw.map((member) => (
                        <SelectItem key={member.id} value={member.id}>
                          {member.name}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>
              </div>

              <div className="grid grid-cols-6 gap-4 mb-2 font-medium text-sm text-gray-700">
                <span>Procedure Code</span>
                <span>Procedure Date</span>
                <span>Oral Cavity Area</span>
                <span>Tooth Number</span>
                <span>Tooth Surface</span>
                <span>Billed Amount</span>
              </div>

              {/* Dynamic Rows */}
              {form.serviceLines.map((line, i) => (
                <div key={i} className="grid grid-cols-6 gap-4 mb-2">
                  <Input
                    placeholder="eg. D0120"
                    value={line.procedureCode}
                    onChange={(e) =>
                      updateServiceLine(i, "procedureCode", e.target.value)
                    }
                  />

                  {/* Date Picker */}
                  <Popover>
                    <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 p-0">
                      <Calendar
                        mode="single"
                        selected={new Date(line.procedureDate)}
                        onSelect={(date) => updateProcedureDate(i, date)}
                      />
                    </PopoverContent>
                  </Popover>

                  <Input
                    placeholder="Oral Cavity Area"
                    value={line.oralCavityArea}
                    onChange={(e) =>
                      updateServiceLine(i, "oralCavityArea", e.target.value)
                    }
                  />
                  <Input
                    placeholder="eg. 14"
                    value={line.toothNumber}
                    onChange={(e) =>
                      updateServiceLine(i, "toothNumber", e.target.value)
                    }
                  />
                  <Input
                    placeholder="eg. MOD"
                    value={line.toothSurface}
                    onChange={(e) =>
                      updateServiceLine(i, "toothSurface", e.target.value)
                    }
                  />
                  <Input
                    placeholder="$0.00"
                    type="number"
                    value={line.billedAmount}
                    onChange={(e) =>
                      updateServiceLine(i, "billedAmount", e.target.value)
                    }
                  />
                </div>
              ))}

              <Button
                variant="outline"
                onClick={() =>
                  setForm((prev) => ({
                    ...prev,
                    serviceLines: [
                      ...prev.serviceLines,
                      {
                        procedureCode: "",
                        procedureDate: serviceDate,
                        oralCavityArea: "",
                        toothNumber: "",
                        toothSurface: "",
                        billedAmount: 0,
                      },
                    ],
                  }))
                }
              >
                + Add Service Line
              </Button>

              <div className="flex gap-2 mt-10 mb-10">
                <Button variant="outline">Child Prophy Codes</Button>
                <Button variant="outline">Adult Prophy Codes</Button>
                <Button variant="outline">Customized Group Codes</Button>
                <Button variant="outline">Map Price</Button>
              </div>
            </div>

            {/* File Upload Section */}
            <div className="mt-4 bg-gray-100 p-4 rounded-md space-y-4">
              <p className="text-sm text-gray-500">
                Only PDF files allowed. You can upload up to 5 files. File types
                with 4+ character extensions like .DOCX, .PPTX, or .XLSX are not
                allowed.
              </p>

              <div className="flex flex-wrap gap-4 items-center justify-between">
                <div className="flex items-center gap-2">
                  <Label>Select Field:</Label>
                  <Select defaultValue="supportData">
                    <SelectTrigger className="w-60">
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="supportData">
                        Support Data for Claim
                      </SelectItem>
                      <SelectItem value="xrays">X-Ray Images</SelectItem>
                      <SelectItem value="photos">Clinical Photos</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              </div>

              <MultipleFileUploadZone
                onFileUpload={handleFileUpload}
                isUploading={isUploading}
                acceptedFileTypes="application/pdf"
                maxFiles={5}
              />

              {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>

            {/* Insurance Carriers */}
            <div>
              <h3 className="text-xl font-semibold mb-4 text-center">
                Insurance Carriers
              </h3>
              <div className="flex justify-between">
                <Button
                  className="w-32"
                  variant="outline"
                  onClick={handleDeltaMASubmit}
                >
                  Delta MA
                </Button>
                <Button className="w-32" variant="outline">
                  MH
                </Button>
                <Button className="w-32" variant="outline">
                  Others
                </Button>
              </div>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}