import { useProxyCannotAddToRecord } from '../../../../hooks/useProxyCannotAddToRecord';
import { useState, useEffect } from "react";
import { DeviceUseStatement } from "fhir/r4";
import {
  useForm,
  FormProvider,
  Controller,
  useFieldArray,
} from "react-hook-form";
import { FhirDeviceUseStatementDisplay, FhirValueSetSearch } from "../../../../components";
import {
  useFhirDeviceUseStatementBroadcast,
  useFhirDeviceUseStatements,
  useFhirDeviceUseStatementTargetedBroadcast,
  useFhirDevices,
  useFhirConditions,
  useFhirObservations,
  useFhirProcedures,
} from "../../../../hooks";
import {
  useAuthServiceContext,
  useDeviceUseStatementServiceContext,
  usePatientServiceContext,
  useValueSetServiceContext,
  IValueSet,
} from "../../../../services";
import {
  Calendar,
  ChevronRight,
  Cpu,
  Edit,
  Plus,
  Radio,
  Trash,
  Trash2,
  AlertCircle,
} from "lucide-react";
import { Button } from "../../../../components/ui/button.tsx";
import { Skeleton } from "../../../../components/ui/skeleton.tsx";
import { formatDateForDisplay } from "../../../../lib/utils.ts";
import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
} from "../../../../components/ui/sheet.tsx";
import { useArchive } from "../../../../hooks/useArchive";
import ArchiveConfirmModal from "../../../../components/ArchiveConfirmModal/ArchiveConfirmModal";
import { Label } from "../../../../components/ui/label.tsx";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "../../../../components/ui/select.tsx";
import { Input } from "../../../../components/ui/input.tsx";
import { Textarea } from "../../../../components/ui/textarea.tsx";
import {
  RadioGroup,
  RadioGroupItem,
} from "../../../../components/ui/radio-group.tsx";
import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from "../../../../components/ui/tabs.tsx";
import { Alert, AlertDescription } from "../../../../components/ui/alert.tsx";
import { describeWriteFailure } from '../../../../utils/fetchFailureMessage';
import { SourcePractice } from '../../../../components/ui/source-practice';
import { RecordPracticeNote, recordPracticeId, useRecordPracticeView, useRetireOnPracticeChange } from '../../../../contexts/RecordPracticeContext';

const DeviceUseStatements = () => {
  const { userRole, USER_ROLES } = useAuthServiceContext();
  // The nav row that opens this page says one thing and the page said another. A clinician reading
  // the same page through the chart is a different audience and keeps their own wording.
  const isPatientOrProxy = [USER_ROLES.PATIENT, USER_ROLES.RELATED_PERSON].includes(userRole as string);
  const { patientState } = usePatientServiceContext();
  const { loading, error, deviceUseStatementsList } = useFhirDeviceUseStatements();
  const {
    createDeviceUseStatement,
    updateDeviceUseStatement,
    archiveDeviceUseStatement,
    transformFromFhirDeviceUseStatement,
  } = useDeviceUseStatementServiceContext();
  const { fetchValueSet, valueSetUrls } = useValueSetServiceContext();

  const [selectedDeviceUseStatement, setSelectedDeviceUseStatement] = useState<DeviceUseStatement | null>(null);
  const [showDisplayModal, setShowDisplayModal] = useState<boolean>(false);
  // The record's practice context: its own device statements under a named practice; the empty state speaks for the whole record.
  const practiceView = useRecordPracticeView(deviceUseStatementsList, recordPracticeId);
  useRetireOnPracticeChange(() => { setShowDisplayModal(false); setSelectedDeviceUseStatement(null); });
  const [openSheet, setOpenSheet] = useState(false);
  const [isEditMode, setIsEditMode] = useState(false);
  const [editingId, setEditingId] = useState<string | null>(null);
  const [isSaving, setIsSaving] = useState(false);
  const [saveError, setSaveError] = useState<string | null>(null);
  const [deviceToDelete, setDeviceToDelete] = useState<DeviceUseStatement | null>(null);
  const archive = useArchive((reason, note) =>
    deviceToDelete ? archiveDeviceUseStatement(deviceToDelete, reason, note) : Promise.resolve()
  );
  const [loadingValueSets, setLoadingValueSets] = useState(false);
  const [deviceStatementStatus, setDeviceStatementStatus] = useState<IValueSet[]>([]);

  const { devicesList } = useFhirDevices();
  const { conditionsList } = useFhirConditions();
  const { observationsList } = useFhirObservations();
  const { proceduresList } = useFhirProcedures();

  const methods = useForm<any>({
    defaultValues: {
      status: "",
      device: null,
      bodySite: null,
      timingType: "dateTime",
      timingDateTime: "",
      timingPeriod: { start: "", end: "" },
      timingTiming: null,
      reasonCode: [],
      reasonReference: [],
      note: [],
      derivedFrom: [],
      recordedOn: new Date().toISOString().slice(0, 16),
    },
  });

  const {
    control,
    handleSubmit,
    watch,
    reset,
    setValue,
    formState: { errors },
  } = methods;

  const timingType = watch("timingType");
  const reasonReferenceFieldArray = useFieldArray({ control, name: "reasonReference" });
  const derivedFromFieldArray = useFieldArray({ control, name: "derivedFrom" });
  const noteFieldArray = useFieldArray({ control, name: "note" });

  useEffect(() => {
    const loadValueSets = async () => {
      setLoadingValueSets(true);
      try {
        const [deviceStatementStatusValueSet] = await Promise.all([
          fetchValueSet(valueSetUrls.deviceStatementStatus),
        ]);
        setDeviceStatementStatus(deviceStatementStatusValueSet);
      } catch (err) {
        console.error("Error loading value sets:", err);
      } finally {
        setLoadingValueSets(false);
      }
    };

    loadValueSets();
  }, [fetchValueSet, valueSetUrls]);

  useFhirDeviceUseStatementBroadcast();
  useFhirDeviceUseStatementTargetedBroadcast({
    deviceUseStatement: selectedDeviceUseStatement || undefined,
    isOpen: showDisplayModal,
    onUpdate: (updatedDeviceUseStatement) => {
      setSelectedDeviceUseStatement(updatedDeviceUseStatement);
    },
    onDelete: () => {
      setShowDisplayModal(false);
      setSelectedDeviceUseStatement(null);
    },
  });

  const viewDeviceUseStatement = (deviceUseStatement: DeviceUseStatement) => {
    setSelectedDeviceUseStatement(deviceUseStatement);
    setShowDisplayModal(true);
  };

  const editDeviceUseStatement = (
    event: React.MouseEvent,
    deviceUseStatement: DeviceUseStatement,
  ) => {
    event.stopPropagation();
    setIsEditMode(true);
    setEditingId(deviceUseStatement.id!);
    loadDeviceUseStatementForEdit(deviceUseStatement);
  };

  const addDeviceUseStatement = () => {
    if (!patientState?.id) {
      setSaveError("Cannot create device use statement: No patient selected");
      return;
    }
    setIsEditMode(false);
    setEditingId(null);
    reset({
      status: "",
      device: null,
      bodySite: null,
      timingType: "dateTime",
      timingDateTime: new Date().toISOString().slice(0, 16),
      timingPeriod: { start: "", end: "" },
      timingTiming: null,
      reasonCode: [],
      reasonReference: [],
      note: [],
      derivedFrom: [],
      recordedOn: new Date().toISOString().slice(0, 16),
    });
    setSaveError(null);
    setOpenSheet(true);
  };

  const loadDeviceUseStatementForEdit = (deviceUseStatement: DeviceUseStatement) => {
    const formValues = transformFromFhirDeviceUseStatement(deviceUseStatement);
    reset(formValues);
    setOpenSheet(true);
  };

  const confirmArchive = (deviceUseStatement: DeviceUseStatement) => {
    setDeviceToDelete(deviceUseStatement);
    archive.open();
  };

  const handleAddReasonReference = () => {
    reasonReferenceFieldArray.append({
      reference: { reference: "", display: "" },
      referenceType: "Condition",
    });
  };

  const handleRemoveReasonReference = (index: number) => {
    reasonReferenceFieldArray.remove(index);
  };

  const handleAddDerivedFrom = () => {
    derivedFromFieldArray.append({
      reference: { reference: "", display: "" },
      referenceType: "Procedure",
    });
  };

  const handleRemoveDerivedFrom = (index: number) => {
    derivedFromFieldArray.remove(index);
  };

  const handleAddNote = () => {
    noteFieldArray.append({ text: "", time: new Date().toISOString() });
  };

  const handleRemoveNote = (index: number) => {
    noteFieldArray.remove(index);
  };

  const formatDateForFHIR = (dateString: string): string => {
    if (!dateString) return new Date().toISOString();
    try {
      if (dateString.endsWith("Z") || /[+-]\d{2}:\d{2}$/.test(dateString)) {
        return dateString;
      }
      let normalized = dateString;
      if (/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}$/.test(normalized)) {
        normalized = `${normalized}:00`;
      }
      const date = new Date(normalized);
      if (isNaN(date.getTime())) {
        console.warn("Invalid date:", dateString);
        return new Date().toISOString();
      }
      return date.toISOString();
    } catch (error) {
      console.error("Error formatting date:", error);
      return new Date().toISOString();
    }
  };

// Update the onSubmit function in DeviceUseStatements.tsx (around line 250-300)

const onSubmit = async (data: any) => {
  if (!patientState?.id) {
    setSaveError("Patient ID is not available. Please ensure a patient is selected.");
    return;
  }

  setIsSaving(true);
  setSaveError(null);

  try {
    // Format dates for FHIR
    if (data.recordedOn) {
      data.recordedOn = formatDateForFHIR(data.recordedOn);
    }
    if (data.timingDateTime) {
      data.timingDateTime = formatDateForFHIR(data.timingDateTime);
    }
    if (data.timingPeriod?.start) {
      data.timingPeriod.start = formatDateForFHIR(data.timingPeriod.start);
    }
    if (data.timingPeriod?.end) {
      data.timingPeriod.end = formatDateForFHIR(data.timingPeriod.end);
    }

    // Transform the data to proper FHIR format
    const deviceUseStatementData: any = {
      resourceType: "DeviceUseStatement",
      ...(isEditMode && editingId ? { id: editingId } : {}),
      status: data.status,
      subject: { reference: `Patient/${patientState.id}` },
      device: data.device,
    };

    // Handle bodySite - FhirValueSetSearch writes { code, display, system } (IValueSet)
    if (data.bodySite?.code) {
      deviceUseStatementData.bodySite = {
        coding: [{ code: data.bodySite.code, display: data.bodySite.display, ...(data.bodySite.system && { system: data.bodySite.system }) }],
        text: data.bodySite.display
      };
    }

    // Handle recordedOn
    if (data.recordedOn) {
      deviceUseStatementData.recordedOn = data.recordedOn;
    }

    // Handle timing
    if (data.timingType === "dateTime" && data.timingDateTime) {
      deviceUseStatementData.timingDateTime = data.timingDateTime;
    } else if (data.timingType === "period" && data.timingPeriod) {
      if (data.timingPeriod.start || data.timingPeriod.end) {
        deviceUseStatementData.timingPeriod = {};
        if (data.timingPeriod.start) {
          deviceUseStatementData.timingPeriod.start = data.timingPeriod.start;
        }
        if (data.timingPeriod.end) {
          deviceUseStatementData.timingPeriod.end = data.timingPeriod.end;
        }
      }
    } else if (data.timingType === "timing" && data.timingTiming) {
      deviceUseStatementData.timingTiming = data.timingTiming;
    }

    // Handle reasonCode - FhirValueSetSearch writes [{ code, display, system }] (IValueSet[])
    if (data.reasonCode && data.reasonCode.length > 0) {
      const mappedReasonCode = data.reasonCode
        .filter((rc: any) => rc?.code)
        .map((rc: any) => ({
          coding: [{ code: rc.code, display: rc.display, ...(rc.system && { system: rc.system }) }],
          text: rc.display
        }));
      if (mappedReasonCode.length > 0) {
        deviceUseStatementData.reasonCode = mappedReasonCode;
      }
    }

    // Handle reasonReference
    if (data.reasonReference && data.reasonReference.length > 0) {
      const validReasonReferences = data.reasonReference
        .filter((ref: any) => ref?.reference?.reference)
        .map((ref: any) => ({
          reference: ref.reference.reference,
          display: ref.reference.display || "",
          type: ref.referenceType,
        }));
      if (validReasonReferences.length > 0) {
        deviceUseStatementData.reasonReference = validReasonReferences;
      }
    }

    // Handle derivedFrom
    if (data.derivedFrom && data.derivedFrom.length > 0) {
      const validDerivedFrom = data.derivedFrom
        .filter((ref: any) => ref?.reference?.reference)
        .map((ref: any) => ({
          reference: ref.reference.reference,
          display: ref.reference.display || "",
          type: ref.referenceType,
        }));
      if (validDerivedFrom.length > 0) {
        deviceUseStatementData.derivedFrom = validDerivedFrom;
      }
    }

    // Handle notes
    if (data.note && data.note.length > 0) {
      const validNotes = data.note.filter((note: any) => note.text && note.text.trim() !== "");
      if (validNotes.length > 0) {
        deviceUseStatementData.note = validNotes.map((note: any) => ({
          text: note.text,
          time: note.time || new Date().toISOString(),
        }));
      }
    }

    // Clean up undefined/null values
    const cleanObservation = JSON.parse(JSON.stringify(deviceUseStatementData));
    Object.keys(cleanObservation).forEach((key) => {
      if (cleanObservation[key] === undefined || cleanObservation[key] === null || 
          (Array.isArray(cleanObservation[key]) && cleanObservation[key].length === 0)) {
        delete cleanObservation[key];
      }
    });

    if (isEditMode && editingId) {
      await updateDeviceUseStatement(cleanObservation);
    } else {
      await createDeviceUseStatement(cleanObservation);
    }

    reset();
    setOpenSheet(false);
    setIsEditMode(false);
    setEditingId(null);
  } catch (err: any) {
    console.error("Error saving device use statement:", err);
    setSaveError(describeWriteFailure(err, 'Failed to save device use statement'));
  } finally {
    setIsSaving(false);
  }
};

  const proxyCannotAdd = useProxyCannotAddToRecord();
  const isAuthorizedToEdit = () => {
    return (
      !proxyCannotAdd && userRole &&
      [
        USER_ROLES.PATIENT,
        USER_ROLES.RELATED_PERSON,
        USER_ROLES.PRACTITIONER,
      ].includes(userRole as string)
    );
  };

  return (
    <div>
      <div className="flex justify-between items-center">
        <div className="mb-2 lg:mb-0 sm:mb-0">
          <h2 className="font-bold text-xl">
            {isPatientOrProxy ? "Devices you use" : "Devices"}
          </h2>
          <p className="text-sm">
            View and manage medical devices, implants, and associated
            traceability information.
          </p>
        </div>
        <div className="flex justify-end text-end">
          {isAuthorizedToEdit() && (
            <Button onClick={addDeviceUseStatement}>
              <Plus /> Add
            </Button>
          )}
        </div>
      </div>

      {/* Add/Edit Sheet */}
      <Sheet open={openSheet} onOpenChange={setOpenSheet}>
        <SheetContent
          side="right"
          className="ak-panel gap-0 w-full overflow-hidden sm:max-w-[700px]"
        >
          <SheetHeader className="ak-overlay__header shrink-0 pr-10">
            <SheetTitle className="ak-overlay__title">
              {isEditMode ? "Edit Device Use Statement" : "New Device Use Statement"}
            </SheetTitle>
          </SheetHeader>

          <FormProvider {...methods}>
            <form onSubmit={handleSubmit(onSubmit)}>
              <SheetDescription className="ak-overlay__body min-h-0 flex-1 overflow-y-auto space-y-3 thin-scrollbar py-1">
                {saveError && (
                  <Alert variant="destructive">
                    <AlertCircle className="h-4 w-4" />
                    <AlertDescription>{saveError}</AlertDescription>
                  </Alert>
                )}

                <div className="grid grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <Label>Reference to device used *</Label>
                    <Controller
                      name="device"
                      control={control}
                      rules={{ required: "Device is required" }}
                      render={({ field }) => (
                        <Select
                          value={field.value?.reference?.split("/")[1] || ""}
                          onValueChange={(value) => {
                            const selected = devicesList.find((dev) => dev.id === value);
                            if (selected) {
                              field.onChange({
                                reference: `Device/${selected.id}`,
                                display: selected.deviceName?.[0]?.name || "Device",
                              });
                            }
                          }}
                        >
                          <SelectTrigger className="w-full">
                            <SelectValue placeholder="Select device" />
                          </SelectTrigger>
                          <SelectContent>
                            {devicesList.map((device) => (
                              <SelectItem key={device.id} value={device.id!}>
                                {device.deviceName?.[0]?.name || device.id}
                              </SelectItem>
                            ))}
                          </SelectContent>
                        </Select>
                      )}
                    />
                    {errors.device && (
                      <p className="text-sm text-destructive">{errors.device.message as string}</p>
                    )}
                  </div>

                  <div className="space-y-2">
                    <Label>Status *</Label>
                    <Controller
                      name="status"
                      control={control}
                      rules={{ required: "Status is required" }}
                      render={({ field }) => (
                        <Select value={field.value || ""} onValueChange={field.onChange}>
                          <SelectTrigger className="w-full">
                            <SelectValue placeholder="Select status" />
                          </SelectTrigger>
                          <SelectContent>
                            {deviceStatementStatus.map((status) => (
                              <SelectItem key={status.code} value={status.code}>
                                {status.display}
                              </SelectItem>
                            ))}
                          </SelectContent>
                        </Select>
                      )}
                    />
                    {errors.status && (
                      <p className="text-sm text-destructive">{errors.status.message as string}</p>
                    )}
                  </div>
                </div>

                <div className="space-y-2">
                  <FhirValueSetSearch
                    label="Target Body Site"
                    context="bodySite"
                    valueSetUrl={valueSetUrls.bodySite}
                    multiple={false}
                    placeholder="Search for body sites..."
                    required={false}
                  />
                </div>

                <div className="space-y-2 w-1/2">
                  <Label>When the statement was recorded</Label>
                  <Controller
                    name="recordedOn"
                    control={control}
                    render={({ field }) => (
                      <Input type="datetime-local" {...field} value={field.value || ""} />
                    )}
                  />
                </div>

                <div className="p-2 bg-sunken border-secondary rounded space-y-3">
                  <p className="text-sm font-bold">
                    When was the device used?
                  </p>
                  
                  <div className="space-y-2">
                    <p className="text-sm text-secondary">
                      Timing information type
                    </p>
                    <Controller
                      name="timingType"
                      control={control}
                      render={({ field }) => (
                        <RadioGroup
                          value={field.value}
                          onValueChange={field.onChange}
                          className="flex gap-3"
                        >
                          <div className="flex items-center gap-3">
                            <RadioGroupItem value="dateTime" id="date" />
                            <Label htmlFor="date">Date</Label>
                          </div>
                          <div className="flex items-center gap-3">
                            <RadioGroupItem value="timing" id="timing" />
                            <Label htmlFor="timing">Timing</Label>
                          </div>
                          <div className="flex items-center gap-3">
                            <RadioGroupItem value="period" id="period" />
                            <Label htmlFor="period">Period</Label>
                          </div>
                        </RadioGroup>
                      )}
                    />
                  </div>

                  {timingType === "dateTime" && (
                    <div className="space-y-2 w-1/2">
                      <Label>Date Used</Label>
                      <Controller
                        name="timingDateTime"
                        control={control}
                        render={({ field }) => (
                          <Input type="datetime-local" {...field} value={field.value || ""} />
                        )}
                      />
                    </div>
                  )}

                  {timingType === "period" && (
                    <div className="space-y-3">
                      <div className="space-y-2 w-1/2">
                        <Label>Start Date</Label>
                        <Controller
                          name="timingPeriod.start"
                          control={control}
                          render={({ field }) => (
                            <Input type="datetime-local" {...field} value={field.value || ""} />
                          )}
                        />
                      </div>
                      <div className="space-y-2 w-1/2">
                        <Label>End Date</Label>
                        <Controller
                          name="timingPeriod.end"
                          control={control}
                          render={({ field }) => (
                            <Input type="datetime-local" {...field} value={field.value || ""} />
                          )}
                        />
                      </div>
                    </div>
                  )}
                </div>

                <Tabs defaultValue="reason">
                  <TabsList variant="line" className="mb-3">
                    <TabsTrigger
                      className="data-[state=active]:bg-white data-[state=active]:border-b-[2px] data-[state=active]:border-b-blue-600 rounded-none data-[state=active]:text-primary data-[state=active]:font-bold"
                      value="reason"
                    >
                      Reason
                    </TabsTrigger>
                    <TabsTrigger
                      className="data-[state=active]:bg-white data-[state=active]:border-b-[2px] data-[state=active]:border-b-blue-600 rounded-none data-[state=active]:text-primary data-[state=active]:font-bold"
                      value="supportingInformation"
                    >
                      Supporting Information
                    </TabsTrigger>
                    <TabsTrigger
                      className="data-[state=active]:bg-white data-[state=active]:border-b-[2px] data-[state=active]:border-b-blue-600 rounded-none data-[state=active]:text-primary data-[state=active]:font-bold"
                      value="notes"
                    >
                      Notes
                    </TabsTrigger>
                  </TabsList>

                  <TabsContent value="reason" className="space-y-3">
                    <div className="space-y-2">
                      <FhirValueSetSearch
                        label="Why device was used"
                        context="reasonCode"
                        valueSetUrl={valueSetUrls.clinicalFindings}
                        multiple={true}
                        placeholder="Search for reasons..."
                        required={false}
                      />
                    </div>

                    {reasonReferenceFieldArray.fields.length === 0 && (
                      <Alert>
                        <AlertDescription>
                          No reason references added yet. Click "Add Reference" to add conditions or observations.
                        </AlertDescription>
                      </Alert>
                    )}

                    {reasonReferenceFieldArray.fields.map((field, index) => (
                      <div key={field.id} className="bg-muted p-2 rounded border-secondary space-y-2">
                        <div className="flex gap-2 justify-between items-center">
                          <div className="flex gap-3 items-center">
                            <p className="bg-blue-soft text-primary px-3 py-1 rounded text-xl font-bold">
                              {index + 1}
                            </p>
                            <p className="text-sm font-bold">
                              Reference Type
                            </p>
                          </div>
                          <Button
                            type="button"
                            variant="ghost"
                            size="icon"
                            onClick={() => handleRemoveReasonReference(index)}
                            aria-label={`Remove reason reference ${index + 1}`}
                          >
                            <Trash2 className="text-red-600" size={20} />
                          </Button>
                        </div>

                        <div className="grid grid-cols-2 gap-4">
                          <div className="space-y-2">
                            <Label>Reference Type</Label>
                            <Controller
                              name={`reasonReference.${index}.referenceType`}
                              control={control}
                              render={({ field }) => (
                                <Select value={field.value || "Condition"} onValueChange={field.onChange}>
                                  <SelectTrigger className="w-full">
                                    <SelectValue placeholder="Select type" />
                                  </SelectTrigger>
                                  <SelectContent>
                                    <SelectItem value="Condition">Condition</SelectItem>
                                    <SelectItem value="Observation">Observation</SelectItem>
                                  </SelectContent>
                                </Select>
                              )}
                            />
                          </div>

                          <div className="space-y-2">
                            <Label>Select Reference</Label>
                            <Controller
                              name={`reasonReference.${index}.reference.reference`}
                              control={control}
                              render={({ field }) => {
                                const referenceType = watch(`reasonReference.${index}.referenceType`);
                                const list = referenceType === "Condition" ? conditionsList : observationsList;
                                
                                return (
                                  <Select
                                    value={field.value?.split("/")[1] || ""}
                                    onValueChange={(value) => {
                                      const selected = list.find((item) => item.id === value);
                                      if (selected) {
                                        field.onChange(`${referenceType}/${selected.id}`);
                                        setValue(
                                          `reasonReference.${index}.reference.display`,
                                          selected.code?.text || selected.id || referenceType
                                        );
                                      }
                                    }}
                                  >
                                    <SelectTrigger className="w-full">
                                      <SelectValue placeholder="Select reference" />
                                    </SelectTrigger>
                                    <SelectContent>
                                      {list.map((item) => (
                                        <SelectItem key={item.id} value={item.id!}>
                                          {item.code?.text || item.id}
                                        </SelectItem>
                                      ))}
                                    </SelectContent>
                                  </Select>
                                );
                              }}
                            />
                          </div>
                        </div>
                      </div>
                    ))}

                    <Button
                      type="button"
                      variant="outline"
                      className="w-full bg-sunken h-11"
                      onClick={handleAddReasonReference}
                    >
                      <Plus className="w-4 h-4 mr-2" />
                      Add Reference
                    </Button>
                  </TabsContent>

                  <TabsContent value="supportingInformation" className="space-y-2">
                    <p className="text-sm font-bold">
                      Supporting Information
                    </p>

                    {derivedFromFieldArray.fields.length === 0 && (
                      <Alert>
                        <AlertDescription>
                          No supporting information added yet. Click "Add Reference" to add procedures.
                        </AlertDescription>
                      </Alert>
                    )}

                    {derivedFromFieldArray.fields.map((field, index) => (
                      <div key={field.id} className="bg-muted p-2 rounded border-secondary space-y-2">
                        <div className="flex gap-2 justify-between items-center">
                          <div className="flex gap-3 items-center">
                            <p className="bg-blue-soft text-primary px-3 py-1 rounded text-xl font-bold">
                              {index + 1}
                            </p>
                            <p className="text-sm font-bold">
                              Supporting Information
                            </p>
                          </div>
                          <Button
                            type="button"
                            variant="ghost"
                            size="icon"
                            onClick={() => handleRemoveDerivedFrom(index)}
                            aria-label={`Remove derived-from reference ${index + 1}`}
                          >
                            <Trash2 className="text-red-600" size={20} />
                          </Button>
                        </div>

                        <div className="grid grid-cols-2 gap-4">
                          <div className="space-y-2">
                            <Label>Reference Type</Label>
                            <Controller
                              name={`derivedFrom.${index}.referenceType`}
                              control={control}
                              render={({ field }) => (
                                <Select value={field.value || "Procedure"} onValueChange={field.onChange}>
                                  <SelectTrigger className="w-full">
                                    <SelectValue placeholder="Select type" />
                                  </SelectTrigger>
                                  <SelectContent>
                                    <SelectItem value="Procedure">Procedure</SelectItem>
                                  </SelectContent>
                                </Select>
                              )}
                            />
                          </div>

                          <div className="space-y-2">
                            <Label>Select Procedure</Label>
                            <Controller
                              name={`derivedFrom.${index}.reference.reference`}
                              control={control}
                              render={({ field }) => (
                                <Select
                                  value={field.value?.split("/")[1] || ""}
                                  onValueChange={(value) => {
                                    const selected = proceduresList.find((item) => item.id === value);
                                    if (selected) {
                                      field.onChange(`Procedure/${selected.id}`);
                                      setValue(
                                        `derivedFrom.${index}.reference.display`,
                                        selected.code?.text || selected.id || "Procedure"
                                      );
                                    }
                                  }}
                                >
                                  <SelectTrigger className="w-full">
                                    <SelectValue placeholder="Select procedure" />
                                  </SelectTrigger>
                                  <SelectContent>
                                    {proceduresList.map((item) => (
                                      <SelectItem key={item.id} value={item.id!}>
                                        {item.code?.text || item.id}
                                      </SelectItem>
                                    ))}
                                  </SelectContent>
                                </Select>
                              )}
                            />
                          </div>
                        </div>
                      </div>
                    ))}

                    <Button
                      type="button"
                      variant="outline"
                      className="w-full bg-sunken h-11"
                      onClick={handleAddDerivedFrom}
                    >
                      <Plus className="w-4 h-4 mr-2" />
                      Add Reference
                    </Button>
                  </TabsContent>

                  <TabsContent value="notes" className="space-y-2">
                    {noteFieldArray.fields.length === 0 && (
                      <Alert>
                        <AlertDescription>
                          No notes added yet. Click "Add Notes" to add comments.
                        </AlertDescription>
                      </Alert>
                    )}

                    {noteFieldArray.fields.map((field, index) => (
                      <div key={field.id} className="flex gap-2 justify-between items-center">
                        <div className="flex gap-3 items-center w-full">
                          <p className="bg-blue-soft text-primary px-3 py-1 rounded text-xl font-bold">
                            {index + 1}
                          </p>
                          <Controller
                            name={`note.${index}.text`}
                            control={control}
                            render={({ field }) => (
                              <Textarea
                                className="w-full rounded"
                                placeholder="Enter note"
                                {...field}
                                value={field.value || ""}
                              />
                            )}
                          />
                        </div>
                        <Button
                          type="button"
                          variant="ghost"
                          size="icon"
                          onClick={() => handleRemoveNote(index)}
                          aria-label={`Remove note ${index + 1}`}
                        >
                          <Trash2 className="text-red-600" size={20} />
                        </Button>
                      </div>
                    ))}

                    <Button
                      type="button"
                      variant="outline"
                      className="w-full bg-sunken h-11"
                      onClick={handleAddNote}
                    >
                      <Plus className="w-4 h-4 mr-2" />
                      Add Notes
                    </Button>
                  </TabsContent>
                </Tabs>

                <div className="flex justify-end gap-3 pt-4 sticky bottom-0 bg-white pb-2">
                  <SheetClose asChild>
                    <Button type="button" variant="outline" disabled={isSaving}>
                      Cancel
                    </Button>
                  </SheetClose>
                  <Button type="submit" disabled={isSaving || loadingValueSets}>
                    {isSaving ? "Saving..." : isEditMode ? "Update" : "Save"}
                  </Button>
                </div>
              </SheetDescription>
            </form>
          </FormProvider>
        </SheetContent>
      </Sheet>

      {/* Archive Confirmation Dialog */}
      <ArchiveConfirmModal
        open={archive.isOpen}
        onOpenChange={(o) => { if (!o) { archive.close(); setDeviceToDelete(null); } }}
        resourceLabel="Device Use Statement"
        submitting={archive.submitting}
        error={archive.error}
        onConfirm={async (reason, note) => {
          if (await archive.submit(reason, note)) {
            setDeviceToDelete(null);
          }
        }}
      />


      {error ? (
        <div className="flex flex-col items-center font-normal justify-center p-8 text-center space-y-5 pt-[100px]">
          <Radio strokeWidth={1} size={50} className="mx-auto mb-5" />
          <div>
            <h3 className="text-lg font-semibold mb-3">
              Could not load Devices use statements
            </h3>
            <p className="text-muted-foreground">Try again later.</p>
          </div>
          <Button
            className="cursor-pointer bg-primary rounded p-2 text-white hover:bg-primary/80 px-4"
            onClick={() => window.location.reload()}
          >
            Retry
          </Button>
        </div>
      ) : !loading && deviceUseStatementsList.length === 0 ? (
        <div className="p-4 items-center justify-center text-center space-y-4 m-auto pt-[100px]">
          <Radio strokeWidth={1} size={50} className="mx-auto mb-5" />
          <p className="text-lg font-bold">
            No device use statements found.
          </p>
          <p>
            There are currently No device use statements found to your health
            record. Devices are added by your healthcare provider and will
            appear here once assigned.
          </p>
          {isAuthorizedToEdit() && (
            <Button className="rounded" onClick={addDeviceUseStatement}>
              <Plus /> Add Device Use Statement
            </Button>
          )}
        </div>
      ) : loading ? (
        <div className="space-y-3 mt-3">
          {[...Array(7)].map((_, index) => (
            <div
              key={index}
              className="flex justify-between gap-3 items-center rounded p-1 animate-pulse"
            >
              <div className="space-y-2 w-3/4 items-center">
                <div className="flex items-center gap-4">
                  <Skeleton className="h-5 w-full rounded"></Skeleton>
                  <Skeleton className="h-5 w-full rounded"></Skeleton>
                </div>
                <Skeleton className="h-5 w-full rounded"></Skeleton>
              </div>
              <Skeleton className="h-12 w-12 rounded-full"></Skeleton>
            </div>
          ))}
        </div>
      ) : (
        deviceUseStatementsList.length !== 0 && (
          <div className="space-y-2 mt-3">
            <RecordPracticeNote view={practiceView} />
            {practiceView.shown.map(
              (deviceUseStatement: DeviceUseStatement) => {
                return (
                  <div
                    className="flex gap-2 justify-between items-center"
                    key={deviceUseStatement.id}
                  >
                    <div
                      className="flex w-full justify-between gap-3 group items-center cursor-pointer rounded p-2 hover:bg-muted focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
                      role="button"
                      tabIndex={0}
                      onClick={() => viewDeviceUseStatement(deviceUseStatement)}
                      onKeyDown={(event: React.KeyboardEvent) => {
                        if (event.key !== 'Enter' && event.key !== ' ') return;
                        event.preventDefault();
                        viewDeviceUseStatement(deviceUseStatement);
                      }}
                    >
                      <div className="flex gap-2 items-center">
                        <Cpu
                          size={40}
                          className="bg-green-soft text-sage-ink p-2 rounded"
                        />
                        <div className="space-y-1">
                          <p className="font-bold flex gap-4 items-center text-lg">
                            {(() => {
                              const refId = deviceUseStatement?.device?.reference?.split("/")[1];
                              const liveDevice = refId ? devicesList.find((d) => d.id === refId) : null;
                              const name = liveDevice
                                ? liveDevice.deviceName?.[0]?.name || liveDevice.id
                                : deviceUseStatement?.device?.display?.split("[")[0].trim();
                              return name ? <span>{name}</span> : "Device name not available";
                            })()}
                            <span className="text-xs bg-green-600 font-normal rounded p-0.5 px-2 text-white capitalize">
                              {deviceUseStatement.status
                                ? deviceUseStatement.status
                                : "Status unknown"}
                            </span>
                          </p>
                          <div className="flex gap-2 items-center text-secondary">
                            <p className="text-sm">
                              {deviceUseStatement?.bodySite?.text
                                ? deviceUseStatement.bodySite.text
                                : "-"}
                            </p>{" "}
                            ·
                            <p className="text-sm flex gap-1 items-center">
                              <Calendar size={14} />{" "}
                              {deviceUseStatement.recordedOn
                                ? formatDateForDisplay(
                                    deviceUseStatement.recordedOn,
                                  )
                                : "-"}
                            </p>
                            <p className="text-sm text-secondary"><SourcePractice resource={deviceUseStatement} /></p>
                          </div>
                        </div>
                      </div>
                      <div className="text-secondary group-hover:text-foreground transition-colors">
                        <ChevronRight size={30} strokeWidth={1} />
                      </div>
                    </div>
                    {isAuthorizedToEdit() && (
                      <div className="flex gap-0">
                        <Button
                        className="p-1 bg-white"
                          onClick={(event: React.MouseEvent) =>
                            editDeviceUseStatement(event, deviceUseStatement)
                          }
                        >
                          <Edit size={16}/>
                        </Button>
                        <Button
                          className="p-1 bg-white text-destructive"
                          title="Archive"
                          onClick={() => confirmArchive(deviceUseStatement)}
                          aria-label="Archive this device statement"
                        >
                          <Trash size={16}/>
                        </Button>
                      </div>
                    )}
                  </div>
                );
              },
            )}
          </div>
        )
      )}

      {selectedDeviceUseStatement && (
        <Sheet
          open={!!selectedDeviceUseStatement}
          onOpenChange={(open) => {
            if (!open) setSelectedDeviceUseStatement(null);
          }}
        >
          <SheetContent className="ak-panel gap-0 sm:max-w-[700px] sm:min-w-[700px]">
            <FhirDeviceUseStatementDisplay
              deviceUseStatement={selectedDeviceUseStatement}
              isOpen={showDisplayModal}
              onClose={() => {
                setShowDisplayModal(false);
                setSelectedDeviceUseStatement(null);
              }}
            />
          </SheetContent>
        </Sheet>
      )}
    </div>
  );
};

export default DeviceUseStatements;