import React from "react";
import { RiskAssessment, RiskAssessmentPrediction } from "fhir/r4";
import { SheetBody, SheetHeader } from "../ui/sheet";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs";
import { ChevronRight } from "lucide-react";
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "../ui/accordion";
import { FhirCodeableConceptDisplay } from "../../utils/fhirCodeableConcept";
import { FhirReferenceDisplay } from "../../utils/fhirReference";
import { FhirPeriodDisplay } from "../../utils/fhirPeriod";
import { FhirRangeDisplay } from "../../utils/fhirRange";
import { FhirAnnotationDisplay } from "../../utils/fhirAnnotation";
import { formatDateTime } from "../../utils/dateUtils";
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 FhirRiskAssessmentDisplayProps {
  riskAssessment: RiskAssessment;
  isOpen: boolean;
  onClose: () => void;
  title?: string;
}

export const FhirRiskAssessmentDisplay: React.FC<
  FhirRiskAssessmentDisplayProps
> = ({ riskAssessment, 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} />
  );

  // occurrence[x] is polymorphic: a dateTime string, or a Period.
  const renderOccurrenceValue = (): React.ReactNode => {
    if (riskAssessment.occurrenceDateTime) {
      return formatDateTime(riskAssessment.occurrenceDateTime);
    }
    if (riskAssessment.occurrencePeriod) {
      return <FhirPeriodDisplay period={riskAssessment.occurrencePeriod} />;
    }
    return undefined;
  };

  // prediction.probability[x] is polymorphic: a decimal (percentage, max 100) or a Range.
  const renderPredictionProbability = (
    prediction: RiskAssessmentPrediction,
  ): React.ReactNode => {
    if (prediction.probabilityDecimal !== undefined) {
      return `${prediction.probabilityDecimal}%`;
    }
    if (prediction.probabilityRange) {
      return <FhirRangeDisplay range={prediction.probabilityRange} />;
    }
    return undefined;
  };

  // prediction.when[x] is polymorphic: a Period or a Range (age range).
  const renderPredictionWhen = (
    prediction: RiskAssessmentPrediction,
  ): React.ReactNode => {
    if (prediction.whenPeriod) {
      return <FhirPeriodDisplay period={prediction.whenPeriod} />;
    }
    if (prediction.whenRange) {
      return <FhirRangeDisplay range={prediction.whenRange} />;
    }
    return undefined;
  };

  return (
    <FieldHistoryProvider>
      <FieldHistoryScope resourceType="RiskAssessment" id={riskAssessment.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 || "Risk Assessment Details"}
              </span>
              <RecordEditedMarker resource={riskAssessment} />
            </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">
                {riskAssessment.code?.text ||
                  riskAssessment.code?.coding?.[0]?.display ||
                  "Risk Assessment"}
              </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="predictions"
                >
                  Predictions
                </TabsTrigger>
              </TabsList>
              <TabsContent forceMount value="overview" className="space-y-4">
                <FieldGroup>
                  <Field
                    label="Status"
                    value={renderStatusPill(riskAssessment.status)}
                    path="status"
                  />
                  <Field
                    label="Risk Assessment Type"
                    value={
                      <FhirCodeableConceptDisplay code={riskAssessment.code} />
                    }
                    path="code.coding[0].display"
                  />
                  <Field
                    label="Subject"
                    value={
                      <FhirReferenceDisplay
                        references={riskAssessment.subject}
                      />
                    }
                  />
                  <Field
                    label="Method"
                    value={
                      <FhirCodeableConceptDisplay
                        code={riskAssessment.method}
                      />
                    }
                    path="method.coding[0].display"
                  />
                  <Field
                    label="Who did assessment?"
                    value={
                      <FhirReferenceDisplay
                        references={riskAssessment.performer}
                      />
                    }
                  />
                  <Field
                    label="Condition Assessed"
                    value={
                      <FhirReferenceDisplay
                        references={riskAssessment.condition}
                      />
                    }
                  />
                  <Field
                    label="When was assessment made?"
                    value={renderOccurrenceValue()}
                  />
                  <Field
                    label="Mitigation"
                    value={riskAssessment.mitigation}
                    path="mitigation"
                  />
                  <Field
                    label="Where was assessment performed?"
                    value={
                      <FhirReferenceDisplay
                        references={riskAssessment.encounter}
                      />
                    }
                  />
                  <Field
                    label="Reason Risk Assessment Was Performed"
                    value={
                      <FhirCodeableConceptDisplay
                        code={riskAssessment.reasonCode}
                        multiple={true}
                      />
                    }
                  />
                  <Field
                    label="Why the assessment was necessary?"
                    value={
                      <FhirReferenceDisplay
                        references={riskAssessment.reasonReference}
                      />
                    }
                  />
                  <Field
                    label="Basis"
                    value={
                      <FhirReferenceDisplay references={riskAssessment.basis} />
                    }
                  />
                  <Field
                    label="Fulfills Request"
                    value={
                      <FhirReferenceDisplay
                        references={riskAssessment.basedOn}
                      />
                    }
                  />
                  <Field
                    label="Part Of"
                    value={
                      <FhirReferenceDisplay
                        references={riskAssessment.parent}
                      />
                    }
                  />
                  <Field
                    label="Notes"
                    value={
                      <FhirAnnotationDisplay
                        annotation={riskAssessment.note}
                        multiple={true}
                      />
                    }
                  />
                </FieldGroup>
              </TabsContent>
              <TabsContent forceMount value="predictions" className="space-y-4 w-full">
                <Accordion type="single" collapsible defaultValue="item-0">
                  {riskAssessment?.prediction &&
                  riskAssessment.prediction.length > 0 ? (
                    riskAssessment.prediction.map((prediction, 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">
                              <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">
                                    {prediction.outcome?.text ||
                                      prediction.outcome?.coding?.[0]
                                        ?.display ||
                                      `Prediction ${index + 1}`}
                                  </p>
                                  <div className="flex gap-2 items-center">
                                    {(prediction.probabilityDecimal !==
                                      undefined ||
                                      prediction.probabilityRange) && (
                                      <span className="bg-[var(--green-soft)] text-[var(--success)] rounded px-2 py-1 text-xs">
                                        {renderPredictionProbability(
                                          prediction,
                                        )}
                                      </span>
                                    )}
                                    {prediction.qualitativeRisk && (
                                      <span className="bg-[var(--green-soft)] text-[var(--success)] rounded px-2 py-1 text-xs">
                                        <FhirCodeableConceptDisplay
                                          code={prediction.qualitativeRisk}
                                        />
                                      </span>
                                    )}
                                  </div>
                                </div>
                              </div>
                              <ChevronRight
                                size={20}
                                className="transition-transform duration-200 group-data-[state=open]:rotate-90"
                              />
                            </div>
                          </div>
                        </AccordionTrigger>
                        <AccordionContent className="p-3 space-y-4">
                          <div className="space-y-2">
                            <p className="text-sm font-bold">
                              Outcome
                            </p>
                            <FieldGroup>
                              <Field
                                label="Possible outcome for the subject"
                                value={
                                  <FhirCodeableConceptDisplay
                                    code={prediction.outcome}
                                  />
                                }
                              />
                            </FieldGroup>
                          </div>
                          <div className="space-y-2">
                            <p className="text-sm font-bold">
                              Probability
                            </p>
                            <FieldGroup>
                              <Field
                                label="Likelihood of specified outcome"
                                value={renderPredictionProbability(prediction)}
                              />
                              <Field
                                label="Likelihood as qualitative value"
                                value={
                                  <FhirCodeableConceptDisplay
                                    code={prediction.qualitativeRisk}
                                  />
                                }
                              />
                              <Field
                                label="Relative Risk"
                                value={prediction.relativeRisk}
                              />
                            </FieldGroup>
                          </div>
                          <div className="space-y-2">
                            <p className="text-sm font-bold">
                              Timeframe
                            </p>
                            <FieldGroup>
                              <Field
                                label="Timeframe or age range"
                                value={renderPredictionWhen(prediction)}
                              />
                            </FieldGroup>
                          </div>
                          <div className="space-y-2">
                            <p className="text-sm font-bold">
                              Rationale
                            </p>
                            <FieldGroup>
                              <Field
                                label="Explanation of prediction"
                                value={prediction.rationale}
                              />
                            </FieldGroup>
                          </div>
                        </AccordionContent>
                      </AccordionItem>
                    ))
                  ) : (
                    <p className="text-sm text-secondary italic">
                      No predictions recorded
                    </p>
                  )}
                </Accordion>
              </TabsContent>
            </Tabs>
          </SheetBody>
        </div>
      </FieldHistoryScope>
    </FieldHistoryProvider>
  );
};

export default FhirRiskAssessmentDisplay;