import React from "react";
import { CarePlan, CarePlanActivity } from "fhir/r4";
import { SheetBody, SheetHeader } from "../ui/sheet";
import { Calendar, ChevronRight } from "lucide-react";
import { formatDateForDisplay } from "../../lib/utils";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs";
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "../ui/accordion";
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 { describeFhirTimingFully } from "../../utils/fhirTiming";
import {
  FieldHistoryProvider,
  FieldHistoryScope,
} from "../FieldHistory/FieldHistoryProvider";
import { ShowFieldHistoryToggle } from "../FieldHistory/ShowFieldHistoryToggle";
import { PrintRecord } from "../ui/print-record";
import { carePlanName } from "../../utils/carePlanName";
import { RecordEditedMarker } from "../FieldHistory/RecordEditedMarker";
import { Field } from "../FieldHistory/Field";
import { FieldGroup } from "../FieldHistory/FieldLayout";
import { StatusBadge } from "../ui/status";
import { ArchivedNotice } from "../ArchivedNotice/ArchivedNotice";

interface FhirCarePlanDisplayProps {
  carePlan: CarePlan;
  isOpen: boolean;
  onClose: () => void;
  title?: string;
}

export const FhirCarePlanDisplay: React.FC<FhirCarePlanDisplayProps> = ({
  carePlan,
  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} />
  );

  // detail.product[x] is polymorphic: a CodeableConcept or a Reference.
  const renderProductValue = (activity: CarePlanActivity): React.ReactNode => {
    if (activity.detail?.productCodeableConcept) {
      return (
        <FhirCodeableConceptDisplay
          code={activity.detail.productCodeableConcept}
        />
      );
    }
    if (activity.detail?.productReference) {
      return (
        <FhirReferenceDisplay references={activity.detail.productReference} />
      );
    }
    return undefined;
  };

  // detail.scheduled[x] is polymorphic: a Timing, a Period, or a plain string.
  const renderScheduledValue = (
    activity: CarePlanActivity,
  ): React.ReactNode => {
    // The schedule's name and its repeat, so a change to how often or on which days is visible.
    if (activity.detail?.scheduledTiming) {
      return describeFhirTimingFully(activity.detail.scheduledTiming) || undefined;
    }
    if (activity.detail?.scheduledPeriod) {
      return <FhirPeriodDisplay period={activity.detail.scheduledPeriod} />;
    }
    if (activity.detail?.scheduledString) {
      return activity.detail.scheduledString;
    }
    return undefined;
  };

  return (
    <FieldHistoryProvider>
      <FieldHistoryScope resourceType="CarePlan" id={carePlan.id}>
        <div className="flex min-h-0 flex-1 flex-col" data-print-region="true">
          {/* The controls wrap under the title on a narrow screen rather than run past its edge. */}
          <SheetHeader className="ak-overlay__header flex-row flex-wrap items-center justify-between gap-x-4 gap-y-2">
            <div className="flex items-center gap-2">
              <span className="text-secondary">
                {title || "Care Plan Details"}
              </span>
              <RecordEditedMarker resource={carePlan} />
            </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">
                {carePlanName(carePlan, "Plan name not available")}
              </p>
              <div className="flex gap-2 items-center text-xs">
                {carePlan?.meta?.lastUpdated && (
                  <span className="flex items-center gap-1">
                    <Calendar size={13} />{" "}
                    {formatDateForDisplay(carePlan.meta.lastUpdated)}
                  </span>
                )}{" "}
              </div>
            </div>
            {/* An archived plan keeps its recorded status below; this says it is no longer the plan in use. */}
            <ArchivedNotice resource={carePlan} />
            <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="activities"
                >
                  Activities
                </TabsTrigger>
              </TabsList>
              <TabsContent forceMount value="overview" className="space-y-4">
                <FieldGroup>
                  <Field
                    label="Status"
                    value={renderStatusPill(carePlan.status)}
                    path="status"
                  />
                  <Field
                    label="Intent"
                    value={
                      carePlan.intent ? (
                        <span className="capitalize">{carePlan.intent}</span>
                      ) : undefined
                    }
                    path="intent"
                  />
                  <Field label="Title" value={carePlan.title} path="title" />
                  <Field
                    label="Description"
                    value={carePlan.description}
                    path="description"
                  />
                  <Field
                    label="Created"
                    value={
                      carePlan.created
                        ? formatDateForDisplay(carePlan.created)
                        : undefined
                    }
                    path="created"
                  />
                  <Field
                    label="Time period plan covers"
                    value={<FhirPeriodDisplay period={carePlan.period} />}
                  />
                  <Field
                    label="Encounter created as part of"
                    value={
                      <FhirReferenceDisplay references={carePlan.encounter} />
                    }
                  />
                  <Field
                    label="Type"
                    value={
                      <FhirCodeableConceptDisplay
                        code={carePlan.category}
                        multiple={true}
                      />
                    }
                  />
                  <Field
                    label="Fulfills Care Plan"
                    value={
                      <FhirReferenceDisplay references={carePlan.basedOn} />
                    }
                  />
                  <Field
                    label="Care Plan Replaced By This Care Plan"
                    value={
                      <FhirReferenceDisplay references={carePlan.replaces} />
                    }
                  />
                  <Field
                    label="Part of referenced Care Plan"
                    value={
                      <FhirReferenceDisplay references={carePlan.partOf} />
                    }
                  />
                  <Field
                    label="Health Issues Addressed"
                    value={
                      <FhirReferenceDisplay references={carePlan.addresses} />
                    }
                  />
                  <Field
                    label="Desired Outcomes"
                    value={<FhirReferenceDisplay references={carePlan.goal} />}
                  />
                  <Field
                    label="Notes"
                    value={
                      <FhirAnnotationDisplay
                        annotation={carePlan.note}
                        multiple={true}
                      />
                    }
                  />
                </FieldGroup>
              </TabsContent>
              <TabsContent forceMount value="activities">
                <div className="space-y-2">
                  <Accordion type="single" collapsible defaultValue="item-1">
                    {carePlan?.activity && carePlan.activity.length > 0 ? (
                      carePlan.activity.map((activity, 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">
                            <div className="p-2 rounded gap-3 w-full">
                              <div className="flex gap-5 items-center justify-between">
                                <div className="flex gap-2 items-start">
                                  <div className="p-3 px-5 bg-[var(--blue-soft)] text-[var(--primary)] text-xl font-bold">
                                    {index + 1}
                                  </div>
                                  <div>
                                    <p className="text-lg font-bold">
                                      {activity.detail?.code?.text ||
                                        activity.detail?.code?.coding?.[0]
                                          ?.display ||
                                        activity.detail?.description ||
                                        activity.reference?.display ||
                                        `Activity ${index + 1}`}
                                    </p>
                                  </div>
                                </div>
                                {activity.detail?.status && (
                                  <div className="flex gap-4 items-center">
                                    {renderStatusPill(activity.detail.status)}
                                    <ChevronRight
                                      size={20}
                                      className="transition-transform duration-200 group-data-[state=open]:rotate-90"
                                    />
                                  </div>
                                )}
                              </div>
                            </div>
                          </AccordionTrigger>
                          <AccordionContent className="p-2">
                            <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="details"
                                >
                                  Details
                                </TabsTrigger>
                              </TabsList>

                              <TabsContent forceMount
                                value="overview"
                                className="space-y-2"
                              >
                                <FieldGroup>
                                  <Field
                                    label="Results of the activity"
                                    value={
                                      <FhirCodeableConceptDisplay
                                        code={activity.outcomeCodeableConcept}
                                        multiple={true}
                                      />
                                    }
                                  />
                                  <Field
                                    label="Activity details defined in specific resource"
                                    value={
                                      <FhirReferenceDisplay
                                        references={activity.reference}
                                      />
                                    }
                                  />
                                  <Field
                                    label="Comments about the activity status/progress"
                                    value={
                                      <FhirAnnotationDisplay
                                        annotation={activity.progress}
                                        multiple={true}
                                      />
                                    }
                                  />
                                </FieldGroup>
                              </TabsContent>
                              <TabsContent forceMount
                                value="details"
                                className="space-y-4"
                              >
                                <div className="space-y-2">
                                  <p className="text-sm font-bold">
                                    Classification & Status
                                  </p>
                                  <FieldGroup>
                                    <Field
                                      label="Kind"
                                      value={activity.detail?.kind}
                                    />
                                    <Field
                                      label="Detail type of activity"
                                      value={
                                        <FhirCodeableConceptDisplay
                                          code={activity.detail?.code}
                                        />
                                      }
                                    />
                                    <Field
                                      label="Status"
                                      value={renderStatusPill(
                                        activity.detail?.status,
                                      )}
                                    />
                                    <Field
                                      label="Reason for current status"
                                      value={
                                        <FhirCodeableConceptDisplay
                                          code={activity.detail?.statusReason}
                                        />
                                      }
                                    />
                                  </FieldGroup>
                                </div>
                                <div className="space-y-2">
                                  <p className="text-sm font-bold">
                                    Clinical Rationale
                                  </p>
                                  <FieldGroup>
                                    <Field
                                      label="Do Not Perform"
                                      value={
                                        activity.detail?.doNotPerform !==
                                        undefined
                                          ? activity.detail.doNotPerform
                                            ? "Yes"
                                            : "No"
                                          : undefined
                                      }
                                    />
                                    <Field
                                      label="Why activity should be done or why activity was prohibited"
                                      value={
                                        <FhirCodeableConceptDisplay
                                          code={activity.detail?.reasonCode}
                                          multiple={true}
                                        />
                                      }
                                    />
                                    <Field
                                      label="Why activity is needed (References)"
                                      value={
                                        <FhirReferenceDisplay
                                          references={
                                            activity.detail?.reasonReference
                                          }
                                        />
                                      }
                                    />
                                  </FieldGroup>
                                </div>
                                <div className="space-y-2">
                                  <p className="text-sm font-bold">
                                    Medication & Dosage
                                  </p>
                                  <FieldGroup>
                                    <Field
                                      label="What is to be administered/supplied"
                                      value={renderProductValue(activity)}
                                    />
                                    <Field
                                      label="How to consume/day?"
                                      value={
                                        <FhirQuantityDisplay
                                          quantity={activity.detail?.dailyAmount}
                                        />
                                      }
                                    />
                                    <Field
                                      label="How much to administer/supply/consume"
                                      value={
                                        <FhirQuantityDisplay
                                          quantity={activity.detail?.quantity}
                                        />
                                      }
                                    />
                                  </FieldGroup>
                                </div>
                                <div className="space-y-2">
                                  <p className="text-sm font-bold">
                                    Schedule & Location
                                  </p>
                                  <FieldGroup>
                                    <Field
                                      label="When activity is to occur"
                                      value={renderScheduledValue(activity)}
                                    />
                                    <Field
                                      label="Where it should happen"
                                      value={
                                        <FhirReferenceDisplay
                                          references={activity.detail?.location}
                                        />
                                      }
                                    />
                                  </FieldGroup>
                                </div>
                                <div className="space-y-2">
                                  <p className="text-sm font-bold">
                                    Goals & Responsibility
                                  </p>
                                  <FieldGroup>
                                    <Field
                                      label="Description"
                                      value={activity.detail?.description}
                                    />
                                    <Field
                                      label="Goals this activity relates to"
                                      value={
                                        <FhirReferenceDisplay
                                          references={activity.detail?.goal}
                                        />
                                      }
                                    />
                                    <Field
                                      label="Who will be responsible?"
                                      value={
                                        <FhirReferenceDisplay
                                          references={activity.detail?.performer}
                                        />
                                      }
                                    />
                                  </FieldGroup>
                                </div>
                              </TabsContent>
                            </Tabs>
                          </AccordionContent>
                        </AccordionItem>
                      ))
                    ) : (
                      <p className="text-sm text-secondary italic">
                        No activities recorded
                      </p>
                    )}
                  </Accordion>
                </div>
              </TabsContent>
            </Tabs>
          </SheetBody>
        </div>
      </FieldHistoryScope>
    </FieldHistoryProvider>
  );
};

export default FhirCarePlanDisplay;