import { useProxyCannotAddToRecord } from '../../../../hooks/useProxyCannotAddToRecord';
import { useState } from "react";
import { useNavigate } from "react-router-dom";
import { Device } from "fhir/r4";
import { FhirDeviceDisplay } from "../../../../components";
import {
  useFhirDeviceBroadcast,
  useFhirDevices,
  useFhirDeviceTargetedBroadcast,
} from "../../../../hooks";
import { useAuthServiceContext } from "../../../../services";
import { Button } from "../../../../components/ui/button.tsx";
import { ChevronRight, Cpu, Edit, Plus, Radio } from "lucide-react";
import { Skeleton } from "../../../../components/ui/skeleton.tsx";
import { Sheet, SheetContent } from "../../../../components/ui/sheet.tsx";

const Devices = () => {
  const navigate = useNavigate();
  const { userRole, USER_ROLES } = useAuthServiceContext();
  const { loading, error, devicesList } = useFhirDevices();
  const [selectedDevice, setSelectedDevice] = useState<Device | null>(null);
  const [showDisplayModal, setShowDisplayModal] = useState<boolean>(false);

  useFhirDeviceBroadcast();
  useFhirDeviceTargetedBroadcast({
    device: selectedDevice || undefined,
    isOpen: showDisplayModal,
    onUpdate: (updatedDevice) => {
      setSelectedDevice(updatedDevice);
    },
    onDelete: () => {
      setShowDisplayModal(false);
      setSelectedDevice(null);
    },
  });

  const viewDevice = (device: Device) => {
    setSelectedDevice(device);
    setShowDisplayModal(true);
  };

  const editDevice = (event: React.MouseEvent, device: Device) => {
    event.stopPropagation();
    navigate(device.id as string, { relative: "path" });
  };

  const addDevice = () => {
    navigate("new", { relative: "path" });
  };

  const proxyCannotAdd = useProxyCannotAddToRecord();
  const isAuthorizedToEdit = () => {
    return (
      !proxyCannotAdd && userRole &&
      [
        USER_ROLES.PATIENT,
        USER_ROLES.RELATED_PERSON,
        USER_ROLES.PRACTITIONER,
      ].includes(userRole as string)
    );
  };

  return (
    <div>
      <div className="flex justify-between items-center">
        <div className="mb-2 lg:mb-0 sm:mb-0">
          <h2 className="font-bold text-xl">Devices</h2>
          <p className="text-sm">
            View and manage medical devices, implants, and associated
            traceability information.{" "}
          </p>
        </div>
        <div className="flex justify-end text-end">
          {isAuthorizedToEdit() && (
            <Button onClick={addDevice}>
              <Plus />
              Add
            </Button>
          )}
        </div>
      </div>{" "}
      
      {error ? (
        <div className="flex flex-col items-center font-normal justify-center p-8 text-center space-y-5 pt-[100px]">
          <Radio strokeWidth={1} size={50} className="mx-auto mb-5" />{" "}
          <div>
            <h3 className="text-lg font-semibold mb-3">
              Could not load Devices
            </h3>
            <p className="text-muted-foreground">Try again later.</p>
          </div>
          <Button
            className="cursor-pointer bg-primary rounded p-2 text-white hover:bg-primary/80 px-4"
            onClick={() => window.location.reload()}
          >
            Retry
          </Button>
        </div>
      ) : !loading && devicesList.length === 0 ? (
        <div className="p-4 items-center justify-center text-center space-y-4 m-auto pt-[100px]">
          <Radio strokeWidth={1} size={50} className="mx-auto mb-5" />
          <p className="text-lg font-bold">No Devices Added Yet</p>
          <p>
            There are currently no medical devices linked to your health record.
            Devices are added by your healthcare provider and will appear here
            once assigned.
          </p>
        </div>
      ) : loading ? (
        <div className="space-y-3 mt-3">
          {[...Array(7)].map((_, index) => (
            <div
              key={index}
              className="flex justify-between gap-3 items-center rounded p-1 animate-pulse"
            >
              <div className="space-y-2 w-3/4 items-center">
                <div className="flex items-center gap-4">
                  <Skeleton className="h-5 w-full rounded"></Skeleton>
                  <Skeleton className="h-5 w-full rounded"></Skeleton>
                </div>
                <Skeleton className="h-5 w-full rounded"></Skeleton>
              </div>
              <Skeleton className="h-12 w-12 rounded-full"></Skeleton>
            </div>
          ))}
        </div>
      ) : (
        devicesList.length !== 0 && (
          <div className="space-y-2 mt-3">
            {devicesList.map((device: Device) => {
              return (
                <div
                  className="focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 flex gap-2 justify-between items-center"
                  key={device.id}
                  role="button"
                  tabIndex={0}
                  onClick={() => viewDevice(device)}
                  onKeyDown={(event: React.KeyboardEvent) => {
                    if (event.key !== 'Enter' && event.key !== ' ') return;
                    event.preventDefault();
                    viewDevice(device);
                  }}
                >
                  <div className="flex w-full justify-between gap-3 group items-center cursor-pointer rounded p-2 hover:bg-muted">
                    <div className="flex gap-2 items-center">
                      <Cpu
                        size={40}
                        className="bg-green-soft text-sage-ink p-2 rounded"
                      />

                      <div className="space-y-1">
                        <p className="font-bold flex gap-4 items-center text-lg">
                          {device?.deviceName?.map((name) => (
                            <span>{name?.name}</span>
                          )) || "Device name not available"}
                          <span className="text-xs bg-green-600 font-normal rounded p-0.5 px-2 text-white capitalize">
                            {device.status ? device.status : "Status unknown"}
                          </span>
                        </p>
                        <p className="text-sm text-secondary">
                          {[
                            device?.manufacturer,
                            device?.modelNumber,
                            device?.serialNumber,
                          ]
                            .filter(Boolean)
                            .join(" | ") || "-"}
                        </p>{" "}
                      </div>
                    </div>
                    <div className="text-secondary group-hover:text-foreground transition-colors flex gap-2">
                      <ChevronRight size={30} strokeWidth={1} />
                    </div>
                  </div>
                  {isAuthorizedToEdit() && (
                    <div>
                      <Button
                        onClick={(event: React.MouseEvent) =>
                          editDevice(event, device)
                        }
                        variant="outline"
                      >
                        <Edit /> Edit
                      </Button>
                    </div>
                  )}
                </div>
              );
            })}
          </div>
        )
      )}
      {selectedDevice && (
        <Sheet
          open={!!selectedDevice}
          onOpenChange={(open) => {
            if (!open) setSelectedDevice(null);
          }}
        >
          <SheetContent className="sm:max-w-[700px] sm:min-w-[700px] w-4/4">
            <FhirDeviceDisplay
              device={selectedDevice}
              isOpen={showDisplayModal}
              onClose={() => {
                setShowDisplayModal(false);
                setSelectedDevice(null);
              }}
            />
          </SheetContent>
        </Sheet>
      )}
    </div>
  );
};

export default Devices;

// import { useNavigate } from 'react-router-dom';
// import { Device } from 'fhir/r4';
// import { AppSpinner, FhirDeviceDisplay, ScrollableTab } from '../../../../components';
// import { formatFhirCodeableConcept } from '../../../../utils/fhirCodeableConcept.tsx';
// import { useFhirDeviceBroadcast, useFhirDevices, useFhirDeviceTargetedBroadcast } from '../../../../hooks';
// import { useAuthServiceContext, useDeviceServiceContext } from '../../../../services';

// const Devices = () => {
// const navigate = useNavigate();
// const { userRole, USER_ROLES } = useAuthServiceContext();
// const { getDeviceDisplay } = useDeviceServiceContext();
// const { loading, error, clearError, devicesList } = useFhirDevices();
// const [isGuideOpen, setIsGuideOpen] = useState<boolean>(false);
// const [selectedDevice, setSelectedDevice] = useState<Device | null>(null);
// const [showDisplayModal, setShowDisplayModal] = useState<boolean>(false);
// const spacerMargin = '24px';

// useFhirDeviceBroadcast();
// useFhirDeviceTargetedBroadcast({
// device: selectedDevice || undefined,
// isOpen: showDisplayModal,
// onUpdate: (updatedDevice) => {
// setSelectedDevice(updatedDevice);
// },
// onDelete: () => {
// setShowDisplayModal(false);
// setSelectedDevice(null);
// }
// });

// const viewDevice = (device: Device) => {
// setSelectedDevice(device);
// setShowDisplayModal(true);
// };

// const editDevice = (event: React.MouseEvent, device: Device) => {
// event.stopPropagation();
// navigate(device.id as string, { relative: 'path' });
// };

// const addDevice = () => {
// navigate('new', { relative: 'path' });
// };

// const isAuthorizedToEdit = () => {
// return userRole && [USER_ROLES.PATIENT, USER_ROLES.RELATED_PERSON, USER_ROLES.PRACTITIONER].includes(userRole as string);
// };

// const getStatusDisplay = (device: Device): { text: string, color?: string } => {
// if (!device) return { text: 'Unknown' };

// switch (device.status) {
// case 'active':
// return { text: 'Active', color: '#00a32a' };
// case 'inactive':
// return { text: 'Inactive', color: '#757575' };
// case 'entered-in-error':
// return { text: 'Error', color: '#cc1818' };
// case 'unknown':
// default:
// return { text: device.status?.charAt(0).toUpperCase() + device.status?.slice(1) || 'Unknown' };
// }
// };

// const getDeviceDetails = (device: Device) => {
// const details = [];

// if (device.manufacturer) {
// details.push(device.manufacturer);
// }

// if (device.modelNumber) {
// details.push(`Model: ${device.modelNumber}`);
// }

// if (device.serialNumber) {
// details.push(`SN: ${device.serialNumber}`);
// }

// return details.join(' - ');
// };

// return (
// <View>
// <FhirGuide isOpen={isGuideOpen}
// onFinish={() => setIsGuideOpen(false)}
// resourceType="Device"/>

// <Flex align="center" justify="space-between">
// <FlexBlock>
// </FlexBlock>
// <FlexItem>
// <Button variant="primary"
// icon={info}
// onClick={() => setIsGuideOpen(true)}>
// Help
// </Button>
// </FlexItem>
// {isAuthorizedToEdit() && (
// <FlexItem>
// <Button variant="primary"
// icon={plus}
// onClick={addDevice}>
// Add
// </Button>
// </FlexItem>
// )}
// </Flex>
// <Spacer margin="8"/>

// {error && (
// <>
// <Notice status="error" onRemove={clearError}>
// {error}
// </Notice>

// <Spacer margin={spacerMargin}/>
// </>
// )}

// {!loading && devicesList.length === 0 && (
// <>
// <Notice status="info" isDismissible={false}>
// No devices found.
// </Notice>

// <Spacer margin={spacerMargin}/>
// </>
// )}

// <>
// {loading ? (
// <AppSpinner/>
// ): (
// <ScrollableTab>
// {devicesList.length !== 0 && (
// <ItemGroup isBordered isSeparated isRounded size='large'>
// {devicesList.map((device: Device) => {
// const displayTitle = getDeviceDisplay(device);
// const { text: statusText, color: statusColor } = getStatusDisplay(device);
// const deviceDetails = getDeviceDetails(device);
// const deviceType = device.type ? formatFhirCodeableConcept(device.type): '';

// return (
// <Item key={device.id}
// onClick={() => viewDevice(device)}>
// <Flex>
// <FlexItem>
// <Icon icon={desktop}
// size={24}
// style={{
// marginRight: 12,
// color: statusColor
// }}/>
// </FlexItem>
// <FlexBlock>
// <Flex align="center" justify="space-between">
// <FlexItem>
// <Text style={{ fontWeight: 500 }}>
// {displayTitle}
// </Text>
// {deviceType && (
// <Text variant="muted" style={{ display: 'block' }}>
// Type: {deviceType}
// </Text>
// )}
// {deviceDetails && (
// <Text variant="muted" style={{ display: 'block' }}>
// {deviceDetails}
// </Text>
// )}
// </FlexItem>
// {isAuthorizedToEdit() && (
// <FlexItem>
// <Button
// variant="secondary"
// size="small"
// icon={edit}
// onClick={(event: React.MouseEvent) => editDevice(event, device)}
// >
// Edit
// </Button>
// </FlexItem>
// )}
// </Flex>
// </FlexBlock>
// </Flex>
// </Item>
// );
// })}
// </ItemGroup>
// )}
// </ScrollableTab>
// )}
// </>

// {selectedDevice && (
// <FhirDeviceDisplay
// device={selectedDevice}
// isOpen={showDisplayModal}
// onClose={() => {
// setShowDisplayModal(false);
// setSelectedDevice(null);
// }}
// />
// )}
// </View>
// );
// };

// export default Devices;