import React from "react";
import {
  NutritionOrder,
  NutritionOrderEnteralFormulaAdministration,
} from "fhir/r4";
import { SheetHeader, SheetBody } from "../ui/sheet";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs";
import { formatDateForDisplay } from "../../lib/utils";
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "../ui/accordion";
import { ChevronRight } from "lucide-react";
import { FhirCodeableConceptDisplay } from "../../utils/fhirCodeableConcept";
import { FhirReferenceDisplay } from "../../utils/fhirReference";
import { FhirAnnotationDisplay } from "../../utils/fhirAnnotation";
import { FhirQuantityDisplay } from "../../utils/fhirQuantity";
import { FhirRatioDisplay } from "../../utils/fhirRatio";
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 FhirNutritionOrderDisplayProps {
  nutritionOrder: NutritionOrder;
  isOpen: boolean;
  onClose: () => void;
  title?: string;
}

export const FhirNutritionOrderDisplay: React.FC<
  FhirNutritionOrderDisplayProps
> = ({ nutritionOrder, isOpen, title }) => {
  if (!isOpen) return null;

  // Hero summary of which order components are present. Was producing "2 s" for supplements
  // (`${length} ${length !== 1 ? "s": ""}` never included the word "Supplement").
  const getOrderDetails = (nutritionOrder: NutritionOrder): string => {
    const details: string[] = [];

    if (nutritionOrder?.oralDiet) {
      details.push("Oral Diet");
    }

    if (nutritionOrder?.supplement && nutritionOrder.supplement.length > 0) {
      const count = nutritionOrder.supplement.length;
      details.push(`${count} Supplement${count !== 1 ? "s" : ""}`);
    }

    if (nutritionOrder?.enteralFormula) {
      details.push("Enteral Formula");
    }

    return details.join(", ");
  };

  const orderDetails = getOrderDetails(nutritionOrder);

  // / 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} />
  );

  // administration.rate[x] is polymorphic: a Quantity (e.g. "50 mL/hr") or a Ratio (e.g.
  // "200 mL/4 hrs" when the denominator isn't "1").
  const renderAdministrationRate = (
    administration: NutritionOrderEnteralFormulaAdministration,
  ): React.ReactNode => {
    if (administration.rateQuantity) {
      return <FhirQuantityDisplay quantity={administration.rateQuantity} />;
    }
    if (administration.rateRatio) {
      return <FhirRatioDisplay ratio={administration.rateRatio} />;
    }
    return undefined;
  };

  return (
    <FieldHistoryProvider>
      <FieldHistoryScope resourceType="NutritionOrder" id={nutritionOrder.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 || "Nutrition Order Details"}
              </span>
              <RecordEditedMarker resource={nutritionOrder} />
            </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">
                {orderDetails}
                {orderDetails ? " - " : ""}
                {nutritionOrder?.resourceType
                  ? nutritionOrder.resourceType.replace(/([A-Z])/g, " $1").trim()
                  : "Nutrition Order"}
              </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="admin&preferences"
                >
                  Admin & Preferences
                </TabsTrigger>
              </TabsList>
              <TabsContent forceMount value="overview" className="space-y-4">
                <FieldGroup>
                  <Field
                    label="Status"
                    value={renderStatusPill(nutritionOrder.status)}
                    path="status"
                  />
                  <Field
                    label="Intent"
                    value={
                      nutritionOrder.intent ? (
                        <span className="capitalize">
                          {nutritionOrder.intent}
                        </span>
                      ) : undefined
                    }
                    path="intent"
                  />
                  <Field
                    label="Requested Date and Time"
                    value={
                      nutritionOrder.dateTime
                        ? formatDateForDisplay(nutritionOrder.dateTime)
                        : undefined
                    }
                    path="dateTime"
                  />
                  <Field
                    label="Patient"
                    value={
                      <FhirReferenceDisplay
                        references={nutritionOrder.patient}
                      />
                    }
                  />
                  <Field
                    label="Orderer"
                    value={
                      <FhirReferenceDisplay
                        references={nutritionOrder.orderer}
                      />
                    }
                  />
                  <Field
                    label="Encounter"
                    value={
                      <FhirReferenceDisplay
                        references={nutritionOrder.encounter}
                      />
                    }
                  />
                  <Field
                    label="Food and nutrition-related allergies and intolerances"
                    value={
                      <FhirReferenceDisplay
                        references={nutritionOrder.allergyIntolerance}
                      />
                    }
                  />
                  <Field
                    label="Type of food that should be given"
                    value={
                      <FhirCodeableConceptDisplay
                        code={nutritionOrder.foodPreferenceModifier}
                        multiple
                      />
                    }
                  />
                  <Field
                    label="Type of food that should NOT be given"
                    value={
                      <FhirCodeableConceptDisplay
                        code={nutritionOrder.excludeFoodModifier}
                        multiple
                      />
                    }
                  />
                  <Field
                    label="Notes"
                    value={
                      <FhirAnnotationDisplay
                        annotation={nutritionOrder.note}
                        multiple
                      />
                    }
                  />
                </FieldGroup>
              </TabsContent>
              <TabsContent forceMount value="admin&preferences" className="space-y-4 w-full">
                <div className="space-y-2">
                  <p className="text-sm font-bold">Oral Diet</p>
                  <FieldGroup>
                    <Field
                      label="Type of oral diet or diet restrictions"
                      value={
                        <FhirCodeableConceptDisplay
                          code={nutritionOrder.oralDiet?.type}
                          multiple
                        />
                      }
                    />
                    <Field
                      label="Required consistency of fluids and liquids"
                      value={
                        <FhirCodeableConceptDisplay
                          code={nutritionOrder.oralDiet?.fluidConsistencyType}
                          multiple
                        />
                      }
                    />
                    <Field
                      label="Schedule"
                      value={
                        <FhirTimingDisplay
                          timing={nutritionOrder.oralDiet?.schedule}
                          multiple
                        />
                      }
                    />
                    <Field
                      label="Instructions"
                      value={nutritionOrder.oralDiet?.instruction}
                    />
                  </FieldGroup>
                  <div className="space-y-2">
                    <p className="text-sm font-bold">Nutrients</p>
                    <Accordion type="single" collapsible defaultValue="item-0">
                      {nutritionOrder.oralDiet?.nutrient &&
                      nutritionOrder.oralDiet.nutrient.length > 0 ? (
                        nutritionOrder.oralDiet.nutrient.map(
                          (nutrient, index) => (
                            <AccordionItem
                              key={index}
                              value={`item-${index}`}
                              className="bg-surface shadow border rounded p-0 w-full"
                            >
                              <AccordionTrigger className="hover:no-underline p-0 [&>svg]:hidden group w-full border-b">
                                <div className="p-2 rounded gap-3 w-full">
                                  <div className="flex gap-5 items-center justify-between">
                                    <p className="text-lg font-bold">
                                      Nutrient {index + 1}
                                    </p>
                                    <ChevronRight
                                      size={20}
                                      className="transition-transform duration-200 group-data-[state=open]:rotate-90"
                                    />
                                  </div>
                                </div>
                              </AccordionTrigger>
                              <AccordionContent className="p-3">
                                <FieldGroup>
                                  <Field
                                    label="Modifier"
                                    value={
                                      <FhirCodeableConceptDisplay
                                        code={nutrient.modifier}
                                      />
                                    }
                                  />
                                  <Field
                                    label="Amount"
                                    value={
                                      <FhirQuantityDisplay
                                        quantity={nutrient.amount}
                                      />
                                    }
                                  />
                                </FieldGroup>
                              </AccordionContent>
                            </AccordionItem>
                          ),
                        )
                      ) : (
                        <p className="text-sm text-secondary italic">
                          No nutrients recorded
                        </p>
                      )}
                    </Accordion>
                  </div>
                  <div className="space-y-2">
                    <p className="text-sm font-bold">Texture</p>
                    <Accordion type="single" collapsible defaultValue="item-0">
                      {nutritionOrder.oralDiet?.texture &&
                      nutritionOrder.oralDiet.texture.length > 0 ? (
                        nutritionOrder.oralDiet.texture.map(
                          (texture, index) => (
                            <AccordionItem
                              key={index}
                              value={`item-${index}`}
                              className="bg-surface shadow border rounded p-0 w-full"
                            >
                              <AccordionTrigger className="hover:no-underline p-0 [&>svg]:hidden group w-full border-b">
                                <div className="p-2 rounded gap-3 w-full">
                                  <div className="flex gap-5 items-center justify-between">
                                    <p className="text-lg font-bold">
                                      Texture {index + 1}
                                    </p>
                                    <ChevronRight
                                      size={20}
                                      className="transition-transform duration-200 group-data-[state=open]:rotate-90"
                                    />
                                  </div>
                                </div>
                              </AccordionTrigger>
                              <AccordionContent className="p-3">
                                <FieldGroup>
                                  <Field
                                    label="Modifier"
                                    value={
                                      <FhirCodeableConceptDisplay
                                        code={texture.modifier}
                                      />
                                    }
                                  />
                                  <Field
                                    label="Food Type"
                                    value={
                                      <FhirCodeableConceptDisplay
                                        code={texture.foodType}
                                      />
                                    }
                                  />
                                </FieldGroup>
                              </AccordionContent>
                            </AccordionItem>
                          ),
                        )
                      ) : (
                        <p className="text-sm text-secondary italic">
                          No textures recorded
                        </p>
                      )}
                    </Accordion>
                  </div>
                </div>
                <div className="space-y-2">
                  <p className="text-sm font-bold">Supplements</p>
                  <Accordion type="single" collapsible defaultValue="item-0">
                    {nutritionOrder.supplement &&
                    nutritionOrder.supplement.length > 0 ? (
                      nutritionOrder.supplement.map((supplement, index) => (
                        <AccordionItem
                          key={index}
                          value={`item-${index}`}
                          className="bg-surface shadow border rounded p-0 w-full"
                        >
                          <AccordionTrigger className="hover:no-underline p-0 [&>svg]:hidden group w-full border-b">
                            <div className="p-2 rounded gap-3 w-full">
                              <div className="flex gap-5 items-center justify-between">
                                <p className="text-lg font-bold">
                                  Supplement {index + 1}
                                </p>
                                <ChevronRight
                                  size={20}
                                  className="transition-transform duration-200 group-data-[state=open]:rotate-90"
                                />
                              </div>
                            </div>
                          </AccordionTrigger>
                          <AccordionContent className="p-3">
                            <FieldGroup>
                              <Field
                                label="Type"
                                value={
                                  <FhirCodeableConceptDisplay
                                    code={supplement.type}
                                  />
                                }
                              />
                              <Field
                                label="Product Name"
                                value={supplement.productName}
                              />
                              <Field
                                label="Schedule"
                                value={
                                  <FhirTimingDisplay
                                    timing={supplement.schedule}
                                    multiple
                                  />
                                }
                              />
                              <Field
                                label="Quantity"
                                value={
                                  <FhirQuantityDisplay
                                    quantity={supplement.quantity}
                                  />
                                }
                              />
                              <Field
                                label="Instructions"
                                value={supplement.instruction}
                              />
                            </FieldGroup>
                          </AccordionContent>
                        </AccordionItem>
                      ))
                    ) : (
                      <p className="text-sm text-secondary italic">
                        No supplements recorded
                      </p>
                    )}
                  </Accordion>
                </div>
                <div className="space-y-2">
                  <p className="text-sm font-bold">
                    Enteral Formula
                  </p>
                  <FieldGroup>
                    <Field
                      label="Type of enteral or infant formula"
                      value={
                        <FhirCodeableConceptDisplay
                          code={nutritionOrder.enteralFormula?.baseFormulaType}
                        />
                      }
                    />
                    <Field
                      label="Base Formula Product Name"
                      value={
                        nutritionOrder.enteralFormula?.baseFormulaProductName
                      }
                    />
                    <Field
                      label="Type of modular component to add to the feeding"
                      value={
                        <FhirCodeableConceptDisplay
                          code={nutritionOrder.enteralFormula?.additiveType}
                        />
                      }
                    />
                    <Field
                      label="Additive Product Name"
                      value={
                        nutritionOrder.enteralFormula?.additiveProductName
                      }
                    />
                    <Field
                      label="Route of Administration"
                      value={
                        <FhirCodeableConceptDisplay
                          code={
                            nutritionOrder.enteralFormula?.routeofAdministration
                          }
                        />
                      }
                    />
                    <Field
                      label="Caloric Density"
                      value={
                        <FhirQuantityDisplay
                          quantity={
                            nutritionOrder.enteralFormula?.caloricDensity
                          }
                        />
                      }
                    />
                    <Field
                      label="Upper limit on formula volume per unit of time"
                      value={
                        <FhirQuantityDisplay
                          quantity={
                            nutritionOrder.enteralFormula?.maxVolumeToDeliver
                          }
                        />
                      }
                    />
                    <Field
                      label="Administration Instructions"
                      value={
                        nutritionOrder.enteralFormula?.administrationInstruction
                      }
                    />
                  </FieldGroup>
                  <div className="space-y-2">
                    <p className="text-sm font-bold">
                      Administration
                    </p>
                    <Accordion type="single" collapsible defaultValue="item-0">
                      {nutritionOrder.enteralFormula?.administration &&
                      nutritionOrder.enteralFormula.administration.length >
                        0 ? (
                        nutritionOrder.enteralFormula.administration.map(
                          (administration, index) => (
                            <AccordionItem
                              key={index}
                              value={`item-${index}`}
                              className="bg-surface shadow border rounded p-0 w-full"
                            >
                              <AccordionTrigger className="hover:no-underline p-0 [&>svg]:hidden group w-full border-b">
                                <div className="p-2 rounded gap-3 w-full">
                                  <div className="flex gap-5 items-center justify-between">
                                    <p className="text-lg font-bold">
                                      Administration {index + 1}
                                    </p>
                                    <ChevronRight
                                      size={20}
                                      className="transition-transform duration-200 group-data-[state=open]:rotate-90"
                                    />
                                  </div>
                                </div>
                              </AccordionTrigger>
                              <AccordionContent className="p-3">
                                <FieldGroup>
                                  <Field
                                    label="Quantity"
                                    value={
                                      <FhirQuantityDisplay
                                        quantity={administration.quantity}
                                      />
                                    }
                                  />
                                  <Field
                                    label="Schedule"
                                    value={
                                      <FhirTimingDisplay
                                        timing={administration.schedule}
                                      />
                                    }
                                  />
                                  <Field
                                    label="Rate"
                                    value={renderAdministrationRate(
                                      administration,
                                    )}
                                  />
                                </FieldGroup>
                              </AccordionContent>
                            </AccordionItem>
                          ),
                        )
                      ) : (
                        <p className="text-sm text-secondary italic">
                          No administration details recorded
                        </p>
                      )}
                    </Accordion>
                  </div>
                </div>
              </TabsContent>
            </Tabs>
          </SheetBody>
        </div>
      </FieldHistoryScope>
    </FieldHistoryProvider>
  );
};

export default FhirNutritionOrderDisplay;