import React from "react";
import { CareTeam } from "fhir/r4";
import { SheetBody, SheetHeader } from "../ui/sheet";
import { formatDateForDisplay } from "../../lib/utils";
import { Calendar } from "lucide-react";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs";
import { Card, CardContent, CardHeader } from "../ui/card";
import { isOutsideProvidersTeam } from "../../utils/outsideProviders.ts";
import { FhirCodeableConceptDisplay } from "../../utils/fhirCodeableConcept";
import { FhirReferenceDisplay } from "../../utils/fhirReference";
import { FhirAnnotationDisplay } from "../../utils/fhirAnnotation";
import { FhirPeriodDisplay } from "../../utils/fhirPeriod";
import { FHIRContactPointDisplay } from "../../utils/fhirContactPoint";
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 FhirCareTeamDisplayProps {
  careTeam: CareTeam;
  isOpen: boolean;
  onClose: () => void;
  title?: string;
}

export const FhirCareTeamDisplay: React.FC<FhirCareTeamDisplayProps> = ({
  careTeam,
  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={careTeam.status} />;

  return (
    <FieldHistoryProvider>
      <FieldHistoryScope resourceType="CareTeam" id={careTeam.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 || "Care Team Details"}
              </span>
              <RecordEditedMarker resource={careTeam} />
            </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 flex items-center gap-2">
                {careTeam.name || "No name available"}
                {isOutsideProvidersTeam(careTeam) && (
                  <span className="text-xs bg-sunken text-ink font-normal rounded px-2 py-0.5">
                    Patient-reported
                  </span>
                )}
              </p>
              <div className="flex gap-2 items-center text-xs">
                {careTeam?.meta?.lastUpdated && (
                  <span className="flex items-center gap-1">
                    <Calendar size={13} />{" "}
                    {formatDateForDisplay(careTeam.meta.lastUpdated)}
                  </span>
                )}
              </div>
            </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="participants"
                >
                  Participants
                </TabsTrigger>
              </TabsList>
              <TabsContent forceMount value="overview" className="space-y-4">
                <FieldGroup>
                  <Field label="Status" value={statusPill} path="status" />
                  <Field
                    label="Type of team"
                    value={
                      <FhirCodeableConceptDisplay
                        code={careTeam.category}
                        multiple={true}
                      />
                    }
                  />
                  <Field
                    label="Patient"
                    value={<FhirReferenceDisplay references={careTeam.subject} />}
                  />
                  <Field
                    label="Time period team covers"
                    value={<FhirPeriodDisplay period={careTeam.period} />}
                  />
                  <Field
                    label="A contact detail for the care team (that applies to all members)"
                    value={
                      <FHIRContactPointDisplay contact={careTeam.telecom} />
                    }
                  />
                  <Field
                    label="Encounter created as part of"
                    value={
                      <FhirReferenceDisplay references={careTeam.encounter} />
                    }
                  />
                  <Field
                    label="Organization responsible for the care team"
                    value={
                      <FhirReferenceDisplay
                        references={careTeam.managingOrganization}
                      />
                    }
                  />
                  <Field
                    label="Notes"
                    value={
                      <FhirAnnotationDisplay
                        annotation={careTeam.note}
                        multiple={true}
                      />
                    }
                  />
                  <Field
                    label="Why the care team exists"
                    value={
                      <FhirCodeableConceptDisplay
                        code={careTeam.reasonCode}
                        multiple={true}
                      />
                    }
                  />
                  <Field
                    label="Why the care team exists (References)"
                    value={
                      <FhirReferenceDisplay
                        references={careTeam.reasonReference}
                      />
                    }
                  />
                </FieldGroup>
              </TabsContent>
              <TabsContent forceMount value="participants" className="space-y-4">
                <div className="space-y-3">
                  {careTeam.participant && careTeam.participant.length > 0 ? (
                    careTeam.participant.map((participant, index) => (
                      <Card key={index}>
                        <CardHeader>
                          <h5 className="text-sm font-semibold">
                            Participant {index + 1}
                          </h5>
                        </CardHeader>
                        <CardContent>
                          <FieldGroup>
                            <Field
                              label="Type of involvement"
                              value={
                                <FhirCodeableConceptDisplay
                                  code={participant.role}
                                  multiple={true}
                                />
                              }
                            />
                            <Field
                              label="Who is involved"
                              value={
                                <FhirReferenceDisplay
                                  references={participant.member}
                                />
                              }
                            />
                            <Field
                              label="Organization of the practitioner"
                              value={
                                <FhirReferenceDisplay
                                  references={participant.onBehalfOf}
                                />
                              }
                            />
                            <Field
                              label="Time period of participant"
                              value={
                                <FhirPeriodDisplay period={participant.period} />
                              }
                            />
                          </FieldGroup>
                        </CardContent>
                      </Card>
                    ))
                  ) : (
                    <p className="text-sm text-secondary italic">
                      No participants recorded
                    </p>
                  )}
                </div>
              </TabsContent>
            </Tabs>
          </SheetBody>
        </div>
      </FieldHistoryScope>
    </FieldHistoryProvider>
  );
};

export default FhirCareTeamDisplay;