import React from "react";
import { CodeableConcept, Goal, GoalTarget } 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 { formatDateForDisplay } from "../../lib/utils";
import { FhirReferenceDisplay } from "../../utils/fhirReference";
import { FhirAnnotationDisplay } from "../../utils/fhirAnnotation";
import { FhirQuantityDisplay } from "../../utils/fhirQuantity";
import { FhirRangeDisplay } from "../../utils/fhirRange";
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";

/**
 * A concept's words, or nothing: an empty field then reads as the muted dash every other empty field
 * does, never the shared display's "Qualifications not provided", which was written for credentials.
 */
const conceptText = (concept: CodeableConcept | CodeableConcept[] | undefined): string | undefined => {
  const one = (c: CodeableConcept) => c.text?.trim() || c.coding?.find((coding) => coding.display)?.display;
  const words = (Array.isArray(concept) ? concept : concept ? [concept] : []).map(one).filter(Boolean);
  return words.length ? words.join(", ") : undefined;
};

// Lifecycle codes a reached goal has moved past, so the fields say what the card above them says.
const OPEN_LIFECYCLE = new Set(["proposed", "planned", "accepted", "active"]);

interface FhirGoalDisplayProps {
  goal: Goal;
  // Set when the readings have reached the target: progress is derived at read time, not stored.
  reached?: boolean;
  isOpen: boolean;
  onClose: () => void;
  title?: string;
  // Set when the view sits in a page rather than a sheet: it then has no dialog to describe and
  // scrolls with the page instead of inside itself.
  inPage?: boolean;
}

export const FhirGoalDisplay: React.FC<FhirGoalDisplayProps> = ({
  goal,
  reached = false,
  isOpen,
  title,
  inPage = false,
}) => {
  if (!isOpen) return null;

  const Body = inPage ? "div" : SheetDescription;

  // start[x] is polymorphic: either a date or a CodeableConcept, never both.
  const renderGoalStart = (): React.ReactNode => {
    if (goal.startDate) {
      return formatDateForDisplay(goal.startDate);
    }
    if (goal.startCodeableConcept) {
      return conceptText(goal.startCodeableConcept);
    }
    return undefined;
  };

  // target.detail[x] is polymorphic across 7 possible types.
  const renderTargetDetail = (target: GoalTarget): React.ReactNode => {
    if (target.detailQuantity) {
      return <FhirQuantityDisplay quantity={target.detailQuantity} />;
    }
    if (target.detailRange) {
      return <FhirRangeDisplay range={target.detailRange} />;
    }
    if (target.detailCodeableConcept) {
      return conceptText(target.detailCodeableConcept);
    }
    if (target.detailString) {
      return target.detailString;
    }
    if (target.detailBoolean !== undefined) {
      return target.detailBoolean ? "Yes" : "No";
    }
    if (target.detailInteger !== undefined) {
      return target.detailInteger.toString();
    }
    if (target.detailRatio) {
      return <FhirRatioDisplay ratio={target.detailRatio} />;
    }
    return undefined;
  };

  // target.due[x] is polymorphic: a date or a duration.
  const renderTargetDue = (target: GoalTarget): React.ReactNode => {
    if (target.dueDate) {
      return formatDateForDisplay(target.dueDate);
    }
    if (target.dueDuration) {
      return <FhirQuantityDisplay quantity={target.dueDuration} />;
    }
    return undefined;
  };

  /*
   * THE SHARED PILL, not a thirteenth hand-rolled copy of it. It takes the RAW
   * code and supplies the word, the tone and the shape itself - which is the point: a surface that
   * passes its own label is how one state ends up with three words across the product.
   *
   * IT RENDERS NOTHING FOR A CODE THE VOCABULARY DOES NOT KNOW, deliberately, where this used to
   * print the wire format with its dashes swapped for spaces. All six of a goal's lifecycle codes
   * are in the vocabulary, so nothing that renders today stops.
   */
  const lifecycleStatus = reached && goal.lifecycleStatus && OPEN_LIFECYCLE.has(goal.lifecycleStatus)
    ? "completed"
    : goal.lifecycleStatus;
  const lifecycleStatusPill = lifecycleStatus ? (
    <StatusBadge status={lifecycleStatus} />
  ) : undefined;

  return (
    <FieldHistoryProvider>
      <FieldHistoryScope resourceType="Goal" id={goal.id}>
        <div className="flex min-h-0 flex-1 flex-col" data-print-region="true">
          <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 || "Goal Details"}</span>
              <RecordEditedMarker resource={goal} />
            </div>
            <ShowFieldHistoryToggle />
            <PrintRecord/>
          </SheetHeader>
          <Body className={inPage ? "space-y-3 py-1" : "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">
                {goal?.description?.text || "No goal name available"}
              </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="outcomes"
                >
                  Outcomes
                </TabsTrigger>
              </TabsList>
              <TabsContent forceMount value="overview" className="space-y-4">
                <FieldGroup>
                  <Field
                    label="Lifecycle Status"
                    value={lifecycleStatusPill}
                    path="lifecycleStatus"
                  />
                  <Field
                    label="Achievement Status"
                    value={reached ? "Reached" : conceptText(goal.achievementStatus)}
                    path="achievementStatus.coding[0].display"
                  />
                  <Field
                    label="Priority"
                    value={conceptText(goal.priority)}
                    path="priority.coding[0].display"
                  />
                  <Field
                    label="Category"
                    value={conceptText(goal.category)}
                  />
                  <Field
                    label="When goal pursuit begins"
                    value={renderGoalStart()}
                  />
                  <Field
                    label="Status Date"
                    value={
                      goal.statusDate
                        ? formatDateForDisplay(goal.statusDate)
                        : undefined
                    }
                    path="statusDate"
                  />
                  <Field
                    label="Status Reason"
                    value={goal.statusReason}
                    path="statusReason"
                  />
                  <Field
                    label="Expressed By"
                    value={
                      <FhirReferenceDisplay references={goal.expressedBy} />
                    }
                  />
                  <Field
                    label="Issues addressed by this goal"
                    value={
                      <FhirReferenceDisplay references={goal.addresses} />
                    }
                  />
                </FieldGroup>
                <div className="space-y-3">
                  <span className="text-secondary text-xs">Targets</span>
                  {goal.target?.map((target, index) => (
                    <Card key={index}>
                      <CardHeader>
                        <h5 className="text-sm font-semibold">
                          Target {index + 1}
                        </h5>
                      </CardHeader>
                      <CardContent>
                        <FieldGroup>
                          <Field
                            label="Measure"
                            value={conceptText(target.measure)}
                          />
                          <Field
                            label="Detail"
                            value={renderTargetDetail(target)}
                          />
                          <Field label="Due" value={renderTargetDue(target)} />
                        </FieldGroup>
                      </CardContent>
                    </Card>
                  ))}
                </div>
              </TabsContent>
              <TabsContent forceMount value="outcomes" className="space-y-4">
                <FieldGroup>
                  <Field
                    label="Observation that resulted from goal"
                    value={
                      <FhirReferenceDisplay references={goal.outcomeReference} />
                    }
                  />
                  <Field
                    label="What result was achieved regarding the goal"
                    value={conceptText(goal.outcomeCode)}
                  />
                  <Field
                    label="Comments about the goal"
                    value={
                      <FhirAnnotationDisplay
                        annotation={goal.note}
                        multiple={true}
                      />
                    }
                  />
                </FieldGroup>
              </TabsContent>
            </Tabs>
          </Body>
        </div>
      </FieldHistoryScope>
    </FieldHistoryProvider>
  );
};

export default FhirGoalDisplay;