import React from "react";
import { Dosage, MedicationRequest } from "fhir/r4";
import { SheetBody, SheetHeader } from "../ui/sheet";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs";
import { Card, CardContent, CardHeader } from "../ui/card";
import { Clock, Syringe, TriangleAlert, Zap } from "lucide-react";
import { formatDateForDisplay } from "../../lib/utils";
import { FhirCodeableConceptDisplay } from "../../utils/fhirCodeableConcept";
import { FhirReferenceDisplay } from "../../utils/fhirReference";
import { FhirAnnotationDisplay } from "../../utils/fhirAnnotation";
import { FhirPeriodDisplay } from "../../utils/fhirPeriod";
import { FhirQuantityDisplay } from "../../utils/fhirQuantity";
import { FhirRatioDisplay } from "../../utils/fhirRatio";
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";
import { medicationNameOf } from "../../utils/medicationName";

interface FhirMedicationRequestDisplayProps {
  medicationRequest: MedicationRequest;
  isOpen: boolean;
  onClose: () => void;
  title?: string;
}

export const FhirMedicationRequestDisplay: React.FC<
  FhirMedicationRequestDisplayProps
> = ({ medicationRequest, 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 statusPill = <StatusBadge status={medicationRequest.status} />;

  // reported[x] is polymorphic: a boolean flag or a reference to who/what reported it.
  const renderReported = (): React.ReactNode => {
    if (medicationRequest.reportedBoolean !== undefined) {
      return medicationRequest.reportedBoolean ? "Yes" : "No";
    }
    if (medicationRequest.reportedReference) {
      return (
        <FhirReferenceDisplay
          references={medicationRequest.reportedReference}
        />
      );
    }
    return undefined;
  };

  // dosage.asNeeded[x] is polymorphic: a boolean or a CodeableConcept.
  const renderAsNeeded = (dosage: Dosage): React.ReactNode => {
    if (dosage.asNeededCodeableConcept) {
      return (
        <FhirCodeableConceptDisplay code={dosage.asNeededCodeableConcept} />
      );
    }
    if (dosage.asNeededBoolean !== undefined) {
      return dosage.asNeededBoolean ? "Yes" : "No";
    }
    return undefined;
  };

  // substitution.allowed[x] is polymorphic: a boolean or a CodeableConcept.
  const renderSubstitutionAllowed = (): React.ReactNode => {
    if (medicationRequest.substitution?.allowedBoolean !== undefined) {
      return medicationRequest.substitution.allowedBoolean ? "Yes" : "No";
    }
    if (medicationRequest.substitution?.allowedCodeableConcept) {
      return (
        <FhirCodeableConceptDisplay
          code={medicationRequest.substitution.allowedCodeableConcept}
        />
      );
    }
    return undefined;
  };

  const dispenseRequest = medicationRequest.dispenseRequest;

  return (
    <FieldHistoryProvider>
      <FieldHistoryScope
        resourceType="MedicationRequest"
        id={medicationRequest.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 || "Medication Request Details"}
              </span>
              <RecordEditedMarker resource={medicationRequest} />
            </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-180px)] lg:max-h-[calc(100vh-60px)] py-1">
            <div className="space-y-1">
              <p className="font-bold text-lg break-words">
                {medicationNameOf(medicationRequest) ?? "No name provided"}
              </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="dosageDetails"
                >
                  Dosage Details
                </TabsTrigger>
              </TabsList>
              <TabsContent forceMount value="overview" className="space-y-4">
                <FieldGroup>
                  <Field label="Status" value={statusPill} path="status" />
                  <Field
                    label="Intent"
                    value={
                      medicationRequest.intent ? (
                        <span className="capitalize">
                          {medicationRequest.intent}
                        </span>
                      ) : undefined
                    }
                    path="intent"
                  />
                  <Field
                    label="Status Reason"
                    value={
                      <FhirCodeableConceptDisplay
                        code={medicationRequest.statusReason}
                      />
                    }
                    path="statusReason.coding[0].display"
                  />
                  <Field
                    label="Prior Prescription"
                    value={
                      <FhirReferenceDisplay
                        references={medicationRequest.priorPrescription}
                      />
                    }
                  />
                  <Field
                    label="Type of medication usage"
                    value={
                      <FhirCodeableConceptDisplay
                        code={medicationRequest.category}
                        multiple={true}
                      />
                    }
                  />
                  <Field
                    label="Priority"
                    value={
                      medicationRequest.priority ? (
                        <span className="capitalize">
                          {medicationRequest.priority}
                        </span>
                      ) : undefined
                    }
                    path="priority"
                  />
                  <Field
                    label="Administration Pattern"
                    value={
                      <FhirCodeableConceptDisplay
                        code={medicationRequest.courseOfTherapyType}
                      />
                    }
                    path="courseOfTherapyType.coding[0].display"
                  />
                  <Field
                    label="Authored On"
                    value={
                      medicationRequest.authoredOn
                        ? formatDateForDisplay(medicationRequest.authoredOn)
                        : undefined
                    }
                    path="authoredOn"
                  />
                  <Field
                    label="Encounter"
                    value={
                      <FhirReferenceDisplay
                        references={medicationRequest.encounter}
                      />
                    }
                  />
                  <Field
                    label="Clinical issue with action"
                    value={
                      <FhirReferenceDisplay
                        references={medicationRequest.detectedIssue}
                      />
                    }
                  />
                  <Field
                    label="Who/What requested the Request"
                    value={
                      <FhirReferenceDisplay
                        references={medicationRequest.requester}
                      />
                    }
                  />
                  <Field
                    label="Do Not Perform"
                    value={
                      medicationRequest.doNotPerform !== undefined
                        ? medicationRequest.doNotPerform
                          ? "Yes"
                          : "No"
                        : undefined
                    }
                    path="doNotPerform"
                  />
                  <Field
                    label="Reported (Not Recorded Directly)"
                    value={renderReported()}
                  />
                </FieldGroup>
              </TabsContent>
              <TabsContent forceMount value="dosageDetails" className="space-y-4">
                <div className="space-y-2">
                  <p className="text-sm font-bold">Reason</p>
                  <FieldGroup>
                    <Field
                      label="Reason for Medication"
                      value={
                        <FhirCodeableConceptDisplay
                          code={medicationRequest.reasonCode}
                          multiple={true}
                        />
                      }
                    />
                    <Field
                      label="Reason Reference"
                      value={
                        <FhirReferenceDisplay
                          references={medicationRequest.reasonReference}
                        />
                      }
                    />
                  </FieldGroup>
                </div>
                <div className="space-y-3">
                  <p className="text-sm font-bold">Dosages</p>
                  {medicationRequest.dosageInstruction &&
                  medicationRequest.dosageInstruction.length > 0 ? (
                    medicationRequest.dosageInstruction.map((dos, index) => (
                      <Card key={index}>
                        <CardHeader>
                          <h5 className="text-sm font-semibold">
                            Dosage Instruction {index + 1}
                          </h5>
                        </CardHeader>
                        <CardContent className="space-y-4">
                          <div className="flex gap-2 w-full items-center">
                            <div className="space-y-2 bg-[var(--sunken)] p-2 rounded border border-[var(--line)] w-full text-center items-center justify-center">
                              <span>
                                <Clock
                                  size={16}
                                  className="text-ink-muted mx-auto"
                                />
                              </span>
                              <p className="text-xs text-ink-muted">Timing</p>
                              <p className="text-ink-strong">
                                <FhirCodeableConceptDisplay
                                  code={dos?.timing?.code}
                                />
                              </p>
                            </div>
                            <div className="space-y-2 bg-[var(--sunken)] p-2 rounded border border-[var(--line)] w-full text-center items-center justify-center">
                              <span>
                                <Syringe
                                  size={16}
                                  className="text-ink-muted mx-auto"
                                />
                              </span>
                              <p className="text-xs text-ink-muted">Route</p>
                              <p className="text-ink-strong">
                                <FhirCodeableConceptDisplay code={dos?.route} />
                              </p>
                            </div>
                            <div className="space-y-2 bg-[var(--sunken)] p-2 rounded border border-[var(--line)] w-full text-center items-center justify-center">
                              <span>
                                <Zap
                                  size={16}
                                  className="text-ink-muted mx-auto"
                                />
                              </span>
                              <p className="text-xs text-ink-muted">As Needed</p>
                              <p className="text-ink-strong font-bold">
                                {renderAsNeeded(dos)}
                              </p>
                            </div>
                          </div>
                          <FieldGroup>
                            <Field label="Instructions" value={dos.text} />
                            <Field
                              label="Additional Instructions"
                              value={
                                <FhirCodeableConceptDisplay
                                  code={dos.additionalInstruction}
                                  multiple={true}
                                />
                              }
                            />
                            <Field
                              label="Patient Instructions"
                              value={dos.patientInstruction}
                            />
                            <Field
                              label="Method"
                              value={
                                <FhirCodeableConceptDisplay code={dos.method} />
                              }
                            />
                            <Field
                              label="Body Site"
                              value={
                                <FhirCodeableConceptDisplay code={dos.site} />
                              }
                            />
                          </FieldGroup>
                          <div className="space-y-2">
                            <p className="text-destructive flex gap-2 text-lg items-center">
                              <TriangleAlert size={18} /> Maximum Dose Limits
                            </p>
                            <FieldGroup>
                              <Field
                                label="Per Period"
                                value={
                                  <FhirRatioDisplay
                                    ratio={dos.maxDosePerPeriod}
                                  />
                                }
                              />
                              <Field
                                label="Per Administration"
                                value={
                                  <FhirQuantityDisplay
                                    quantity={dos.maxDosePerAdministration}
                                  />
                                }
                              />
                              <Field
                                label="Lifetime"
                                value={
                                  <FhirQuantityDisplay
                                    quantity={dos.maxDosePerLifetime}
                                  />
                                }
                              />
                            </FieldGroup>
                          </div>
                        </CardContent>
                      </Card>
                    ))
                  ) : (
                    <p className="text-sm text-secondary italic">
                      No dosage instructions recorded
                    </p>
                  )}
                </div>
                <div className="space-y-2">
                  <p className="font-bold text-sm">Substitution</p>
                  <FieldGroup>
                    <Field
                      label="Allow Substitution"
                      value={renderSubstitutionAllowed()}
                    />
                    <Field
                      label="Substitution Reason"
                      value={
                        <FhirCodeableConceptDisplay
                          code={medicationRequest.substitution?.reason}
                        />
                      }
                      path="substitution.reason.coding[0].display"
                    />
                  </FieldGroup>
                </div>
                <div className="space-y-2">
                  <p className="font-bold text-sm">
                    Dispense Request
                  </p>
                  <FieldGroup>
                    <Field
                      label="Amount to supply per dispense"
                      value={
                        <FhirQuantityDisplay
                          quantity={dispenseRequest?.quantity}
                        />
                      }
                    />
                    <Field
                      label="Days supply per dispense"
                      value={
                        <FhirQuantityDisplay
                          quantity={dispenseRequest?.expectedSupplyDuration}
                        />
                      }
                    />
                    <Field
                      label="Minimum period between dispenses"
                      value={
                        <FhirQuantityDisplay
                          quantity={dispenseRequest?.dispenseInterval}
                        />
                      }
                    />
                    <Field
                      label="Number of refills authorized"
                      value={
                        dispenseRequest?.numberOfRepeatsAllowed !== undefined
                          ? dispenseRequest.numberOfRepeatsAllowed.toString()
                          : undefined
                      }
                      path="dispenseRequest.numberOfRepeatsAllowed"
                    />
                    <Field
                      label="Time period supply is authorized for"
                      value={
                        <FhirPeriodDisplay
                          period={dispenseRequest?.validityPeriod}
                        />
                      }
                    />
                    <Field
                      label="Initial fill quantity"
                      value={
                        <FhirQuantityDisplay
                          quantity={dispenseRequest?.initialFill?.quantity}
                        />
                      }
                    />
                    <Field
                      label="Initial fill duration"
                      value={
                        <FhirQuantityDisplay
                          quantity={dispenseRequest?.initialFill?.duration}
                        />
                      }
                    />
                    <Field
                      label="Intended dispenser"
                      value={
                        <FhirReferenceDisplay
                          references={dispenseRequest?.performer}
                        />
                      }
                    />
                  </FieldGroup>
                </div>
                <FieldGroup>
                  <Field
                    label="Based On"
                    value={
                      <FhirReferenceDisplay
                        references={medicationRequest.basedOn}
                      />
                    }
                  />
                  <Field
                    label="Desired kind of performer"
                    value={
                      <FhirCodeableConceptDisplay
                        code={medicationRequest.performerType}
                      />
                    }
                    path="performerType.coding[0].display"
                  />
                  <Field
                    label="Intended performer"
                    value={
                      <FhirReferenceDisplay
                        references={medicationRequest.performer}
                      />
                    }
                  />
                  <Field
                    label="Notes"
                    value={
                      <FhirAnnotationDisplay
                        annotation={medicationRequest.note}
                        multiple={true}
                      />
                    }
                  />
                </FieldGroup>
              </TabsContent>
            </Tabs>
          </SheetBody>
        </div>
      </FieldHistoryScope>
    </FieldHistoryProvider>
  );
};

export default FhirMedicationRequestDisplay;