import React, { useState, useEffect, useLayoutEffect, useRef, useCallback } from "react";
import { TextareaControl } from "../ui/textarea-control";
import { CustomSelectControl } from "../ui/custom-select-control";
import { useFormContext, useFieldArray, Controller, useWatch } from "react-hook-form";
import {
  useAuthServiceContext,
  usePatientServiceContext,
  useValueSetServiceContext,
  IValueSet,
} from "../../services";
import { usePhotoUploadService } from "../../services/PhotoUploadService";
import type { SaveTransport } from '../../utils/saveOperation';
import {
  useFhirDevices,
  useFhirDocumentReferences,
  useFhirEncounters,
  useFhirEpisodesOfCare,
  useFhirPractitioners,
  useFhirRelatedPersons,
} from "../../hooks";
import { Button } from "../ui/button";
import { DismissibleAlert } from "../ui/dismissible-alert";
import { InputControl } from '../ui/input-control';
import { DOCUMENT_NEEDS_FILE } from '../../utils/documentNeedsFile';
import { Card, CardContent, CardHeader, CardTitle } from "../ui/card";
import { Plus, Trash2, FileText, Edit } from "lucide-react";
import { FILED_ORIGINAL_FILE_NOTE } from "../../utils/records/filedOriginal";
import { formatFileSize } from "../../utils/formatFileSize";
import { Tabs, TabsList, TabsTrigger, TabsContent } from "../ui/tabs";
import {
  FhirCode,
  FhirCodeableConcept,
  FhirPeriod,
  FhirReference,
  FhirReferenceCollection,
  FhirValueSetSearch,
} from "..";
import { formatFhirHumanName } from "../../utils/fhirHumanName.tsx";

interface FhirDocumentReferenceProps {
  elevated?: boolean;
  disabled?: boolean;
  isRoot: boolean;
  enableInlineActions?: boolean;
  // The practice's own drawer: a title, a description and the files, with nothing clinical.
  practice?: boolean;
  // The container already says "Document Details" (a sheet or modal title), so the form doesn't again.
  titled?: boolean;
  // An outside original filed from Records: its file is kept as received, so nothing here replaces or removes it.
  fileLocked?: boolean;
  // Staff filing: each pick is uploaded under the opening's filing, in its own slot (services/DocumentFilingService.tsx).
  filing?: { upload: (file: File, slotId: string, transport?: Partial<SaveTransport>) => Promise<{ key: string }> };
}

export const FhirDocumentReference: React.FC<FhirDocumentReferenceProps> = ({
  elevated = true,
  disabled = false,
  isRoot = false,
  enableInlineActions = true,
  practice = false,
  titled = false,
  fileLocked = false,
  filing,
}) => {
  const { control, setValue, getValues, formState: { errors } } = useFormContext();
  const { userRole, USER_ROLES } = useAuthServiceContext();
  const { fetchValueSet, valueSetUrls } = useValueSetServiceContext();
  const { patientState } = usePatientServiceContext();
  const { uploadDocument } = usePhotoUploadService();

  const [loading, setLoading] = useState(false);
  const [documentReferenceStatus, setDocumentReferenceStatus] = useState<IValueSet[]>([]);
  const [compositionStatus, setCompositionStatus] = useState<IValueSet[]>([]);
  const [documentClasscodes, setDocumentClasscodes] = useState<IValueSet[]>([]);
  const [documentRelationshipType, setDocumentRelationshipType] = useState<IValueSet[]>([]);
  const [c80Facilitycodes, setC80Facilitycodes] = useState<IValueSet[]>([]);
  const [c80PracticeCodes, setC80PracticeCodes] = useState<IValueSet[]>([]);

  const isPatient = [USER_ROLES.PATIENT, USER_ROLES.RELATED_PERSON].includes(userRole as string);

  const { documentReferencesList } = useFhirDocumentReferences({ isRoot });
  const { encountersList } = useFhirEncounters();
  const { episodesOfCareList } = useFhirEpisodesOfCare();
  const { practitionersList } = useFhirPractitioners();
  const { devicesList: _devicesList } = useFhirDevices();
  const { relatedPersonsList: _relatedPersonsList } = useFhirRelatedPersons();

  const authorFieldArray = useFieldArray({ control, name: "author" });
  const relatesToFieldArray = useFieldArray({ control, name: "relatesTo" });
  // A slot rule has nothing to check once every slot is removed, so the list itself must hold one.
  const contentFieldArray = useFieldArray({
    control,
    name: "content",
    rules: { validate: (content) => (Array.isArray(content) && content.length > 0) || DOCUMENT_NEEDS_FILE },
  });
  const noFileSlot = (errors.content as { root?: { message?: string } } | undefined)?.root?.message;
  const contextEncounterFieldArray = useFieldArray({ control, name: "context.encounter" });

  const fileInputsRef = useRef<(HTMLInputElement | null)[]>([]);
  // A file read outlives the pick that started it. It may land only in the editable opening it was picked in, which
  // ends at the commit that disables or unmounts the form, and only in the same content slot: a reset to another
  // version, or a removed row, replaces that slot in the form at once, before anything renders.
  const openingRef = useRef<object | null>(null);
  useLayoutEffect(() => {
    if (!disabled) openingRef.current = {};
    return () => { openingRef.current = null; };
  }, [disabled]);
  // The newest pick or Remove for a slot is the one that counts, so an older read finishing later never lands over it.
  const slotIntentRef = useRef(new WeakMap<object, number>());
  const nextIntent = (slot: object) => {
    const intent = (slotIntentRef.current.get(slot) ?? 0) + 1;
    slotIntentRef.current.set(slot, intent);
    return intent;
  };
  const contentValues = useWatch({ control, name: "content" }) as any[] | undefined;
  // A content row keeps its slot while it stays in the form; removing it drops the slot, reordering keeps it.
  const slotIdsRef = useRef(new WeakMap<object, string>());
  const slotIdOf = (slot: object) => {
    const known = slotIdsRef.current.get(slot);
    if (known) return known;
    const minted = crypto.randomUUID();
    slotIdsRef.current.set(slot, minted);
    return minted;
  };

  // A document's file is uploaded and scanned like any other, then named by key: for the patient the document is
  // about, or for the practice when it is about nobody. Some browsers leave a Word file's type blank.
  const uploadDocumentFile = useCallback(async (file: File, slotId: string, transport: Partial<SaveTransport>): Promise<{ key: string; contentType: string }> => {
    const name = file.name.toLowerCase();
    const contentType = file.type || (name.endsWith('.docx')
      ? 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
      : name.endsWith('.doc') ? 'application/msword' : name.endsWith('.pdf') ? 'application/pdf' : '');
    const typed = contentType === file.type ? file : new File([file], file.name, { type: contentType });
    const { key } = filing
      ? await filing.upload(typed, slotId, transport)
      : await uploadDocument(typed, isRoot ? undefined : patientState?.id, { transport });
    return { key, contentType };
  }, [filing, isRoot, patientState?.id, uploadDocument]);

  useEffect(() => {
    const loadValueSets = async () => {
      setLoading(true);
      try {
        const [
          documentReferenceStatusValueSet,
          compositionStatusValueSet,
          documentClasscodesValueSet,
          documentRelationshipTypeValueSet,
          c80FacilitycodesValueSet,
          c80PracticeCodesValueSet,
        ] = await Promise.all([
          fetchValueSet(valueSetUrls.documentReferenceStatus),
          fetchValueSet(valueSetUrls.compositionStatus),
          fetchValueSet(valueSetUrls.documentClasscodes),
          fetchValueSet(valueSetUrls.documentRelationshipType),
          fetchValueSet(valueSetUrls.c80Facilitycodes),
          fetchValueSet(valueSetUrls.c80PracticeCodes),
        ]);
        setDocumentReferenceStatus(documentReferenceStatusValueSet);
        setCompositionStatus(compositionStatusValueSet);
        setDocumentClasscodes(documentClasscodesValueSet);
        setDocumentRelationshipType(documentRelationshipTypeValueSet);
        setC80Facilitycodes(c80FacilitycodesValueSet);
        setC80PracticeCodes(c80PracticeCodesValueSet);
      } catch (err) {
        console.error("Error loading value sets:", err);
      } finally {
        setLoading(false);
      }
    };
    loadValueSets();
  }, [fetchValueSet, valueSetUrls]);

  const addRelatesTo = () => {
    relatesToFieldArray.append({ code: "", target: { reference: "", identifier: null } });
  };
  const removeRelatesTo = (index: number) => relatesToFieldArray.remove(index);

  const addContent = () => {
    contentFieldArray.append({ attachment: undefined, format: null });
  };
  const removeContent = (index: number) => contentFieldArray.remove(index);

  return (
    <div className={elevated ? "shadow-none rounded-xl bg-white" : "rounded-xl bg-transparent"}>
      {/* Scoped style: reorder chips below the token input for the Document Type field only */}
      <style>{`
        .fhir-dr-type-field {
          display: flex;
          flex-direction: column;
        }
        .fhir-dr-type-field > * {
          order: 3;
        }
        .fhir-dr-type-field > label {
          order: 1;
        }
        .fhir-dr-type-field > .components-form-token-field {
          order: 2;
        }
      `}</style>
      {!titled && (
        <div className="mb-4">
          <h2 className="text-lg font-semibold">Document Details</h2>
        </div>
      )}
      <div className="space-y-6">
        {practice ? (
          <Controller
            name="title"
            control={control}
            disabled={disabled}
            rules={{ required: "Give the document a title" }}
            render={({ field, fieldState }) => (
              <div>
                <InputControl {...field} value={field.value ?? ""} label="Title *" aria-invalid={!!fieldState.error} />
                {fieldState.error && <p className="ak-field-error">{fieldState.error.message}</p>}
              </div>
            )}
          />
        ) : (
          <>
          {/* Row 1: Status & Document Status */}
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <FhirCode
              label="Status *"
              context="status"
              options={documentReferenceStatus}
              required
              loading={loading}
              disabled={disabled}
            />
            {/* Reviewed is the practice's mark; the server refuses a patient-side document that claims it. */}
            {!isPatient && (
              <FhirCode
                label="Document Status"
                context="docStatus"
                options={compositionStatus}
                loading={loading}
                disabled={disabled}
              />
            )}
          </div>

          {/* Row 2: Document Type & Date/Time Available*/}
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <div className="fhir-dr-type-field">
              <FhirValueSetSearch
                label="Document Type"
                context="type"
                valueSetUrl={valueSetUrls.c80DocTypecodes}
                placeholder="Search for types..."
                multiple={false}
                disabled={disabled}
              />
            </div>
            <div>
              <Controller
                name="date"
                control={control}
                disabled={disabled}
                render={({ field }) => (
                  <InputControl {...field} label="Date/Time Available" type="datetime-local" />
                )}
              />
            </div>
          </div>

          {/* Row 3: Categorization of Document */}
          <FhirCodeableConcept
            label="Categorization of Document"
            context="category"
            options={documentClasscodes}
            multiple
            loading={loading}
            disabled={disabled}
          />

          </>
        )}

        {/* Row 4: Description */}
        <Controller
          name="description"
          control={control}
          disabled={disabled}
          render={({ field }) => (
            <TextareaControl value={field.value} onChange={field.onChange} label="Description" placeholder="Enter the notes" rows={3} disabled={disabled} />
          )}
        />

        <Tabs defaultValue="content">
          <TabsList variant="line">
            <TabsTrigger
              value="content"
              className="data-[state=active]:!text-blue-600 data-[state=active]:after:!bg-blue-600"
            >
              Content
            </TabsTrigger>
            {!practice && (
            <TabsTrigger
              value="authors"
              className="data-[state=active]:!text-blue-600 data-[state=active]:after:!bg-blue-600"
            >
              Authors
            </TabsTrigger>
            )}
          </TabsList>

          <TabsContent value="content">
            <div className="space-y-4">
              {fileLocked && (
                <p className="text-sm text-ink-muted" data-testid="filed-original-file-note">{FILED_ORIGINAL_FILE_NOTE}</p>
              )}
              {contentFieldArray.fields.map((field: any, index) => (
                <Card key={field.id}>
                  <CardHeader className="flex flex-row items-center justify-between">
                    <CardTitle className="text-base">Document {index + 1}</CardTitle>
                    {!fileLocked && (
                    <Button
                      variant="ghost"
                      size="icon"
                      onClick={() => removeContent(index)}
                      aria-label={`Remove content ${index + 1}`}
                      disabled={disabled}
                    >
                      <Trash2 className={`h-4 w-4 ${disabled ? "text-muted-foreground" : "text-destructive"}`} />
                    </Button>
                    )}
                  </CardHeader>
                  <CardContent className="pt-2">
                    {/*
                      * THE DOCUMENT IS THE RECORD. FHIR marks DocumentReference.content 1..1 and the modal
                      * seeds `content: [{}]`, so a reference to a document used to save with no document
                      * attached to it. The dropzone sets the value through `setValue` rather than a
                      * control, so it was never part of the validation graph either - this registers the
                      * attachment itself so the save refuses, and says which document is missing.
                      */}
                    <Controller
                      name={`content.${index}.attachment`}
                      control={control}
                      rules={{ required: true }}
                      render={({ fieldState }) => (
                        <>
                          <p className="text-sm font-medium mb-2">Document file *</p>
                          {fieldState.error && (
                            <DismissibleAlert status="error" className="mb-2">
                              A file is required for Document {index + 1}
                            </DismissibleAlert>
                          )}
                        </>
                      )}/>

                    {/* Hidden file input */}
                    <input
                      type="file"
                      accept="application/pdf,.doc,.docx"
                      className="hidden"
                      disabled={disabled || fileLocked}
                      ref={(el) => { fileInputsRef.current[index] = el; }}
                      onChange={async (e) => {
                        const file = e.target.files?.[0];
                        if (e.target.value) e.target.value = '';
                        if (!file || disabled || fileLocked) return;
                        const opening = openingRef.current;
                        const slot = getValues(`content.${index}`);
                        if (!opening || !slot || typeof slot !== 'object') return;
                        const intent = nextIntent(slot);
                        const live = () => openingRef.current === opening && getValues(`content.${index}`) === slot
                          && slotIntentRef.current.get(slot) === intent;
                        // A pick no longer live sends nothing more: not its filing, its upload link or its bytes.
                        const transport = { admit: () => { if (!live()) throw new Error('This file was replaced or its form closed.'); } };
                        try {
                          const { key, contentType } = await uploadDocumentFile(file, slotIdOf(slot), transport);
                          if (!live()) return;
                          setValue(`content.${index}.attachment`, {
                            contentType,
                            url: key,
                            title: file.name,
                            size: file.size,
                            creation: new Date().toISOString(),
                          }, { shouldDirty: true, shouldValidate: true });
                        } catch (err) {
                          if (!live()) return;
                          console.error('Error processing file:', err);
                        }
                      }}
                    />

                    {!contentValues?.[index]?.attachment && fileLocked ? (
                      // A filed original with no file on record: nothing here may supply one.
                      <p className="text-sm text-ink-muted" data-testid="filed-original-no-file">No file is on record for this original.</p>
                    ) : !contentValues?.[index]?.attachment ? (
                      /* Empty state - choose file */
                      <button
                        type="button"
                        onClick={() => fileInputsRef.current[index]?.click()}
                        disabled={disabled}
                        className="w-full h-24 rounded-lg border-2 border-dashed border-gray-200 bg-gray-50 hover:bg-gray-100 hover:border-blue-300 transition-colors flex flex-col items-center justify-center gap-1 text-gray-400 hover:text-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
                      >
                        <FileText className="h-6 w-6" />
                        <span className="text-xs font-medium">Click to choose file</span>
                        <span className="text-xs">PDF, DOC, DOCX · max 5 MB</span>
                      </button>
                    ) : (
                      /* File selected - preview card */
                      <div className="flex items-center gap-3 rounded-lg border border-gray-200 bg-gray-50 px-4 py-3">
                        <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-md bg-blue-50">
                          <FileText className="h-5 w-5 text-blue-600" />
                        </div>
                        <div className="min-w-0 flex-1">
                          <p className="truncate text-sm font-medium">
                            {contentValues[index].attachment.title}
                          </p>
                          <p className="text-xs text-ink-muted">
                            {contentValues[index].attachment.size
                              ? formatFileSize(contentValues[index].attachment.size)
                              : contentValues[index].attachment.contentType}
                          </p>
                        </div>
                        {!fileLocked && (
                        <div className="flex items-center gap-1">
                          <Button
                            type="button"
                            variant="ghost"
                            size="icon"
                            onClick={() => fileInputsRef.current[index]?.click()}
                            disabled={disabled}
                            title="Replace file"
                          >
                            <Edit className="h-4 w-4 text-gray-500" />
                          </Button>
                          <Button
                            type="button"
                            variant="ghost"
                            size="icon"
                            onClick={() => {
                              const slot = getValues(`content.${index}`);
                              if (slot && typeof slot === 'object') nextIntent(slot);
                              setValue(`content.${index}.attachment`, undefined, { shouldDirty: true, shouldValidate: true });
                            }}
                            disabled={disabled}
                            title="Remove file"
                            aria-label={`Remove the file on document ${index + 1}`}
                          >
                            <Trash2 className={`h-4 w-4 ${disabled ? "text-muted-foreground" : "text-destructive"}`} />
                          </Button>
                        </div>
                        )}
                      </div>
                    )}
                  </CardContent>
                </Card>
              ))}
              {noFileSlot && (
                <DismissibleAlert status="error">{noFileSlot}</DismissibleAlert>
              )}
              {!fileLocked && (
              <Button
                variant="outline"
                onClick={addContent}
                disabled={disabled}
                className="rounded-lg w-full h-12 flex items-center justify-center"
              >
                <Plus className="mr-2 h-5 w-5" /> Add Document
              </Button>
              )}
            </div>
          </TabsContent>

          <TabsContent value="authors">
            <div className="space-y-4">
              {authorFieldArray.fields.map((field, index) => (
                <Card key={field.id}>
                  <CardHeader className="flex flex-row items-center justify-between">
                    <CardTitle className="text-base">Reference {index + 1}</CardTitle>
                    <Button
                      variant="ghost"
                      size="icon"
                      onClick={() => authorFieldArray.remove(index)}
                      aria-label={`Remove author ${index + 1}`}
                      disabled={disabled}
                    >
                      <Trash2 className="h-4 w-4 text-red-500" />
                    </Button>
                  </CardHeader>
                  <CardContent className="space-y-4">
                    {/* Both of these carried an asterisk and enforced nothing, which is worse than no
                        asterisk: it promises a refusal that never comes. The type is now genuinely
                        required, because an author row that does not say what kind of author it is
                        cannot be resolved. The practitioner below keeps no asterisk - that select
                        renders whatever type is chosen, so it cannot be demanded of an Organization
                        or Device author. */}
                    <Controller
                      name={`author.${index}.type`}
                      control={control}
                      rules={{ required: true }}
                      render={({ field }) => (
                        <div className="space-y-2">
                          <CustomSelectControl
                            label={"Reference Type *"}
                            options={[
                              { key: '', name: "" },
                              { key: "Practitioner", name: "Practitioner" },
                              { key: "Organization", name: "Organization" },
                              { key: "Patient", name: "Patient" },
                              { key: "RelatedPerson", name: "Related Person" },
                              { key: "Device", name: "Device" }
                            ]}
                            value={field.value ? { key: field.value, name: field.value } : undefined}
                            onChange={(newValue: any) => field.onChange(newValue.selectedItem.key)}
                            disabled={disabled}
                          />
                        </div>
                      )}
                    />
                    <Controller
                      name={`author.${index}.practitioner`}
                      control={control}
                      render={({ field }) => (
                        <div className="space-y-2">
                          <CustomSelectControl
                            label={"Select Practitioner"}
                            options={
                              [{ key: null, name: '' }, ...practitionersList.map((p: any) => {
                                const pr = p?.practitioner ?? p;
                                const nameEntry = pr?.name?.[0];
                                const displayName =
                                  (nameEntry && formatFhirHumanName(nameEntry, { emptyText: '' })) ||
                                  pr?.id ||
                                  "Unknown";

                                return { key: pr?.id, name: displayName };
                              })]
                            }
                            value={(() => {
                              const sel = practitionersList.find((p:any) => (p?.practitioner ?? p)?.id === field.value);
                              if (!sel) return undefined;
                              const pr = sel?.practitioner ?? sel;
                              const nameEntry = pr?.name?.[0];
                              const displayName =
                                (nameEntry && formatFhirHumanName(nameEntry, { emptyText: '' })) ||
                                pr?.id ||
                                "Unknown";
                              return { key: pr?.id, name: displayName };
                            })()}
                            onChange={(newValue: any) => field.onChange(newValue.selectedItem.key)}
                            disabled={disabled}
                          />
                        </div>
                      )}
                    />
                  </CardContent>
                </Card>
              ))}
              <Button
                variant="outline"
                onClick={() => authorFieldArray.append({})}
                disabled={disabled}
                className="rounded-lg w-full h-12 flex items-center justify-center"
              >
                <Plus className="mr-2 h-5 w-5" /> Add Reference
              </Button>
            </div>
          </TabsContent>
        </Tabs>

        {/* Advanced Sections for non-patients */}
        {!isPatient && !practice && (
          <>
            {/* Related Documents */}
            <div className="space-y-4">
              <h3 className="font-semibold text-lg">Related Documents</h3>
              {relatesToFieldArray.fields.map((field, index) => (
                <Card key={field.id}>
                  <CardHeader className="flex flex-row items-center justify-between">
                    <CardTitle className="text-base">Related Document {index + 1}</CardTitle>
                    <Button
                      variant="ghost"
                      size="icon"
                      onClick={() => removeRelatesTo(index)}
                      aria-label={`Remove related document ${index + 1}`}
                      disabled={disabled}
                    >
                      <Trash2 className="h-4 w-4 text-red-500" />
                    </Button>
                  </CardHeader>
                  <CardContent className="space-y-4">
                    <FhirCode
                      label="Relationship Type"
                      context={`relatesTo.${index}.code`}
                      options={documentRelationshipType}
                      required
                      loading={loading}
                      disabled={disabled}
                    />
                    <FhirReference
                      label="Target of the relationship"
                      context={`relatesTo.${index}.target`}
                      referenceType="DocumentReference"
                      referenceList={documentReferencesList}
                      enableInlineActions={enableInlineActions}
                      required
                      disabled={disabled}
                    />
                  </CardContent>
                </Card>
              ))}
              <Button variant="outline" onClick={addRelatesTo} disabled={disabled} className="rounded-lg">
                <Plus className="mr-2 h-4 w-4" /> Add Related Document
              </Button>
            </div>

            {/* Context */}
            <div className="space-y-4">
              <h3 className="font-semibold text-lg">Context</h3>
              <Card>
                <CardContent className="space-y-4 pt-4">
                  <FhirReferenceCollection
                    label="Encounters"
                    references={contextEncounterFieldArray}
                    context="context.encounter"
                    referenceTypes={[
                      { name: "Encounter", key: "Encounter" },
                      { name: "EpisodeOfCare", key: "EpisodeOfCare" },
                    ]}
                    getReferenceList={(type) => {
                      switch (type) {
                        case "Encounter":
                          return encountersList;
                        case "EpisodeOfCare":
                          return episodesOfCareList;
                        default:
                          return [];
                      }
                    }}
                    required={false}
                    multiple
                    disabled={disabled}
                    enableInlineActions={enableInlineActions}
                  />
                  <FhirValueSetSearch
                    label="Main clinical acts documented"
                    context="context.event"
                    valueSetUrl={valueSetUrls.v3ActCode}
                    placeholder="Search for act codes..."
                    multiple
                    disabled={disabled}
                  />
                  <FhirCodeableConcept
                    label="Kind of facility where patient was seen"
                    context="context.facilityType"
                    options={c80Facilitycodes}
                    loading={loading}
                    disabled={disabled}
                  />
                  <FhirCodeableConcept
                    label="Additional details about where the content was created"
                    context="context.practiceSetting"
                    options={c80PracticeCodes}
                    loading={loading}
                    disabled={disabled}
                  />
                  <FhirPeriod
                    label="Time of service that is being documented"
                    context="context.period"
                    disabled={disabled}
                  />
                </CardContent>
              </Card>
            </div>
          </>
        )}
      </div>
    </div>
  );
};

export default FhirDocumentReference;

// import React, { useState, useEffect } from 'react';
// import { useFormContext, Controller, useFieldArray } from 'react-hook-form';
// import {
// IValueSet,
// useAuthServiceContext,
// usePatientServiceContext,
// useValueSetServiceContext
// } from '../../services';
// import {
// FhirAttachment,
// FhirCode,
// FhirCodeableConcept,
// FhirPeriod,
// FhirReference,
// FhirReferenceCollection,
// FhirValueSetSearch
// } from '../../components';
// import {
// useFhirDevices,
// useFhirDocumentReferenceBroadcast,
// useFhirDocumentReferences,
// useFhirEncounters,
// useFhirEpisodesOfCare,
// useFhirPractitioners,
// useFhirRelatedPersons
// } from '../../hooks';
// import { FhirResource } from 'fhir/r4';

// interface FhirDocumentReferenceProps {
// elevated?: boolean;
// disabled?: boolean;
// isRoot: boolean;
// enableInlineActions?: boolean;
// }

// export const FhirDocumentReference: React.FC<FhirDocumentReferenceProps> = ({ elevated = true, disabled = false, isRoot = false, enableInlineActions = true }) => {
// const { control } = useFormContext();
// const { userRole, USER_ROLES } = useAuthServiceContext();
// const { patientState } = usePatientServiceContext();
// const { fetchValueSet, valueSetUrls } = useValueSetServiceContext();

// const [loading, setLoading] = useState(false);

// // value sets
// const [documentReferenceStatus, setDocumentReferenceStatus] = useState<IValueSet[]>([]);
// const [compositionStatus, setCompositionStatus] = useState<IValueSet[]>([]);
// const [documentClasscodes, setDocumentClasscodes] = useState<IValueSet[]>([]);
// const [documentRelationshipType, setDocumentRelationshipType] = useState<IValueSet[]>([]);
// const [securityLabels, setSecurityLabels] = useState<IValueSet[]>([]);
// // const [formatcodes, setFormatcodes] = useState<IValueSet[]>([]);
// const [c80Facilitycodes, setC80Facilitycodes] = useState<IValueSet[]>([]);
// const [c80PracticeCodes, setC80PracticeCodes] = useState<IValueSet[]>([]);

// const isPatient = [USER_ROLES.PATIENT, USER_ROLES.RELATED_PERSON].includes(userRole as string);
// const spacerMargin = '24px';

// useFhirDocumentReferenceBroadcast({ isRoot: isRoot });
// const { documentReferencesList } = useFhirDocumentReferences({ isRoot: isRoot });
// const { encountersList } = useFhirEncounters();
// const { episodesOfCareList } = useFhirEpisodesOfCare();
// const { practitionersList } = useFhirPractitioners();
// const { devicesList } = useFhirDevices();
// const { relatedPersonsList } = useFhirRelatedPersons();

// const authorFieldArray = useFieldArray({ control, name: 'author' });
// const relatesToFieldArray = useFieldArray({ control, name: 'relatesTo' });
// const contentFieldArray = useFieldArray({ control, name: 'content' });
// const contextEncounterFieldArray = useFieldArray({ control, name: 'context.encounter' });

// useEffect(() => {
// const loadValueSets = async () => {
// setLoading(true);
// try {
// const [
// documentReferenceStatusValueSet,
// compositionStatusValueSet,
// documentClasscodesValueSet,
// documentRelationshipTypeValueSet,
// securityLabelsValueSet,
// // formatcodesValueSet,
// c80FacilitycodesValueSet,
// c80PracticeCodesValueSet
// ] = await Promise.all([
// fetchValueSet(valueSetUrls.documentReferenceStatus),
// fetchValueSet(valueSetUrls.compositionStatus),
// fetchValueSet(valueSetUrls.documentClasscodes),
// fetchValueSet(valueSetUrls.documentRelationshipType),
// fetchValueSet(valueSetUrls.securityLabels),
// // fetchValueSet(valueSetUrls.formatcodes),
// fetchValueSet(valueSetUrls.c80Facilitycodes),
// fetchValueSet(valueSetUrls.c80PracticeCodes)
// ]);

// setDocumentReferenceStatus(documentReferenceStatusValueSet);
// setCompositionStatus(compositionStatusValueSet);
// setDocumentClasscodes(documentClasscodesValueSet);
// setDocumentRelationshipType(documentRelationshipTypeValueSet);
// setSecurityLabels(securityLabelsValueSet);
// // setFormatcodes(formatcodesValueSet);
// setC80Facilitycodes(c80FacilitycodesValueSet);
// setC80PracticeCodes(c80PracticeCodesValueSet);
// } catch (err) {
// console.error('Error loading value sets:', err);
// } finally {
// setLoading(false);
// }
// };

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

// const addRelatesTo = () => {
// relatesToFieldArray.append({
// code: '',
// target: {
// reference: '',
// identifier: null
// }
// });
// };

// const removeRelatesTo = (index: number) => {
// relatesToFieldArray.remove(index);
// };

// const addContent = () => {
// contentFieldArray.append({
// attachment: null,
// format: null
// });
// };

// const removeContent = (index: number) => {
// contentFieldArray.remove(index);
// };

// return (
// <Card style={elevated ? { boxShadow: 'none' }: {}}>
// {elevated && <Elevation value={5}/>}
// <CardHeader>
// <Heading level={5}>Document Details</Heading>
// </CardHeader>
// <CardBody>
// <Spacer margin={spacerMargin}/>

// {/* status */}
// <FhirCode label="Status"
// context="status"
// options={documentReferenceStatus}
// required={true}
// loading={loading}
// disabled={disabled}/>

// <Spacer margin={spacerMargin}/>

// {/* docStatus */}
// <FhirCode label="Document Status"
// context="docStatus"
// options={compositionStatus}
// loading={loading}
// disabled={disabled}/>

// <Spacer margin={spacerMargin}/>

// {/* type */}
// <FhirValueSetSearch label="Document Type"
// context="type"
// valueSetUrl={valueSetUrls.c80DocTypecodes}
// placeholder="Search for types..."
// multiple={false}
// disabled={disabled}/>

// <Spacer margin={spacerMargin}/>

// {/* category */}
// <FhirCodeableConcept label="Categorization of document"
// context="category"
// options={documentClasscodes}
// multiple={true}
// loading={loading}
// disabled={disabled}/>

// <Spacer margin={spacerMargin}/>

// {/* date */}
// <Controller key="date"
// name="date"
// control={control}
// disabled={disabled}
// render={({ field }) => (
// <InputControl
// {...field}
// label="When this document reference was created"
// type="datetime-local"/>
// )}/>

// <Spacer margin={spacerMargin}/>

// {/* description */}
// <Controller key="description"
// name="description"
// control={control}
// disabled={disabled}
// render={({ field }) => (
// <TextareaControl
// value={field.value}
// onChange={field.onChange}
// label="Description"
// placeholder="Human-readable description"
// rows={3}/>
// )}/>

// <Spacer margin={spacerMargin}/>

// {!isPatient && (
// <>
// {/* securityLabel */}
// <FhirCodeableConcept label="Document security-tags"
// context="securityLabel"
// options={securityLabels}
// multiple={true}
// loading={loading}
// disabled={disabled}/>

// <Spacer margin={spacerMargin}/>
// </>
// )}
// </CardBody>
// <CardDivider/>
// <CardBody>
// <TabPanel initialTabName="content"
// tabs={[
// { name: 'content', title: 'Content' },
// { name: 'authors', title: 'Authors', disabled: !patientState },
// { name: 'relatesTo', title: 'Related Documents', disabled: isPatient },
// { name: 'context', title: 'Context', disabled: isPatient }
// ]}>
// {(tab) => {
// // content
// if (tab.name === 'content') {
// return (
// <div style={{ paddingTop: '16px' }}>
// <Spacer margin={spacerMargin}/>

// {contentFieldArray.fields.map((content, index) => (
// <Card key={content.id} style={{ marginBottom: '16px' }}>
// <CardHeader>
// <Flex align="center" justify="space-between">
// <FlexItem>
// <h5>Content {index + 1}</h5>
// </FlexItem>
// <FlexItem>
// <Button label="Remove content"
// icon={trash}
// onClick={() => removeContent(index)}
// disabled={disabled}
// isDestructive
// showTooltip/>
// </FlexItem>
// </Flex>
// </CardHeader>
// <CardBody>
// {/* content.attachment */}
// <FhirAttachment label="Document Attachment"
// context={`content.${index}.attachment`}
// acceptedTypes="application/pdf,.doc,.docx"
// maxSize={5 * 1024 * 1024} // 5MB
// required={true}/>

// <Spacer margin={spacerMargin}/>

// {/* content.format */}
// {/*<FhirCodeableConcept label="Format"*/}
// {/* context={`content.${index}.format`}*/}
// {/* options={formatcodes}*/}
// {/* disabled={submitting}/>*/}

// {/*<Spacer margin={spacerMargin}/>*/}
// </CardBody>
// </Card>
// ))}

// <Button variant="secondary"
// icon={plusCircle}
// onClick={addContent}
// disabled={disabled}>
// Add Content
// </Button>
// </div>
// );
// }

// // authors
// if (tab.name === 'authors') {
// return (
// <div style={{ paddingTop: '16px' }}>
// <Spacer margin={spacerMargin}/>

// {/* Authors */}
// <FhirReferenceCollection label="Who and/or what authored the document"
// references={authorFieldArray}
// context="author"
// referenceTypes={[
// { name: 'Practitioner', key: 'Practitioner' },
// // { name: 'Organization', key: 'Organization' },
// { name: 'Device', key: 'Device' },
// { name: 'Patient', key: 'Patient' },
// { name: 'RelatedPerson', key: 'RelatedPerson' }
// ]}
// getReferenceList={(referenceType: string): FhirResource[] => {
// switch (referenceType) {
// case 'Practitioner':
// return practitionersList.map(p => p.practitioner);
// case 'Device':
// return devicesList;
// case 'RelatedPerson':
// return relatedPersonsList;
// default:
// return [];
// }
// }}
// required={false}
// multiple={true}
// disabled={disabled}
// enableInlineActions={enableInlineActions}/>

// <Spacer margin={spacerMargin}/>

// {/* authenticator */}
// {/*<FhirReferenceCollection label="Authenticator"*/}
// {/* references={{ fields: [], append: () => {}, remove: () => {} }}*/}
// {/* context="authenticator"*/}
// {/* referenceTypes={[*/}
// {/* { name: 'Practitioner', key: 'Practitioner' },*/}
// {/* { name: 'Organization', key: 'Organization' }*/}
// {/* ]}*/}
// {/* getReferenceList={(referenceType: string): FhirResource[] => {*/}
// {/* switch (referenceType) {*/}
// {/* case 'Practitioner':*/}
// {/* return practitionersList;*/}
// {/* case 'Organization':*/}
// {/* return organizationsList;*/}
// {/* default:*/}
// {/* return [];*/}
// {/* }*/}
// {/* }}*/}
// {/* required={false}*/}
// {/* multiple={false}*/}
// {/* disabled={submitting}*/}
// {/* enableInlineCreation={false}*/}
// {/* onInlineCreate={(referenceType) => {*/}
// {/* console.log(`Create new ${referenceType}`);*/}
// {/* }}/>*/}

// {/*<Spacer margin={spacerMargin}/>*/}

// {/* custodian */}
// {/*<FhirReferenceCollection label="Custodian"*/}
// {/* references={{ fields: [], append: () => {}, remove: () => {} }}*/}
// {/* context="custodian"*/}
// {/* referenceTypes={[*/}
// {/* { name: 'Organization', key: 'Organization' }*/}
// {/* ]}*/}
// {/* getReferenceList={(referenceType: string): FhirResource[] => {*/}
// {/* switch (referenceType) {*/}
// {/* case 'Organization':*/}
// {/* return organizationsList;*/}
// {/* default:*/}
// {/* return [];*/}
// {/* }*/}
// {/* }}*/}
// {/* required={false}*/}
// {/* multiple={false}*/}
// {/* disabled={submitting}*/}
// {/* enableInlineCreation={false}*/}
// {/* onInlineCreate={(referenceType) => {*/}
// {/* console.log(`Create new ${referenceType}`);*/}
// {/* }}/>*/}
// </div>
// );
// }

// // relatesTo
// if (tab.name === 'relatesTo') {
// return (
// <Disabled isDisabled={isPatient}>
// <div style={{ paddingTop: '16px' }}>
// <Spacer margin={spacerMargin}/>

// {relatesToFieldArray.fields.map((relatesTo, index) => (
// <Card key={relatesTo.id} style={{ marginBottom: '16px' }}>
// <CardHeader>
// <Flex align="center" justify="space-between">
// <FlexItem>
// <h5>Related Document {index + 1}</h5>
// </FlexItem>
// <FlexItem>
// {!isPatient && (
// <Button label="Remove related document"
// icon={trash}
// onClick={() => removeRelatesTo(index)}
// disabled={disabled}
// isDestructive
// showTooltip/>
// )}
// </FlexItem>
// </Flex>
// </CardHeader>
// <CardBody>
// {/* relatesTo.code */}
// <FhirCode label="Relationship Type"
// context={`relatesTo.${index}.code`}
// options={documentRelationshipType}
// required={true}
// loading={loading}
// disabled={disabled}/>

// <Spacer margin={spacerMargin}/>

// {/* relatesTo.target */}
// <FhirReference label="Target of the relationship"
// context={`relatesTo.${index}.target`}
// referenceType="DocumentReference"
// referenceList={documentReferencesList}
// enableInlineActions={enableInlineActions}
// required={true}
// disabled={disabled}/>

// <Spacer margin={spacerMargin}/>
// </CardBody>
// </Card>
// ))}

// {!isPatient && (
// <Button variant="secondary"
// icon={plusCircle}
// onClick={addRelatesTo}
// disabled={disabled}>
// Add Related Document
// </Button>
// )}
// </div>
// </Disabled>
// );
// }

// // context
// if (tab.name === 'context') {
// return (
// <Disabled isDisabled={isPatient}>
// <div style={{ paddingTop: '16px' }}>
// <Spacer margin={spacerMargin}/>

// {/* context.encounter */}
// <FhirReferenceCollection label="Encounters"
// references={contextEncounterFieldArray}
// context="context.encounter"
// referenceTypes={[
// { name: 'Encounter', key: 'Encounter' },
// { name: 'EpisodeOfCare', key: 'EpisodeOfCare' }
// ]}
// getReferenceList={(referenceType: string): FhirResource[] => {
// switch (referenceType) {
// case 'Encounter':
// return encountersList;
// case 'EpisodeOfCare':
// return episodesOfCareList;
// default:
// return [];
// }
// }}
// required={false}
// multiple={true}
// disabled={disabled}
// readonly={isPatient}
// enableInlineActions={enableInlineActions}/>

// <Spacer margin={spacerMargin}/>

// {/* context.event */}
// <FhirValueSetSearch label="Main clinical acts documented"
// context="context.event"
// valueSetUrl={valueSetUrls.v3ActCode}
// placeholder="Search for act codes..."
// multiple={true}
// disabled={disabled}/>

// <Spacer margin={spacerMargin}/>

// {/* context.facilityType */}
// <FhirCodeableConcept label="Kind of facility where patient was seen"
// context="context.facilityType"
// options={c80Facilitycodes}
// loading={loading}
// disabled={disabled}/>

// <Spacer margin={spacerMargin}/>

// {/* context.practiceSetting */}
// <FhirCodeableConcept label="Additional details about where the content was created (e.g. clinical specialty)"
// context="context.practiceSetting"
// options={c80PracticeCodes}
// loading={loading}
// disabled={disabled}/>

// <Spacer margin={spacerMargin}/>

// {/* context.period */}
// <FhirPeriod label="Time of service that is being documented"
// context="context.period"
// disabled={disabled}
// readonly={isPatient}/>

// <Spacer margin={spacerMargin}/>
// </div>
// </Disabled>
// );
// }
// }}
// </TabPanel>
// </CardBody>
// </Card>
// );
// };

// export default FhirDocumentReference;