import React from "react";
import { Device } from "fhir/r4";
import { SheetHeader, SheetDescription } from "../ui/sheet";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs";
import { ChevronRight } 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 { FHIRContactPointDisplay } from "../../utils/fhirContactPoint";
import {
  FieldHistoryProvider,
  FieldHistoryScope,
} from "../FieldHistory/FieldHistoryProvider";
import { ShowFieldHistoryToggle } from "../FieldHistory/ShowFieldHistoryToggle";
import { RecordEditedMarker } from "../FieldHistory/RecordEditedMarker";
import { Field } from "../FieldHistory/Field";
import { FieldGroup } from "../FieldHistory/FieldLayout";
import { StatusBadge } from "../ui/status";

interface FhirDeviceDisplayProps {
  device: Device;
  isOpen: boolean;
  onClose: () => void;
  title?: string;
}

export const FhirDeviceDisplay: React.FC<FhirDeviceDisplayProps> = ({
  device,
  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="Device" id={device.id}>
        <div className="flex min-h-0 flex-1 flex-col">
          <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 || "Device Details"}
              </span>
              <RecordEditedMarker resource={device} />
            </div>
            <ShowFieldHistoryToggle />
          </SheetHeader>
          <SheetDescription className="ak-overlay__body space-y-3 overflow-y-auto thin-scrollbar max-h-[calc(100vh-100px)] md:max-h-[calc(100vh-60px)] lg:max-h-[calc(100vh-60px)] py-1">
            <div className="space-y-1">
              <p className="font-bold text-lg">
                {device.deviceName && device.deviceName.length > 0
                  ? device.deviceName.map((name, index) => (
                      <span key={index}>
                        {name?.name}
                        {index < device.deviceName!.length - 1 ? ", " : ""}
                      </span>
                    ))
                  : "Device name not available"}
              </p>
            </div>
            <Tabs defaultValue="overview">
              <TabsList 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="deviceInformation"
                >
                  Device Information
                </TabsTrigger>
              </TabsList>
              <TabsContent value="overview" className="space-y-4">
                <FieldGroup>
                  <Field
                    label="Status"
                    value={renderStatusPill(device.status)}
                    path="status"
                  />
                  <Field
                    label="Status Reason"
                    value={
                      <FhirCodeableConceptDisplay
                        code={device.statusReason}
                        multiple={true}
                      />
                    }
                  />
                  <Field
                    label="The kind or type of device"
                    value={<FhirCodeableConceptDisplay code={device.type} />}
                    path="type.coding[0].display"
                  />
                  <Field
                    label="Patient"
                    value={
                      <FhirReferenceDisplay references={device.patient} />
                    }
                  />
                  <Field
                    label="Owner"
                    value={<FhirReferenceDisplay references={device.owner} />}
                  />
                  <Field
                    label="Location"
                    value={
                      <FhirReferenceDisplay references={device.location} />
                    }
                  />
                  <Field
                    label="Identifiers"
                    value={
                      <FhirIdentifierDisplay identifier={device.identifier} />
                    }
                  />
                </FieldGroup>
              </TabsContent>
              <TabsContent value="deviceInformation" className="space-y-4">
                <div className="space-y-2">
                  <p className="text-sm font-bold">Device Names</p>
                  <Accordion type="single" collapsible defaultValue="item-1">
                    {device.deviceName && device.deviceName.length > 0 ? (
                      device.deviceName.map((name, index) => (
                        <AccordionItem
                          key={index}
                          value={`item-${index + 1}`}
                          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">
                                <p className="text-lg font-bold">
                                  Device Name {index + 1}
                                </p>
                                <ChevronRight
                                  size={20}
                                  className="transition-transform duration-200 group-data-[state=open]:rotate-90"
                                />
                              </div>
                            </div>
                          </AccordionTrigger>
                          <AccordionContent className="p-3">
                            <FieldGroup>
                              <Field
                                label="Name of the device"
                                value={name.name}
                              />
                              <Field
                                label="Device name type"
                                value={
                                  name.type ? (
                                    <span className="capitalize">
                                      {name.type.replace(/-/g, " ")}
                                    </span>
                                  ) : undefined
                                }
                              />
                            </FieldGroup>
                          </AccordionContent>
                        </AccordionItem>
                      ))
                    ) : (
                      <p className="text-sm text-secondary italic">
                        No device names recorded
                      </p>
                    )}
                  </Accordion>
                </div>
                <div className="space-y-2">
                  <p className="text-sm font-bold">
                    Manufacturing & Identification
                  </p>
                  <FieldGroup>
                    <Field
                      label="Manufacturer"
                      value={device.manufacturer}
                      path="manufacturer"
                    />
                    <Field
                      label="Model Number"
                      value={device.modelNumber}
                      path="modelNumber"
                    />
                    <Field
                      label="Part Number"
                      value={device.partNumber}
                      path="partNumber"
                    />
                    <Field
                      label="Serial Number"
                      value={device.serialNumber}
                      path="serialNumber"
                    />
                    <Field
                      label="Lot Number"
                      value={device.lotNumber}
                      path="lotNumber"
                    />
                    <Field
                      label="Distinct Identifier"
                      value={device.distinctIdentifier}
                      path="distinctIdentifier"
                    />
                  </FieldGroup>
                </div>
                <div className="space-y-2">
                  <p className="text-sm font-bold">
                    Manufacturing & Expiration Dates
                  </p>
                  <FieldGroup>
                    <Field
                      label="Date when the device was made"
                      value={
                        device.manufactureDate
                          ? formatDateForDisplay(device.manufactureDate)
                          : undefined
                      }
                      path="manufactureDate"
                    />
                    <Field
                      label="Date and time of expiry of this device"
                      value={
                        device.expirationDate
                          ? formatDateForDisplay(device.expirationDate)
                          : undefined
                      }
                      path="expirationDate"
                    />
                  </FieldGroup>
                </div>
                <div className="space-y-2">
                  <p className="text-sm font-bold">
                    Unique Device Identifier (UDI) Regulatory Data
                  </p>
                  <Accordion type="single" collapsible defaultValue="item-1">
                    {device.udiCarrier && device.udiCarrier.length > 0 ? (
                      device.udiCarrier.map((udiCarrier, index) => (
                        <AccordionItem
                          key={index}
                          value={`item-${index + 1}`}
                          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">
                                <p className="text-lg font-bold">
                                  UDI Carrier {index + 1}
                                </p>
                                <ChevronRight
                                  size={20}
                                  className="transition-transform duration-200 group-data-[state=open]:rotate-90"
                                />
                              </div>
                            </div>
                          </AccordionTrigger>
                          <AccordionContent className="p-3">
                            <FieldGroup>
                              <Field
                                label="Device Identifier"
                                value={udiCarrier.deviceIdentifier}
                              />
                              <Field
                                label="Carrier HRF"
                                value={udiCarrier.carrierHRF}
                              />
                              <Field
                                label="Carrier AIDC"
                                value={udiCarrier.carrierAIDC}
                              />
                              <Field
                                label="UDI Entry Type"
                                value={
                                  udiCarrier.entryType ? (
                                    <span className="capitalize">
                                      {udiCarrier.entryType.replace(/-/g, " ")}
                                    </span>
                                  ) : undefined
                                }
                              />
                              <Field
                                label="Issuer"
                                value={udiCarrier.issuer}
                              />
                              <Field
                                label="Jurisdiction"
                                value={udiCarrier.jurisdiction}
                              />
                            </FieldGroup>
                          </AccordionContent>
                        </AccordionItem>
                      ))
                    ) : (
                      <p className="text-sm text-secondary italic">
                        No UDI carriers recorded
                      </p>
                    )}
                  </Accordion>
                </div>
                <div className="space-y-2">
                  <p className="text-sm font-bold">
                    Additional Device Details
                  </p>
                  <FieldGroup>
                    <Field
                      label="Contact"
                      value={
                        <FHIRContactPointDisplay contact={device.contact} />
                      }
                    />
                    <Field
                      label="Network Address (URL)"
                      value={device.url}
                    />
                    <Field
                      label="Safety Characteristics"
                      value={
                        <FhirCodeableConceptDisplay
                          code={device.safety}
                          multiple={true}
                        />
                      }
                    />
                    <Field
                      label="Reference to the definition for the device"
                      value={
                        <FhirReferenceDisplay references={device.definition} />
                      }
                    />
                    <Field
                      label="Parent Device"
                      value={
                        <FhirReferenceDisplay references={device.parent} />
                      }
                    />
                  </FieldGroup>
                </div>
                {device.property && device.property.length > 0 && (
                  <div className="space-y-2">
                    <p className="text-sm font-bold">
                      Device Properties
                    </p>
                    <Accordion type="single" collapsible defaultValue="item-1">
                      {device.property.map((property, index) => (
                        <AccordionItem
                          key={index}
                          value={`item-${index + 1}`}
                          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">
                                <p className="text-lg font-bold">
                                  Property {index + 1}
                                </p>
                                <ChevronRight
                                  size={20}
                                  className="transition-transform duration-200 group-data-[state=open]:rotate-90"
                                />
                              </div>
                            </div>
                          </AccordionTrigger>
                          <AccordionContent className="p-3">
                            <FieldGroup>
                              <Field
                                label="Type"
                                value={
                                  <FhirCodeableConceptDisplay
                                    code={property.type}
                                  />
                                }
                              />
                              <Field
                                label="Value (Quantity)"
                                value={
                                  property.valueQuantity &&
                                  property.valueQuantity.length > 0 ? (
                                    <div className="space-y-1">
                                      {property.valueQuantity.map(
                                        (quantity, qIndex) => (
                                          <FhirQuantityDisplay
                                            key={qIndex}
                                            quantity={quantity}
                                          />
                                        ),
                                      )}
                                    </div>
                                  ) : undefined
                                }
                              />
                              <Field
                                label="Value (Code)"
                                value={
                                  <FhirCodeableConceptDisplay
                                    code={property.valueCode}
                                    multiple={true}
                                  />
                                }
                              />
                            </FieldGroup>
                          </AccordionContent>
                        </AccordionItem>
                      ))}
                    </Accordion>
                  </div>
                )}
                <div className="space-y-2">
                  <p className="text-sm font-bold">Notes</p>
                  <FieldGroup>
                    <Field
                      label="Clinical Notes & Device Documentation"
                      value={
                        <FhirAnnotationDisplay
                          annotation={device.note}
                          multiple={true}
                        />
                      }
                    />
                  </FieldGroup>
                </div>
              </TabsContent>
            </Tabs>
          </SheetDescription>
        </div>
      </FieldHistoryScope>
    </FieldHistoryProvider>
  );
};

export default FhirDeviceDisplay;