import React from "react";
import { VisionPrescription, VisionPrescriptionLensSpecification } from "fhir/r4";
import { SheetBody, SheetHeader } from "../ui/sheet";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs";
import { ChevronRight, Circle, Clock, Eye, Gauge, Tag } from "lucide-react";
import { formatDateForDisplay } from "../../lib/utils";
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "../ui/accordion";
import { FhirCodeableConceptDisplay } from "../../utils/fhirCodeableConcept";
import { FhirReferenceDisplay } from "../../utils/fhirReference";
import { FhirIdentifierDisplay } from "../../utils/fhirIdentifier";
import { FhirAnnotationDisplay } from "../../utils/fhirAnnotation";
import { FhirQuantityDisplay } from "../../utils/fhirQuantity";
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 FhirVisionPrescriptionDisplayProps {
  visionPrescription: VisionPrescription;
  isOpen: boolean;
  onClose: () => void;
  title?: string;
}

/**
 * Clinically load-bearing: OD (oculus dexter) is the RIGHT eye, OS (oculus sinister) is the LEFT
 * eye. Must be derived from the real `eye` value -- never hardcoded -- or a left-lens prescription
 * renders labeled as the right eye.
 */
const getEyeAbbreviation = (
  eye: VisionPrescriptionLensSpecification["eye"] | undefined,
): string | undefined => {
  if (eye === "right") return "OD";
  if (eye === "left") return "OS";
  return undefined;
};

const getProductLabel = (
  product: VisionPrescriptionLensSpecification["product"] | undefined,
): string | undefined => {
  return product?.text || product?.coding?.[0]?.display;
};

export const FhirVisionPrescriptionDisplay: React.FC<
  FhirVisionPrescriptionDisplayProps
> = ({ visionPrescription, 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} />
  );

  return (
    <FieldHistoryProvider>
      <FieldHistoryScope
        resourceType="VisionPrescription"
        id={visionPrescription.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 || "Vision Prescription Details"}
              </span>
              <RecordEditedMarker resource={visionPrescription} />
            </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">
                {visionPrescription?.resourceType
                  ? visionPrescription.resourceType
                      .replace(/([A-Z])/g, " $1")
                      .trim()
                  : "Vision prescription not 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="lensSpecifications"
                >
                  Lens Specifications
                </TabsTrigger>
              </TabsList>
              <TabsContent forceMount value="overview" className="space-y-4">
                <FieldGroup>
                  <Field
                    label="Status"
                    value={renderStatusPill(visionPrescription.status)}
                    path="status"
                  />
                  <Field
                    label="Who authorized the vision prescription"
                    value={
                      <FhirReferenceDisplay
                        references={visionPrescription.prescriber}
                      />
                    }
                  />
                  <Field
                    label="When prescription was authorized"
                    value={
                      visionPrescription.dateWritten
                        ? formatDateForDisplay(visionPrescription.dateWritten)
                        : undefined
                    }
                    path="dateWritten"
                  />
                  <Field
                    label="Response creation date"
                    value={
                      visionPrescription.created
                        ? formatDateForDisplay(visionPrescription.created)
                        : undefined
                    }
                    path="created"
                  />
                  <Field
                    label="Created during encounter / admission / stay"
                    value={
                      <FhirReferenceDisplay
                        references={visionPrescription.encounter}
                      />
                    }
                  />
                  <Field
                    label="Patient"
                    value={
                      <FhirReferenceDisplay
                        references={visionPrescription.patient}
                      />
                    }
                  />
                  <Field
                    label="Identifiers"
                    value={
                      <FhirIdentifierDisplay
                        identifier={visionPrescription.identifier}
                      />
                    }
                  />
                </FieldGroup>
              </TabsContent>
              <TabsContent forceMount value="lensSpecifications" className="space-y-4 w-full">
                <Accordion type="single" collapsible defaultValue="item-0">
                  {visionPrescription?.lensSpecification &&
                  visionPrescription.lensSpecification.length > 0 ? (
                    visionPrescription.lensSpecification.map(
                      (lensSpecification, index) => {
                        const eyeAbbreviation = getEyeAbbreviation(
                          lensSpecification.eye,
                        );
                        const productLabel = getProductLabel(
                          lensSpecification.product,
                        );

                        return (
                          <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>
                                      <div>
                                        <p className="text-lg font-bold">
                                          Lens specification {index + 1}
                                        </p>
                                      </div>
                                      <div className="flex gap-2 items-center">
                                        {eyeAbbreviation && (
                                          <span className="flex gap-1 items-center text-xs bg-[var(--cat-task-soft)] font-normal capitalize rounded p-0.5 px-2 text-[var(--cat-task)]">
                                            <Eye size={14} /> {eyeAbbreviation}
                                          </span>
                                        )}
                                        {productLabel && (
                                          <span className="flex gap-1 items-center text-xs bg-[var(--cat-task-soft)] font-normal capitalize rounded p-0.5 px-2 text-[var(--cat-task)]">
                                            <Tag size={14} /> {productLabel}
                                          </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="font-bold">Basic Information</p>
                                <FieldGroup>
                                  <Field
                                    label="Eye"
                                    value={
                                      lensSpecification.eye ? (
                                        <span className="capitalize">
                                          {lensSpecification.eye}
                                        </span>
                                      ) : undefined
                                    }
                                  />
                                  <Field
                                    label="Product to be supplied"
                                    value={
                                      <FhirCodeableConceptDisplay
                                        code={lensSpecification.product}
                                      />
                                    }
                                  />
                                </FieldGroup>
                              </div>
                              <div className="p-1 space-y-2">
                                <div className="space-y-1 font-bold flex items-center gap-2">
                                  <Gauge size={18} />
                                  <p className="text-sm">
                                    Lens Parameters
                                  </p>
                                </div>
                                <FieldGroup>
                                  <Field
                                    label="Sphere"
                                    value={lensSpecification.sphere}
                                  />
                                  <Field
                                    label="Cylinder"
                                    value={lensSpecification.cylinder}
                                  />
                                  <Field
                                    label="Axis"
                                    value={
                                      lensSpecification.axis !== undefined
                                        ? `${lensSpecification.axis}°`
                                        : undefined
                                    }
                                  />
                                  <Field
                                    label="Add"
                                    value={lensSpecification.add}
                                  />
                                  <Field
                                    label="Power"
                                    value={lensSpecification.power}
                                  />
                                  <Field
                                    label="Back Curve"
                                    value={lensSpecification.backCurve}
                                  />
                                  <Field
                                    label="Diameter"
                                    value={lensSpecification.diameter}
                                  />
                                </FieldGroup>
                              </div>
                              <div className="p-1 space-y-2">
                                <p className="text-sm font-bold">
                                  Additional Information
                                </p>
                                <FieldGroup>
                                  <Field
                                    label="Color"
                                    value={
                                      lensSpecification.color ? (
                                        <span className="flex gap-1 items-center">
                                          <Circle size={14} />{" "}
                                          {lensSpecification.color}
                                        </span>
                                      ) : undefined
                                    }
                                  />
                                  <Field
                                    label="Brand"
                                    value={
                                      lensSpecification.brand ? (
                                        <span className="flex gap-1 items-center">
                                          <Tag size={14} />{" "}
                                          {lensSpecification.brand}
                                        </span>
                                      ) : undefined
                                    }
                                  />
                                  <Field
                                    label="Lens wear Duration"
                                    value={
                                      <span className="flex gap-1 items-center">
                                        <Clock size={14} />
                                        <FhirQuantityDisplay
                                          quantity={lensSpecification.duration}
                                        />
                                      </span>
                                    }
                                  />
                                </FieldGroup>
                              </div>
                              <div className="p-1 space-y-2">
                                <p className="text-sm font-bold">
                                  Prisms
                                </p>
                                <FieldGroup>
                                  {lensSpecification.prism &&
                                  lensSpecification.prism.length > 0 ? (
                                    lensSpecification.prism.map(
                                      (prism, prismIndex) => (
                                        <Field
                                          key={prismIndex}
                                          label={`Prism ${prismIndex + 1}`}
                                          value={
                                            <span className="flex gap-1 items-center">
                                              <Tag size={14} /> Amount{" "}
                                              {prism.amount} &middot; Base{" "}
                                              {prism.base}
                                            </span>
                                          }
                                        />
                                      ),
                                    )
                                  ) : (
                                    <Field label="Prisms" value={undefined} />
                                  )}
                                </FieldGroup>
                              </div>
                              <FieldGroup>
                                <Field
                                  label="Notes"
                                  value={
                                    <FhirAnnotationDisplay
                                      annotation={lensSpecification.note}
                                      multiple
                                    />
                                  }
                                />
                              </FieldGroup>
                            </AccordionContent>
                          </AccordionItem>
                        );
                      },
                    )
                  ) : (
                    <p className="text-sm text-secondary italic">
                      No lens specifications recorded
                    </p>
                  )}
                </Accordion>
              </TabsContent>
            </Tabs>
          </SheetBody>
        </div>
      </FieldHistoryScope>
    </FieldHistoryProvider>
  );
};

export default FhirVisionPrescriptionDisplay;