import React from "react";
import { CodeableConcept, Observation, ObservationReferenceRange } from "fhir/r4";
import { FhirReferenceDisplay } from "../../utils/fhirReference";
import { FhirAnnotationDisplay } from "../../utils/fhirAnnotation";
import { FhirPeriodDisplay } from "../../utils/fhirPeriod";
import { FhirQuantityDisplay } from "../../utils/fhirQuantity";
import { FhirRangeDisplay } from "../../utils/fhirRange";
import { FhirRatioDisplay } from "../../utils/fhirRatio";
import { formatDateTime } from "../../utils/dateUtils";
import { Card, CardContent, CardHeader } from "../ui/card";
import { Calendar, UserRoundPlus } from "lucide-react";
import { SheetDescription, SheetHeader, SheetTitle } from "../ui/sheet";
import { formatDateForDisplay, formatTimeForDisplay } from "../../lib/utils";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs";
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 { SourcePractice } from "../ui/source-practice";
import { SELF_REPORTED_SOURCE_LABEL, SELF_REPORTED_SOURCE_WORDS, selfReportedSourceOf } from "../../utils/selfReportedSource";
import { StatusBadge } from "../ui/status";
import { ObservationResultPanel, isLaboratoryResult, resultName } from "./ObservationResultPanel";
import { bloodPressureReading, componentReadings } from "../../utils/observationPanelValue";
import { namedPerformers } from "../../utils/observationPerformer";

// A coded flag such as High often has no text; its coding's display is the words to show.
const conceptText = (concept: CodeableConcept): string =>
  concept.text || (concept.coding ?? []).map((coding) => coding.display || coding.code).filter(Boolean).join(", ");

// Text, else the coding displays or codes; a dash only when nothing was recorded.
const conceptWords = (concept?: CodeableConcept): string => (concept && conceptText(concept)) || "-";

const rangeText = (range: ObservationReferenceRange): string => {
  if (range.text) return range.text;
  const unit = range.high?.unit ?? range.low?.unit ?? "";
  const { low, high } = { low: range.low?.value, high: range.high?.value };
  const span = low !== undefined && high !== undefined ? `${low}–${high}` : low !== undefined ? `${low} or above` : high !== undefined ? `up to ${high}` : "";
  return span ? `${span}${unit ? ` ${unit}` : ""}` : "";
};

interface FhirObservationDisplayProps {
  observation: Observation;
  isOpen: boolean;
  onClose: () => void;
  title?: string;
  headerAction?: React.ReactNode;
  // The patient's other observations, so a lab result can show its own trend.
  history?: Observation[];
  // A staff reader: show the patient's own answer about where a reported reading came from.
  showReportedSource?: boolean;
}

export const FhirObservationDisplay: React.FC<FhirObservationDisplayProps> = ({
  observation,
  isOpen,
  headerAction,
  history,
  showReportedSource = false,
}) => {
  // A closed detail, or one with no reading (a host mounts it while closing, or with another record selected), draws
  // nothing and asks nothing of the reading: nothing below may read a reading that is not there.
  if (!isOpen || !observation) return null;
  const reportedSource = showReportedSource ? selfReportedSourceOf(observation) : undefined;
  // A blood pressure reads from its two halves; a panel-level number stored beside them is shown apart.
  const pressure = bloodPressureReading(observation);
  const renderValue = () => {
    if (pressure) return pressure;
    if (observation.valueQuantity) {
      return <FhirQuantityDisplay quantity={observation.valueQuantity} />;
    }
    if (observation.valueCodeableConcept) {
      return (
        conceptWords(observation.valueCodeableConcept)
      );
    }
    if (observation.valueString) {
      return observation.valueString;
    }
    if (observation.valueBoolean !== undefined) {
      return observation.valueBoolean ? "Yes" : "No";
    }
    if (observation.valueInteger !== undefined) {
      return observation.valueInteger.toString();
    }
    if (observation.valueRange) {
      return <FhirRangeDisplay range={observation.valueRange} />;
    }
    if (observation.valueRatio) {
      return <FhirRatioDisplay ratio={observation.valueRatio} />;
    }
    if (observation.valueTime) {
      return observation.valueTime;
    }
    if (observation.valueDateTime) {
      return formatDateTime(observation.valueDateTime);
    }
    if (observation.valuePeriod) {
      return <FhirPeriodDisplay period={observation.valuePeriod} />;
    }
    return undefined; // let <Field> render the canonical em-dash
  };

  const renderComponentValue = (component: any) => {
    if (component.valueQuantity) {
      return <FhirQuantityDisplay quantity={component.valueQuantity} />;
    }
    if (component.valueCodeableConcept) {
      return (
        conceptWords(component.valueCodeableConcept)
      );
    }
    if (component.valueString) {
      return component.valueString;
    }
    if (component.valueBoolean !== undefined) {
      return component.valueBoolean ? "Yes" : "No";
    }
    if (component.valueInteger !== undefined) {
      return component.valueInteger.toString();
    }
    if (component.valueRange) {
      return <FhirRangeDisplay range={component.valueRange} />;
    }
    if (component.valueRatio) {
      return <FhirRatioDisplay ratio={component.valueRatio} />;
    }
    if (component.valueTime) {
      return component.valueTime;
    }
    if (component.valueDateTime) {
      return formatDateTime(component.valueDateTime);
    }
    if (component.valuePeriod) {
      return <FhirPeriodDisplay period={component.valuePeriod} />;
    }
    return undefined; // let <Field> render the canonical em-dash
  };


  const getObservationProfile = () => {
    if (observation.category && observation.category.length > 0) {
      const category = observation.category[0];
      if (category.coding && category.coding.length > 0) {
        const code = category.coding[0].code;
        if (code === "vital-signs") {
          return "Vital Signs";
        }
        if (code === "laboratory") {
          return "Laboratory";
        }
        if (code === "social-history") {
          return "Social History";
        }
        if (code === "screening") {
          return "Screening Assessment";
        }
      }
    }
    return "";
  };



  return (
    <FieldHistoryProvider>
      <FieldHistoryScope resourceType="Observation" id={observation.id}>
        <div className="flex h-full min-h-0 flex-1 flex-col">
          <SheetHeader className="ak-overlay__header flex-col items-stretch gap-2 pr-10 shrink-0 sm:flex-row sm:items-center sm:justify-between sm:gap-4">
            <div className="flex min-w-0 items-center gap-2">
              <SheetTitle className="ak-overlay__title text-wrap sm:truncate">
                {resultName(observation)}
              </SheetTitle>
              <RecordEditedMarker resource={observation} />
            </div>
            <div className="flex shrink-0 items-center gap-2">
              {headerAction}
              <ShowFieldHistoryToggle />
            </div>
          </SheetHeader>
          <SheetDescription asChild className="ak-overlay__body min-h-0 flex-1 overflow-y-auto space-y-4 thin-scrollbar">
            {/* A blood pressure reads from its halves on every path, whatever category it carries. */}
            {isLaboratoryResult(observation) && !pressure ? (
              <div><ObservationResultPanel observation={observation} history={history} /></div>
            ) : (
            <div>
            <div className="rounded mb-3">
              <div className="flex gap-4 items-start">
                <div className="space-y-1">
                  <p className="font-semibold text-lg">
                    {observation?.code?.text ||
                      observation?.code?.coding?.[0]?.display ||
                      "Observation"}
                  </p>
                  <p className="text-sm text-secondary">
                    {getObservationProfile() || observation?.resourceType}
                  </p>
                  <span className="flex items-center gap-2 text-sm">
                    <Calendar size={16} className="text-secondary" />{" "}
                    {observation.meta?.lastUpdated &&
                      formatDateForDisplay(observation.meta.lastUpdated)}
                  </span>
                </div>
              </div>
            </div>
            <div className="space-y-4">
              <div className="rounded space-y-3 gap-3 shadow-sm">
                <div className="grid grid-cols-2 gap-3 text-sm p-0">
                  <div>
                    <p className="text-secondary text-xs">Status</p>
                    {/*
                      THE SHARED PILL. What was here painted `registered` - an observation with no
                      result yet - in solid green with white text, and let `final` fall through to
                      the quietest treatment there is. The emphasis was inverted: the state a reader
                      is looking for was the one drawn most quietly.
                    */}
                    <StatusBadge status={observation.status} />
                  </div>
                  <div>
                    <p className="text-secondary text-xs">Classification</p>
                    <p className="font-semibold text-sm">
                      {observation?.category?.[0]?.coding?.[0]?.display || "-"}
                    </p>
                  </div>
                  {/* The chart already names the patient; a dash for a missing display says nothing. */}
                  {observation?.subject?.display ? (
                    <div>
                      <p className="text-secondary text-xs">Patient</p>
                      <p className="font-semibold text-sm flex gap-1 items-center">
                        <UserRoundPlus size={14} /> {observation.subject.display}
                      </p>
                    </div>
                  ) : null}
                  <div>
                    <p className="text-secondary text-xs">
                      Clinically relevant time
                    </p>
                    <p className="font-semibold text-sm flex gap-1 items-center">
                      <Calendar size={14} className="text-secondary" />
                      {observation?.effectiveDateTime &&
                        formatDateForDisplay(observation?.effectiveDateTime)}{" "}
                      {observation?.effectiveDateTime &&
                        formatTimeForDisplay(observation?.effectiveDateTime)}
                    </p>
                  </div>
                </div>
                <div>
                  <p className="text-secondary text-xs">Type</p>
                  <p
                    className={`inline-flex text-sm ${
                      observation?.code?.text &&
                      "bg-[var(--cat-task-soft)] text-[var(--cat-task)] px-1 rounded"
                    }`}
                  >
                    {observation?.code?.text || "-"}
                  </p>
                </div>
                <div>
                  <p className="text-secondary text-xs">Healthcare event</p>
                  {/* The visit this reading records, as recorded: its own label, or that one is linked; never a raw id, never looked up. */}
                  <p className="font-semibold text-sm">
                    {observation?.encounter && (observation.encounter.reference || observation.encounter.display?.trim() || observation.encounter.identifier)
                      ? observation.encounter.display?.trim() || "A visit is linked to this reading"
                      : "No references recorded"}
                  </p>
                </div>
              </div>
              <div>
                <Tabs defaultValue="value&components">
                  {/* Six tabs are wider than a phone's sheet: the strip wraps rather than scrolling the whole body sideways. */}
                  <TabsList variant="line" className="flex-wrap">
                    <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="value&components"
                    >
                      Value & Components
                    </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="details"
                    >
                      Details
                    </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="performers"
                    >
                      Performers
                    </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="basedOn"
                    >
                      Based On
                    </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="partOf"
                    >
                      Part Of
                    </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="notes"
                    >
                      Notes
                    </TabsTrigger>
                  </TabsList>
                  <TabsContent value="value&components" className="space-y-2">
                    <p className="text-secondary text-lg">Value & Components</p>
                    <div className="rounded space-y-2 shadow p-2 border">
                      <div className="gap-2">
                        <p className="font-bold mb-2">Values</p>
                        <FieldGroup>
                          <Field label="Actual result" value={renderValue() ?? componentReadings(observation)} />
                          {pressure && observation.valueQuantity && (
                            <Field
                              label="Panel value, not the reading"
                              value={<FhirQuantityDisplay quantity={observation.valueQuantity} />}
                            />
                          )}
                          {observation.dataAbsentReason && (
                            <Field
                              label="Reason missing"
                              value={
                                conceptWords(observation.dataAbsentReason)
                              }
                              path="dataAbsentReason.coding[0].display"
                            />
                          )}
                          <Field
                            label="Interpretation"
                            value={(observation.interpretation ?? []).map(conceptText).filter(Boolean).join(", ") || "-"}
                          />
                          {(observation.referenceRange ?? []).some((range) => rangeText(range)) && (
                            <Field
                              label="Usual range"
                              value={(observation.referenceRange ?? []).map(rangeText).filter(Boolean).join("; ")}
                            />
                          )}
                        </FieldGroup>
                      </div>
                      {observation?.component &&
                        observation?.component?.map((component, index) => (
                          <Card key={index}>
                            <CardHeader>
                              <h5 className="text-sm font-semibold">
                                {component?.code?.coding?.[0]?.display ||
                                  component?.code?.text ||
                                  `Component ${index + 1}`}
                              </h5>
                            </CardHeader>
                            <CardContent>
                              <FieldGroup>
                                <Field label="Code" value={conceptText(component.code) || "-"} />
                                <Field
                                  label="Value"
                                  value={renderComponentValue(component)}
                                />
                                {/* Shown only when recorded: an unrecorded interpretation is unspecified, and an unrecorded
                                    absence reason must not make a present value look missing. */}
                                {(component.interpretation ?? []).some((concept) => conceptText(concept)) && (
                                  <Field
                                    label="Interpretation"
                                    value={(component.interpretation ?? []).map(conceptText).filter(Boolean).join(", ")}
                                  />
                                )}
                                {component.dataAbsentReason && conceptText(component.dataAbsentReason) && (
                                  <Field label="Data Absent Reason" value={conceptText(component.dataAbsentReason)} />
                                )}
                              </FieldGroup>
                            </CardContent>
                          </Card>
                        ))}
                    </div>
                  </TabsContent>
                  <TabsContent value="details" className="space-y-2">
                    <p className="text-secondary text-lg">Details</p>
                    <div className="rounded space-y-2 shadow p-2 border">
                      <div className="gap-2">
                        <p className="font-bold mb-2">
                          Observed Body Part
                        </p>
                        <FieldGroup>
                          <Field
                            label="Body site"
                            value={
                              conceptWords(observation.bodySite)
                            }
                            path="bodySite.coding[0].display"
                          />
                          <Field
                            label="Method"
                            value={
                              conceptWords(observation.method)
                            }
                            path="method.coding[0].display"
                          />
                          <Field
                            label="Device (Measurement)"
                            value={
                              <FhirReferenceDisplay
                                references={observation.device}
                              />
                            }
                          />
                        </FieldGroup>
                      </div>
                    </div>
                  </TabsContent>
                  <TabsContent value="performers" className="space-y-2">
                    <p className="text-secondary text-lg">Performers</p>
                    <FieldGroup>
                      <Field
                        label="Who is responsible for the observation"
                        value={
                          <FhirReferenceDisplay
                            references={namedPerformers(observation)}
                          />
                        }
                      />
                      {reportedSource && (
                        <Field label={SELF_REPORTED_SOURCE_LABEL} value={SELF_REPORTED_SOURCE_WORDS[reportedSource].value} />
                      )}
                      <Field label="Recorded at" value={<SourcePractice resource={observation} />} />
                    </FieldGroup>
                  </TabsContent>
                  <TabsContent value="basedOn" className="space-y-2">
                    <p className="text-secondary text-lg">Based On</p>
                    <FieldGroup>
                      <Field
                        label="Fulfils plan, proposal or order"
                        value={
                          <FhirReferenceDisplay references={observation.basedOn} />
                        }
                      />
                    </FieldGroup>
                  </TabsContent>
                  <TabsContent value="partOf" className="space-y-2">
                    <p className="text-secondary text-lg">Part Of</p>
                    <FieldGroup>
                      <Field
                        label="Part of referenced event"
                        value={
                          <FhirReferenceDisplay references={observation.partOf} />
                        }
                      />
                    </FieldGroup>
                  </TabsContent>
                  <TabsContent value="notes" className="space-y-2">
                    <p className="text-secondary text-lg">Notes</p>
                    <FieldGroup>
                      <Field
                        label="Comments about the observation"
                        value={
                          <FhirAnnotationDisplay
                            annotation={observation.note}
                            multiple={true}
                          />
                        }
                      />
                    </FieldGroup>
                  </TabsContent>
                </Tabs>
              </div>
            </div>
            </div>
            )}
          </SheetDescription>
        </div>
      </FieldHistoryScope>
    </FieldHistoryProvider>
  );
};

export default FhirObservationDisplay;