import React from "react";
import { CodeableConcept, HealthcareService } from "fhir/r4";
import { Card, CardContent, CardHeader } from "../ui/card";
import { Dialog, DialogContent, DialogTitle } from "../ui/dialog";
import { FhirCodeableConceptDisplay } from "../../utils/fhirCodeableConcept";
import { FhirReferenceDisplay } from "../../utils/fhirReference";
import { FhirPeriodDisplay } from "../../utils/fhirPeriod";
import { FhirOperationalHoursDisplay } from "../../utils/fhirOperationalHours";
import { FHIRContactPointDisplay } from "../../utils/fhirContactPoint";
import ProfilePhoto from "../ProfilePhoto/ProfilePhoto";
import { FieldHistoryProvider, FieldHistoryScope } from "../FieldHistory/FieldHistoryProvider";
import { ShowFieldHistoryToggle } from "../FieldHistory/ShowFieldHistoryToggle";
import { RecordEditedMarker } from "../FieldHistory/RecordEditedMarker";
import { Field } from "../FieldHistory/Field";
import { FieldGroup, Section } from "../FieldHistory/FieldLayout";

interface FhirHealthcareServiceDisplayProps {
  healthcareService: HealthcareService;
  isOpen?: boolean;
  onClose?: () => void;
  title?: string;
  asModal?: boolean;
}

/**
 * Per-active pill colors (explicit hex, never the `text-green-*`/`bg-green-*` Tailwind palette --
 * matches the convention set by `FhirCarePlanDisplay`'s `STATUS_STYLES`).
 */
const ACTIVE_STYLES: Record<"active" | "inactive", { bg: string; text: string }> = {
  active: { bg: "var(--green-soft)", text: "var(--success)" },
  inactive: { bg: "var(--red-soft)", text: "var(--danger)" },
};

const renderActivePill = (active: boolean | undefined): React.ReactNode => {
  if (active === undefined) return undefined;
  const style = active ? ACTIVE_STYLES.active : ACTIVE_STYLES.inactive;
  return (
    <span
      className="inline-flex rounded px-3 py-1 text-xs"
      style={{ backgroundColor: style.bg, color: style.text }}
    >
      {active ? "Active" : "Inactive"}
    </span>
  );
};

const renderYesNo = (value: boolean | undefined): string | undefined => {
  if (value === undefined) return undefined;
  return value ? "Yes" : "No";
};

/**
 * `FhirCodeableConceptDisplay` (and the codebase's other CC helpers) render `concept.text` only.
 * Several HealthcareService CC fields are commonly coded without a `.text` convenience string, so
 * this backfills `.text` from `coding[0].display` before handing off to the shared display
 * component -- fixes the "blank chip" bug without touching the shared util.
 */
function withCodeableConceptTextFallback(
  input: CodeableConcept | CodeableConcept[] | undefined,
): CodeableConcept | CodeableConcept[] | undefined {
  if (!input) {
    return input;
  }
  const applyFallback = (concept: CodeableConcept): CodeableConcept => ({
    ...concept,
    text: concept.text || concept.coding?.[0]?.display,
  });
  return Array.isArray(input) ? input.map(applyFallback) : applyFallback(input);
}

export const FhirHealthcareServiceDisplay: React.FC<
  FhirHealthcareServiceDisplayProps
> = ({
  healthcareService,
  isOpen = true,
  onClose,
  title = "Healthcare Service Details",
  asModal = true,
}) => {
  const renderNotAvailable = () => {
    if (!healthcareService.notAvailable || healthcareService.notAvailable.length === 0) {
      return (
        <p className="text-sm italic text-muted-foreground">
          No unavailable periods recorded
        </p>
      );
    }

    return (
      <div className="flex flex-col gap-4">
        {healthcareService.notAvailable.map((notAvailable, index) => (
          <Card key={index}>
            <CardHeader>
              <h6 className="text-sm font-semibold">Unavailable Period {index + 1}</h6>
            </CardHeader>
            <CardContent>
              <FieldGroup>
                <Field label="Description" value={notAvailable.description} />
                <Field label="Period" value={<FhirPeriodDisplay period={notAvailable.during} />} />
              </FieldGroup>
            </CardContent>
          </Card>
        ))}
      </div>
    );
  };

  const renderEligibility = () => {
    if (!healthcareService.eligibility || healthcareService.eligibility.length === 0) {
      return (
        <p className="text-sm italic text-muted-foreground">
          No eligibility requirements recorded
        </p>
      );
    }

    return (
      <div className="flex flex-col gap-4">
        {healthcareService.eligibility.map((item, index) => (
          <Card key={index}>
            <CardHeader>
              <h6 className="text-sm font-semibold">Eligibility {index + 1}</h6>
            </CardHeader>
            <CardContent>
              <FieldGroup>
                <Field
                  label="Code"
                  value={<FhirCodeableConceptDisplay code={withCodeableConceptTextFallback(item.code)} />}
                />
                <Field label="Comment" value={item.comment} />
              </FieldGroup>
            </CardContent>
          </Card>
        ))}
      </div>
    );
  };

  const renderContent = () => (
    <FieldHistoryProvider>
      <FieldHistoryScope resourceType="HealthcareService" id={healthcareService.id}>
        <div className="flex items-center justify-between gap-4">
          <div className="flex items-center gap-3">
            {healthcareService.photo && (
              <ProfilePhoto
                photo={healthcareService.photo}
                type="healthcareService"
                className="w-16 h-16 rounded"
              />
            )}
            <div className="flex items-center gap-2">
              <h2 className="text-lg font-semibold m-0">{title}</h2>
              <RecordEditedMarker resource={healthcareService} />
            </div>
          </div>
          <ShowFieldHistoryToggle />
        </div>

        <div className="space-y-4 mt-4">
          <FieldGroup>
            <Field label="Name" value={healthcareService.name} path="name" />
            <Field label="Active" value={renderActivePill(healthcareService.active)} path="active" />
            <Field label="Comment" value={healthcareService.comment} path="comment" />
            <Field
              label="Availability Exceptions"
              value={healthcareService.availabilityExceptions}
              path="availabilityExceptions"
            />
            <Field
              label="Appointment Required"
              value={renderYesNo(healthcareService.appointmentRequired)}
              path="appointmentRequired"
            />
            <Field
              label="Type of Service"
              value={
                <FhirCodeableConceptDisplay
                  code={withCodeableConceptTextFallback(healthcareService.type)}
                  multiple
                />
              }
            />
            <Field
              label="Category"
              value={
                <FhirCodeableConceptDisplay
                  code={withCodeableConceptTextFallback(healthcareService.category)}
                  multiple
                />
              }
            />
            <Field
              label="Specialties"
              value={
                <FhirCodeableConceptDisplay
                  code={withCodeableConceptTextFallback(healthcareService.specialty)}
                  multiple
                />
              }
            />
            <Field
              label="Languages Offered"
              value={
                <FhirCodeableConceptDisplay
                  code={withCodeableConceptTextFallback(healthcareService.communication)}
                  multiple
                />
              }
            />
            <Field
              label="Associated Programs"
              value={
                <FhirCodeableConceptDisplay
                  code={withCodeableConceptTextFallback(healthcareService.program)}
                  multiple
                />
              }
            />
            <Field
              label="How to Access This Service"
              value={
                <FhirCodeableConceptDisplay
                  code={withCodeableConceptTextFallback(healthcareService.referralMethod)}
                  multiple
                />
              }
            />
            <Field
              label="Service Provision"
              value={
                <FhirCodeableConceptDisplay
                  code={withCodeableConceptTextFallback(healthcareService.serviceProvisionCode)}
                  multiple
                />
              }
            />
            <Field
              label="Provided By"
              value={<FhirReferenceDisplay references={healthcareService.providedBy} />}
            />
            <Field
              label="Contact"
              value={<FHIRContactPointDisplay contact={healthcareService.telecom} />}
            />
            <Field
              label="Endpoints"
              value={<FhirReferenceDisplay references={healthcareService.endpoint} />}
            />
          </FieldGroup>

          <Section title="Locations">
            <FieldGroup>
              <Field
                label="Location(s)"
                value={<FhirReferenceDisplay references={healthcareService.location} />}
              />
              <Field
                label="Coverage Area"
                value={<FhirReferenceDisplay references={healthcareService.coverageArea} />}
              />
            </FieldGroup>
          </Section>

          <Section title="Hours of Operation">
            <FhirOperationalHoursDisplay hours={healthcareService.availableTime} />
          </Section>

          <Section title="Not Available">
            {renderNotAvailable()}
          </Section>

          <Section title="Eligibility">
            {renderEligibility()}
          </Section>
        </div>
      </FieldHistoryScope>
    </FieldHistoryProvider>
  );

  if (!asModal) {
    return (
      <div className="bg-gradient-to-b from-[var(--blue-soft)] via-[var(--surface)] to-[var(--surface)]">
        {renderContent()}
      </div>
    );
  }

  if (!isOpen) return null;

  return (
    <Dialog
      open={isOpen}
      onOpenChange={(next) => {
        if (!next) onClose?.();
      }}
    >
      <DialogContent className="max-h-[90vh] w-full max-w-3xl overflow-y-auto">
        <DialogTitle className="sr-only">{title}</DialogTitle>
        {renderContent()}
      </DialogContent>
    </Dialog>
  );
};

export default FhirHealthcareServiceDisplay;