import React from "react";
import { Dosage, MedicationStatement } from "fhir/r4";
import { SheetDescription, 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 { 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 FhirMedicationStatementDisplayProps {
  medicationStatement: MedicationStatement;
  isOpen: boolean;
  onClose: () => void;
  title?: string;
}

export const FhirMedicationStatementDisplay: React.FC<
  FhirMedicationStatementDisplayProps
> = ({ medicationStatement, 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={medicationStatement.status} />;

  // effective[x] is polymorphic: either a dateTime or a Period, never both.
  const effectiveField: { label: string; value: React.ReactNode } =
    medicationStatement.effectiveDateTime
      ? {
          label: "Effective Date",
          value: formatDateForDisplay(medicationStatement.effectiveDateTime),
        }
      : medicationStatement.effectivePeriod
        ? {
            label: "Effective Period",
            value: (
              <FhirPeriodDisplay
                period={medicationStatement.effectivePeriod}
              />
            ),
          }
        : { label: "Effective Date", value: undefined };

  // dosage[x].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;
  };

  return (
    <FieldHistoryProvider>
      <FieldHistoryScope
        resourceType="MedicationStatement"
        id={medicationStatement.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 || "Medication Statement Details"}
              </span>
              <RecordEditedMarker resource={medicationStatement} />
            </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-180px)] lg:max-h-[calc(100vh-60px)] py-1">
            <div className="space-y-1">
              <p className="font-bold text-lg break-words">
                {medicationNameOf(medicationStatement) ?? "No name provided"}
              </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="dosageDetails"
                >
                  Dosage Details
                </TabsTrigger>
              </TabsList>
              <TabsContent value="overview" className="space-y-4">
                <FieldGroup>
                  <Field label="Status" value={statusPill} path="status" />
                  <Field
                    label="Usage Type"
                    value={
                      <FhirCodeableConceptDisplay
                        code={medicationStatement.category}
                      />
                    }
                    path="category.coding[0].display"
                  />
                  <Field
                    label="Status Reason"
                    value={
                      <FhirCodeableConceptDisplay
                        code={medicationStatement.statusReason}
                        multiple={true}
                      />
                    }
                  />
                  <Field
                    label={effectiveField.label}
                    value={effectiveField.value}
                  />
                  <Field
                    label="Date Asserted"
                    value={
                      medicationStatement.dateAsserted
                        ? formatDateForDisplay(medicationStatement.dateAsserted)
                        : undefined
                    }
                    path="dateAsserted"
                  />
                  <Field
                    label="Encounter / Episode"
                    value={
                      <FhirReferenceDisplay
                        references={medicationStatement.context}
                      />
                    }
                  />
                  <Field
                    label="Information Source"
                    value={
                      <FhirReferenceDisplay
                        references={medicationStatement.informationSource}
                      />
                    }
                  />
                  <Field
                    label="Derived From"
                    value={
                      <FhirReferenceDisplay
                        references={medicationStatement.derivedFrom}
                      />
                    }
                  />
                  <Field
                    label="Reason"
                    value={
                      <FhirCodeableConceptDisplay
                        code={medicationStatement.reasonCode}
                        multiple={true}
                      />
                    }
                  />
                  <Field
                    label="Reason Reference"
                    value={
                      <FhirReferenceDisplay
                        references={medicationStatement.reasonReference}
                      />
                    }
                  />
                </FieldGroup>
              </TabsContent>
              <TabsContent value="dosageDetails" className="space-y-4">
                <div className="space-y-3">
                  <span className="text-secondary text-xs">Dosages</span>
                  {medicationStatement.dosage &&
                  medicationStatement.dosage.length > 0 ? (
                    medicationStatement.dosage.map((dos, index) => (
                      <Card key={index}>
                        <CardHeader>
                          <h5 className="text-sm font-semibold">
                            Dosage {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>
                <FieldGroup>
                  <Field
                    label="Part Of"
                    value={
                      <FhirReferenceDisplay references={medicationStatement.partOf} />
                    }
                  />
                  <Field
                    label="Based On"
                    value={
                      <FhirReferenceDisplay
                        references={medicationStatement.basedOn}
                      />
                    }
                  />
                  <Field
                    label="Notes"
                    value={
                      <FhirAnnotationDisplay
                        annotation={medicationStatement.note}
                        multiple={true}
                      />
                    }
                  />
                </FieldGroup>
              </TabsContent>
            </Tabs>
          </SheetDescription>
        </div>
      </FieldHistoryScope>
    </FieldHistoryProvider>
  );
};

export default FhirMedicationStatementDisplay;