import React from "react";
import { DeviceRequest } from "fhir/r4";
import { SheetBody, SheetHeader } from "../ui/sheet";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs";
import { formatDateForDisplay } from "../../lib/utils";
import { FhirCodeableConceptDisplay } from "../../utils/fhirCodeableConcept";
import { FhirReferenceDisplay } from "../../utils/fhirReference";
import { FhirPeriodDisplay } from "../../utils/fhirPeriod";
import { FhirAnnotationDisplay } from "../../utils/fhirAnnotation";
import { FhirTimingDisplay } from "../../utils/fhirTiming";
import {
  FieldHistoryProvider,
  FieldHistoryScope,
} from "../FieldHistory/FieldHistoryProvider";
import { ShowFieldHistoryToggle } from "../FieldHistory/ShowFieldHistoryToggle";
import { PrintRecord } from "../ui/print-record";
import { RecordEditedMarker } from "../FieldHistory/RecordEditedMarker";
import { Field } from "../FieldHistory/Field";
import { FieldGroup } from "../FieldHistory/FieldLayout";
import { StatusBadge } from "../ui/status";

interface FhirDeviceRequestDisplayProps {
  deviceRequest: DeviceRequest;
  isOpen: boolean;
  onClose: () => void;
  title?: string;
}

export const FhirDeviceRequestDisplay: React.FC<
  FhirDeviceRequestDisplayProps
> = ({ deviceRequest, isOpen, title }) => {
  if (!isOpen) return null;

  // / D5 - was a hand-rolled pill: a local STATUS_STYLES record of hardcoded hex pairs
  // applied as an INLINE STYLE, with the raw FHIR code as the text. Colour-only, non-token, and one
  // of twelve near-identical copies. <StatusBadge> carries the shared word plus D5's colour AND shape.
  const renderStatusPill = (status: string | undefined): React.ReactNode => (
    <StatusBadge status={status} />
  );

  // occurrence[x] is polymorphic: a plain dateTime, a Period, or a Timing.
  const renderOccurrenceValue = (): React.ReactNode => {
    if (deviceRequest.occurrenceDateTime) {
      return formatDateForDisplay(deviceRequest.occurrenceDateTime);
    }
    if (deviceRequest.occurrencePeriod) {
      return <FhirPeriodDisplay period={deviceRequest.occurrencePeriod} />;
    }
    if (deviceRequest.occurrenceTiming) {
      return <FhirTimingDisplay timing={deviceRequest.occurrenceTiming} />;
    }
    return undefined;
  };

  // code[x] is polymorphic: a CodeableConcept or a Reference to the device.
  const renderDeviceRequestedName = (): string => {
    const codeableConcept = deviceRequest.codeCodeableConcept;
    if (codeableConcept) {
      const text =
        codeableConcept.text || codeableConcept.coding?.[0]?.display;
      return text ? text.split("[")[0].trim() : "Device name not available";
    }
    if (deviceRequest.codeReference?.display) {
      return deviceRequest.codeReference.display.split("[")[0].trim();
    }
    return "Device name not available";
  };

  return (
    <FieldHistoryProvider>
      <FieldHistoryScope resourceType="DeviceRequest" id={deviceRequest.id}>
        <div className="flex min-h-0 flex-1 flex-col" data-print-region="true">
          <SheetHeader className="ak-overlay__header flex-row items-center justify-between gap-4">
            <div className="flex items-center gap-2">
              <span className="text-secondary">
                {title || "Device Request Details"}
              </span>
              <RecordEditedMarker resource={deviceRequest} />
            </div>
            <ShowFieldHistoryToggle />
            <PrintRecord/>
          </SheetHeader>
          <SheetBody className="ak-overlay__body space-y-3 overflow-y-auto thin-scrollbar max-h-[calc(100vh-100px)] md:max-h-[calc(100vh-60px)] lg:max-h-[calc(100vh-60px)] py-1">
            <div className="space-y-1">
              <p className="font-bold text-lg">
                {renderDeviceRequestedName()}
              </p>
            </div>
            <Tabs defaultValue="overview">
              <TabsList data-print-hidden="true" variant="line" className="mb-3">
                <TabsTrigger
                  className="data-[state=active]:bg-surface data-[state=active]:border-b-[2px] data-[state=active]:border-b-primary rounded-none data-[state=active]:text-primary data-[state=active]:font-bold"
                  value="overview"
                >
                  Overview
                </TabsTrigger>
                <TabsTrigger
                  className="data-[state=active]:bg-surface data-[state=active]:border-b-[2px] data-[state=active]:border-b-primary rounded-none data-[state=active]:text-primary data-[state=active]:font-bold"
                  value="clinical&administrativedetails"
                >
                  Clinical & Administrative Details
                </TabsTrigger>
              </TabsList>
              <TabsContent forceMount value="overview" className="space-y-4">
                <FieldGroup>
                  <Field
                    label="Status"
                    value={renderStatusPill(deviceRequest.status)}
                    path="status"
                  />
                  <Field
                    label="Intent"
                    value={
                      deviceRequest.intent ? (
                        <span className="capitalize">
                          {deviceRequest.intent}
                        </span>
                      ) : undefined
                    }
                    path="intent"
                  />
                  <Field
                    label="Priority"
                    value={
                      deviceRequest.priority ? (
                        <span className="capitalize">
                          {deviceRequest.priority}
                        </span>
                      ) : undefined
                    }
                    path="priority"
                  />
                  <Field
                    label="Who/what is requesting device"
                    value={
                      <FhirReferenceDisplay
                        references={deviceRequest.requester}
                      />
                    }
                  />
                  <Field
                    label="When recorded"
                    value={
                      deviceRequest.authoredOn
                        ? formatDateForDisplay(deviceRequest.authoredOn)
                        : undefined
                    }
                    path="authoredOn"
                  />
                  <Field
                    label="Desired time/schedule for use"
                    value={renderOccurrenceValue()}
                  />
                </FieldGroup>
              </TabsContent>
              <TabsContent forceMount
                value="clinical&administrativedetails"
                className="space-y-4"
              >
                <div className="space-y-2">
                  <p className="text-sm font-bold">
                    Clinical Context
                  </p>
                  <FieldGroup>
                    <Field
                      label="Subject"
                      value={
                        <FhirReferenceDisplay
                          references={deviceRequest.subject}
                        />
                      }
                    />
                    <Field
                      label="Encounter motivating request"
                      value={
                        <FhirReferenceDisplay
                          references={deviceRequest.encounter}
                        />
                      }
                    />
                    <Field
                      label="Reason for request"
                      value={
                        <FhirCodeableConceptDisplay
                          code={deviceRequest.reasonCode}
                          multiple={true}
                        />
                      }
                    />
                    <Field
                      label="Linked Reason for request"
                      value={
                        <FhirReferenceDisplay
                          references={deviceRequest.reasonReference}
                        />
                      }
                    />
                    <Field
                      label="Additional clinical information"
                      value={
                        <FhirReferenceDisplay
                          references={deviceRequest.supportingInfo}
                        />
                      }
                    />
                  </FieldGroup>
                </div>
                <div className="space-y-2">
                  <p className="text-sm font-bold">
                    Fulfillment & Performer
                  </p>
                  <FieldGroup>
                    <Field
                      label="Filler role"
                      value={
                        <FhirCodeableConceptDisplay
                          code={deviceRequest.performerType}
                        />
                      }
                      path="performerType.coding[0].display"
                    />
                    <Field
                      label="Requested Filler"
                      value={
                        <FhirReferenceDisplay
                          references={deviceRequest.performer}
                        />
                      }
                    />
                    <Field
                      label="What request fulfills"
                      value={
                        <FhirReferenceDisplay
                          references={deviceRequest.basedOn}
                        />
                      }
                    />
                    <Field
                      label="Identifier of composite request"
                      value={deviceRequest.groupIdentifier?.value}
                    />
                    <Field
                      label="Insurance"
                      value={
                        <FhirReferenceDisplay
                          references={deviceRequest.insurance}
                        />
                      }
                    />
                    <Field
                      label="Prior Request"
                      value={
                        <FhirReferenceDisplay
                          references={deviceRequest.priorRequest}
                        />
                      }
                    />
                  </FieldGroup>
                </div>
                <div className="space-y-2">
                  <p className="text-sm font-bold">Notes</p>
                  <FieldGroup>
                    <Field
                      label="Additional Notes"
                      value={
                        <FhirAnnotationDisplay
                          annotation={deviceRequest.note}
                          multiple={true}
                        />
                      }
                    />
                  </FieldGroup>
                </div>
              </TabsContent>
            </Tabs>
          </SheetBody>
        </div>
      </FieldHistoryScope>
    </FieldHistoryProvider>
  );
};

export default FhirDeviceRequestDisplay;