import React from "react";
import { DeviceUseStatement } from "fhir/r4";
import { SheetDescription, 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 { RecordEditedMarker } from "../FieldHistory/RecordEditedMarker";
import { Field } from "../FieldHistory/Field";
import { FieldGroup } from "../FieldHistory/FieldLayout";
import { StatusBadge } from "../ui/status";

interface FhirDeviceUseStatementDisplayProps {
  deviceUseStatement: DeviceUseStatement;
  isOpen: boolean;
  onClose: () => void;
  title?: string;
  readOnly?: boolean;
}

export const FhirDeviceUseStatementDisplay: React.FC<
  FhirDeviceUseStatementDisplayProps
> = ({ deviceUseStatement, 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} />
  );

  // timing[x] is polymorphic: a Timing, a Period, or a plain dateTime.
  const renderTimingValue = (): React.ReactNode => {
    if (deviceUseStatement.timingTiming) {
      return <FhirTimingDisplay timing={deviceUseStatement.timingTiming} />;
    }
    if (deviceUseStatement.timingPeriod) {
      return <FhirPeriodDisplay period={deviceUseStatement.timingPeriod} />;
    }
    if (deviceUseStatement.timingDateTime) {
      return formatDateForDisplay(deviceUseStatement.timingDateTime);
    }
    return undefined;
  };

  return (
    <FieldHistoryProvider>
      <FieldHistoryScope
        resourceType="DeviceUseStatement"
        id={deviceUseStatement.id}
      >
        <div className="flex min-h-0 flex-1 flex-col">
          <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 Use Statement Details"}
              </span>
              <RecordEditedMarker resource={deviceUseStatement} />
            </div>
            <ShowFieldHistoryToggle />
          </SheetHeader>
          <SheetDescription className="ak-overlay__body space-y-3 overflow-y-auto thin-scrollbar max-h-[calc(100vh-100px)] md:max-h-[calc(100vh-6px)] lg:max-h-[calc(100vh-60px)] py-1">
            <div className="space-y-1">
              <p className="font-bold text-lg">
                {deviceUseStatement?.device?.display
                  ? deviceUseStatement.device.display.split("[")[0].trim()
                  : "Device name not available"}
              </p>
            </div>
            <Tabs defaultValue="overview">
              <TabsList 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="additionalInformation"
                >
                  Additional Information
                </TabsTrigger>
              </TabsList>
              <TabsContent value="overview" className="space-y-4">
                <FieldGroup>
                  <Field
                    label="Status"
                    value={renderStatusPill(deviceUseStatement.status)}
                    path="status"
                  />
                  <Field
                    label="Target Body Site"
                    value={
                      <FhirCodeableConceptDisplay
                        code={deviceUseStatement.bodySite}
                      />
                    }
                    path="bodySite.coding[0].display"
                  />
                  <Field
                    label="When Recorded"
                    value={
                      deviceUseStatement.recordedOn
                        ? formatDateForDisplay(deviceUseStatement.recordedOn)
                        : undefined
                    }
                    path="recordedOn"
                  />
                  <Field label="Timing" value={renderTimingValue()} />
                  <Field
                    label="Subject"
                    value={
                      <FhirReferenceDisplay
                        references={deviceUseStatement.subject}
                      />
                    }
                  />
                  <Field
                    label="Source"
                    value={
                      <FhirReferenceDisplay
                        references={deviceUseStatement.source}
                      />
                    }
                  />
                  <Field
                    label="Device"
                    value={
                      <FhirReferenceDisplay
                        references={deviceUseStatement.device}
                      />
                    }
                  />
                </FieldGroup>
              </TabsContent>
              <TabsContent
                value="additionalInformation"
                className="space-y-4"
              >
                <FieldGroup>
                  <Field
                    label="Why Device Was Used"
                    value={
                      <FhirCodeableConceptDisplay
                        code={deviceUseStatement.reasonCode}
                        multiple={true}
                      />
                    }
                  />
                  <Field
                    label="Reason Reference"
                    value={
                      <FhirReferenceDisplay
                        references={deviceUseStatement.reasonReference}
                      />
                    }
                  />
                  <Field
                    label="Derived From"
                    value={
                      <FhirReferenceDisplay
                        references={deviceUseStatement.derivedFrom}
                      />
                    }
                  />
                  <Field
                    label="Based On"
                    value={
                      <FhirReferenceDisplay
                        references={deviceUseStatement.basedOn}
                      />
                    }
                  />
                  <Field
                    label="Notes"
                    value={
                      <FhirAnnotationDisplay
                        annotation={deviceUseStatement.note}
                        multiple={true}
                      />
                    }
                  />
                </FieldGroup>
              </TabsContent>
            </Tabs>
          </SheetDescription>
        </div>
      </FieldHistoryScope>
    </FieldHistoryProvider>
  );
};

export default FhirDeviceUseStatementDisplay;