import { RowStatus } from "../../../../components/ui/row-meta";
import { HealthcareService } from "fhir/r4";
import { formatFhirCodeableConcept } from "../../../../utils/fhirCodeableConcept.tsx";
import { FhirHealthcareServiceDisplay } from "../../../../components";
import {
  useFhirHealthcareServiceBroadcast,
  useFhirHealthcareServices,
  useFhirHealthcareServiceTargetedBroadcast,
} from "../../../../hooks";
import {
  useAuthServiceContext,
  useStaffPermissionServiceContext,
} from "../../../../services";
import React, { useState } from "react";
import { ChevronRight, Pencil, Plus, Stethoscope } from 'lucide-react';
import { Sheet, SheetContent, SheetTitle } from "../../../../components/ui/sheet";
import { Skeleton } from "../../../../components/ui/skeleton.tsx";
import EditHealthcareServicePage from "./HealthcareServicePage/HealthcareServicePage";

const HealthcareServicesPage = () => {
  const { userRole, USER_ROLES } = useAuthServiceContext();
  const { canManage } = useStaffPermissionServiceContext();
  const {
    loading,
    error,
    healthcareServicesList,
    loadHealthcareServices,
  } = useFhirHealthcareServices();
  const [selectedHealthcareService, setSelectedHealthcareService] =
    useState<HealthcareService | null>(null);
  const [healthcareServiceEditor, setHealthcareServiceEditor] = useState<{
    resourceId: string;
    healthcareService?: HealthcareService | null;
  } | null>(null);

  const isPatient = [USER_ROLES.PATIENT, USER_ROLES.RELATED_PERSON].includes(
    userRole as string,
  );

  useFhirHealthcareServiceBroadcast();
  useFhirHealthcareServiceTargetedBroadcast({
    healthcareService: selectedHealthcareService || undefined,
    isOpen: !!selectedHealthcareService,
    onUpdate: (updatedHealthcareService) => {
      setSelectedHealthcareService(updatedHealthcareService);
    },
    onDelete: () => {
      setSelectedHealthcareService(null);
    },
  });

  const openHealthcareServiceEditor = (
    healthcareService?: HealthcareService | null,
  ) => {
    setHealthcareServiceEditor({
      resourceId: healthcareService?.id || "new",
      healthcareService,
    });
  };

  const viewHealthcareService = (healthcareService: HealthcareService) => {
    if (isAuthorizedToEdit()) {
      openHealthcareServiceEditor(healthcareService);
      return;
    }

    setSelectedHealthcareService(healthcareService);
  };

  const editHealthcareService = (
    event: React.MouseEvent,
    healthcareService: HealthcareService,
  ) => {
    event.stopPropagation();
    openHealthcareServiceEditor(healthcareService);
  };

  const addHealthcareService = () => {
    openHealthcareServiceEditor(null);
  };

  const handleHealthcareServiceEditorComplete = () => {
    setHealthcareServiceEditor(null);
    void loadHealthcareServices();
  };

  const isAuthorizedToEdit = () => canManage("organization");

  const getServiceCategory = (healthcareService: HealthcareService): string => {
    if (
      !healthcareService.category ||
      healthcareService.category.length === 0
    ) {
      return "";
    }
    return formatFhirCodeableConcept(healthcareService.category[0]);
  };

  const getServiceType = (healthcareService: HealthcareService): string => {
    if (!healthcareService.type || healthcareService.type.length === 0) {
      return "";
    }
    return formatFhirCodeableConcept(healthcareService.type[0]);
  };

  const getSpecialties = (healthcareService: HealthcareService): string => {
    if (
      !healthcareService.specialty ||
      healthcareService.specialty.length === 0
    ) {
      return "";
    }

    const specialties = healthcareService.specialty.map((s) =>
      formatFhirCodeableConcept(s),
    );
    return specialties.join(", ");
  };

  return (
    <div>
      <div className="mb-4 flex flex-wrap items-start justify-between gap-3">
        <div className="min-w-0">
          <h1 className="ak-page-title">Services</h1>
          <p className="ak-page-title__sub">
            Browse the healthcare services offered and explore their details.
          </p>
        </div>
        {!isPatient && isAuthorizedToEdit() && (
          <button type="button" className="btn btn-blue" onClick={addHealthcareService}>
            <Plus />
            Add
          </button>
        )}
      </div>
      <div className="ak-page-body space-y-2 overflow-y-auto thin-scrollbar min-h-[calc(100vh-325px)] lg:min-h-[calc(100vh-310px)] max-h-[calc(100vh-536px)] md:max-h-[calc(100vh-280px)] lg:max-h-[calc(100vh-398px)]">
        {loading ? (
          <div className="space-y-1">
            {[...Array(5)].map((_, i) => (
              <div
                key={i}
                className="group rounded flex gap-3 p-2 items-center justify-between"
              >
                <div className="flex gap-3 items-center w-full">
                  <Skeleton className="h-12 w-[50px] rounded" />
                  <div className="flex-1 space-y-1 w-full">
                    <Skeleton className="h-5 w-full" />
                    <Skeleton className="h-5 w-full" />
                  </div>
                </div>
                <Skeleton className="h-12 w-12 rounded" />
              </div>
            ))}
          </div>
        ) : error ? (
          <div className="flex flex-col font-normal items-center justify-center p-8 text-center space-y-5">
            <Stethoscope className="h-16 w-16 text-secondary mt-6" />
            <div>
              <h3 className="ak-section-title mb-3">
                Could not load services
              </h3>
              <p className="text-secondary">Try again later.</p>
            </div>
            {/* Was a hand-rolled Tailwind primary (bg-primary + own padding/hover).
                `btn btn-blue` is the house treatment — same call as LocationsPage's
                identical Retry button in batch 28. */}
            <button
              type="button"
              className="btn btn-blue"
              onClick={() => window.location.reload()}
            >
              Retry
            </button>
          </div>
        ) : !loading && healthcareServicesList.length === 0 ? (
          <div className="flex flex-col items-center justify-center p-8 text-center space-y-5">
            <Stethoscope className="h-16 w-16 text-secondary mt-6" />
            <div>
              <h3 className="ak-section-title mb-3">No services found</h3>
              <p className="text-secondary text-sm">
                No healthcare services are currently available
              </p>
            </div>
          </div>
        ) : (
          healthcareServicesList.length !== 0 && (
            <div className="space-y-2">
              {healthcareServicesList.map(
                (healthcareService: HealthcareService) => {
                  const category = getServiceCategory(healthcareService);
                  const serviceType = getServiceType(healthcareService);
                  const specialties = getSpecialties(healthcareService);

                  return (
                    <div key={healthcareService.id}>
                      <div
                        role="button"
                        tabIndex={0}
                        onClick={() => viewHealthcareService(healthcareService)}
                        onKeyDown={(event: React.KeyboardEvent) => {
                          if (event.key !== 'Enter' && event.key !== ' ') return;
                          event.preventDefault();
                          viewHealthcareService(healthcareService);
                        }}
                        className="group rounded hover:bg-muted focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 flex gap-3 items-center justify-between p-2 cursor-pointer"
                      >
                        <div className="flex gap-3 items-center">
                          <Stethoscope
                            strokeWidth={1}
                            size={50}
                            className="bg-muted group-hover:bg-white rounded p-2 min-w-[50px]"
                          />
                          <div className="text-start text-sm">
                            <p className="font-semibold flex gap-2">
                              {healthcareService?.name}
                              <RowStatus tone={healthcareService?.active === true ? "plain" : "ended"}>
                                {healthcareService?.active === true ? "Active" : "Inactive"}
                              </RowStatus>
                            </p>
                            <div className="flex flex-wrap gap-1 items-center">
                              {category && (
                                <span className="text-secondary font-normal">
                                  {category}
                                </span>
                              )}
                              {serviceType && (
                                <span className="text-secondary text-sm font-normal">
                                  · {serviceType}
                                </span>
                              )}
                              {specialties && (
                                <span className="text-secondary text-sm font-normal">
                                  · {specialties}
                                </span>
                              )}
                              {healthcareService.active === false && (
                                <RowStatus tone="ended">Inactive</RowStatus>
                              )}
                            </div>
                          </div>
                          {isAuthorizedToEdit() && (
                            <div>
                              <button
                                type="button"
                                className="btn btn-blue-ghost-sm"
                                onClick={(event: React.MouseEvent) =>
                                  editHealthcareService(
                                    event,
                                    healthcareService,
                                  )
                                }
                              >
                                <Pencil />
                                Edit
                              </button>
                            </div>
                          )}
                        </div>
                        <div className="flex gap-3 text-secondary group-hover:text-foreground transition-colors">
                          <ChevronRight
                            size={30}
                            strokeWidth={1}
                            className="hover:text-primary"
                          />
                        </div>
                      </div>
                    </div>
                  );
                },
              )}
            </div>
          )
        )}
      </div>

      {healthcareServiceEditor && (
        <EditHealthcareServicePage
          key={`service-${healthcareServiceEditor.resourceId}`}
          presentation="modal"
          healthcareServiceId={healthcareServiceEditor.resourceId}
          initialHealthcareService={healthcareServiceEditor.healthcareService}
          onRequestClose={() => setHealthcareServiceEditor(null)}
          onSaved={handleHealthcareServiceEditorComplete}
          onDeleted={handleHealthcareServiceEditorComplete}
        />
      )}

      {selectedHealthcareService && isPatient && (
        <Sheet
          open={!!selectedHealthcareService}
          onOpenChange={(open) => {
            if (!open) setSelectedHealthcareService(null);
          }}
        >
          <SheetContent className="sm:max-w-[700px] w-4/4 p-0">
            <SheetTitle className="sr-only">Healthcare service details</SheetTitle>
            <FhirHealthcareServiceDisplay
              healthcareService={selectedHealthcareService}
              isOpen={true}
              onClose={() => setSelectedHealthcareService(null)}
              asModal={false}
            />
          </SheetContent>
        </Sheet>
      )}

      {/* For non-patient users, show the existing modal */}
      {selectedHealthcareService && !isPatient && (
        <FhirHealthcareServiceDisplay
          healthcareService={selectedHealthcareService}
          isOpen={!!selectedHealthcareService}
          onClose={() => {
            setSelectedHealthcareService(null);
          }}
        />
      )}
    </div>
  );
};

export default HealthcareServicesPage;

// import { useNavigate } from 'react-router-dom';
// import { HealthcareService } from 'fhir/r4';
// import { formatFhirCodeableConcept } from '../../../../utils/fhirCodeableConcept.tsx';
// import { AppSpinner, FhirHealthcareServiceDisplay, ScrollableTab } from '../../../../components';
// import {
// useFhirHealthcareServiceBroadcast,
// useFhirHealthcareServices,
// useFhirHealthcareServiceTargetedBroadcast
// } from '../../../../hooks';
// import { useAuthServiceContext, useHealthcareServiceServiceContext } from '../../../../services';
// import React from 'react';

// const HealthcareServicesPage = () => {
// // const { userRole, USER_ROLES } = useAuthServiceContext();
// const { getHealthcareServiceDisplay } = useHealthcareServiceServiceContext();
// const { loading, error, clearError, healthcareServicesList } = useFhirHealthcareServices();
// const [isGuideOpen, setIsGuideOpen] = useState<boolean>(false);
// const [selectedHealthcareService, setSelectedHealthcareService] = useState<HealthcareService | null>(null);
// const [showDisplayModal, setShowDisplayModal] = useState<boolean>(false);

// const isPatient = [USER_ROLES.PATIENT, USER_ROLES.RELATED_PERSON].includes(userRole as string);
// const spacerMargin = '24px';

// useFhirHealthcareServiceBroadcast();
// useFhirHealthcareServiceTargetedBroadcast({
// healthcareService: selectedHealthcareService || undefined,
// isOpen: showDisplayModal,
// onUpdate: (updatedHealthcareService) => {
// setSelectedHealthcareService(updatedHealthcareService);
// },
// onDelete: () => {
// setShowDisplayModal(false);
// setSelectedHealthcareService(null);
// }
// });

// const viewHealthcareService = (healthcareService: HealthcareService) => {
// setSelectedHealthcareService(healthcareService);
// setShowDisplayModal(true);
// };

// const editHealthcareService = (event: React.MouseEvent, healthcareService: HealthcareService) => {
// event.stopPropagation();
// navigate(healthcareService.id as string, {
// relative: 'route',
// state: {
// healthcareService: healthcareService
// }
// });
// };

// const addHealthcareService = () => {
// navigate('new', {
// relative: 'route',
// state: {
// healthcareService: null
// }
// });
// };

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

// const getServiceCategory = (healthcareService: HealthcareService): string => {
// if (!healthcareService.category || healthcareService.category.length === 0) {
// return '';
// }
// return formatFhirCodeableConcept(healthcareService.category[0]);
// };

// const getServiceType = (healthcareService: HealthcareService): string => {
// if (!healthcareService.type || healthcareService.type.length === 0) {
// return '';
// }
// return formatFhirCodeableConcept(healthcareService.type[0]);
// };

// const getSpecialties = (healthcareService: HealthcareService): string => {
// if (!healthcareService.specialty || healthcareService.specialty.length === 0) {
// return '';
// }

// const specialties = healthcareService.specialty.map(s => formatFhirCodeableConcept(s));
// return specialties.join(', ');
// };

// const getStatusDisplay = (healthcareService: HealthcareService): { text: string, color?: string } => {
// const isActive = healthcareService.active !== false;
// return isActive
// ? { text: 'Active', color: '#00a32a' }
//: { text: 'Inactive', color: '#cc1818' };
// };

// return (
// <div>
// {!isPatient && (
// <>
// <FhirGuide isOpen={isGuideOpen}
// onFinish={() => setIsGuideOpen(false)}
// resourceType="HealthcareService"/>

// <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={addHealthcareService}>
// Add
// </Button>
// </FlexItem>
// )}
// </Flex>
// <Spacer margin="8"/>
// </>
// )}

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

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

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

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

// <>
// {loading ? (
// <AppSpinner/>
// ): (
// <ScrollableTab>
// {healthcareServicesList.length !== 0 && (
// <ItemGroup isBordered isSeparated isRounded size='large'>
// {healthcareServicesList.map((healthcareService: HealthcareService) => {
// const displayTitle = getHealthcareServiceDisplay(healthcareService);
// const { text: statusText, color: statusColor } = getStatusDisplay(healthcareService);
// const category = getServiceCategory(healthcareService);
// const serviceType = getServiceType(healthcareService);
// const specialties = getSpecialties(healthcareService);

// return (
// <Item key={healthcareService.id}
// onClick={() => viewHealthcareService(healthcareService)}>
// <Flex>
// <FlexItem>
// <Icon icon={store}
// size={24}
// style={{
// marginRight: 12,
// color: statusColor
// }}/>
// </FlexItem>
// <FlexBlock>
// <Flex align="center" justify="space-between">
// <FlexItem>
// <Text style={{ fontWeight: 500 }}>
// {displayTitle}
// </Text>
// {category && (
// <Text variant="muted" style={{ display: 'block' }}>
// Category: {category}
// </Text>
// )}
// {serviceType && (
// <Text variant="muted" style={{ display: 'block' }}>
// Type: {serviceType}
// </Text>
// )}
// {specialties && (
// <Text variant="muted" style={{ display: 'block' }}>
// Specialties: {specialties}
// </Text>
// )}
// </FlexItem>
// {isAuthorizedToEdit() && (
// <FlexItem>
// <Button variant="secondary"
// size="small"
// icon={edit}
// onClick={(event: React.MouseEvent) => editHealthcareService(event, healthcareService)}>
// Edit
// </Button>
// </FlexItem>
// )}
// </Flex>
// </FlexBlock>
// </Flex>
// </Item>
// );
// })}
// </ItemGroup>
// )}
// </ScrollableTab>
// )}
// </>

// {selectedHealthcareService && (
// <FhirHealthcareServiceDisplay healthcareService={selectedHealthcareService}
// isOpen={showDisplayModal}
// onClose={() => {
// setShowDisplayModal(false);
// setSelectedHealthcareService(null);
// }}/>
// )}
// </div>
// );
// };

// export default HealthcareServicesPage;