import { availableRecordEmpty, useChartRecordStanding } from "../../../../hooks/useRecordAccessStanding";
import { useState } from "react";
import { useNavigate } from "react-router-dom";
import { MedicationRequest } from "fhir/r4";
import { FhirMedicationRequestDisplay } from "../../../../components";
import {
  useFhirMedicationRequestBroadcast,
  useFhirMedicationRequests,
  useFhirMedicationRequestTargetedBroadcast,
} from "../../../../hooks";
import { useAuthServiceContext } from "../../../../services";
import { EmptyState } from "../../../../components/ui/empty-state";
import { Skeleton } from "../../../../components/ui/skeleton";
import { ChevronRight, Edit, FileText, Pill, Plus } from "lucide-react";
import { Button } from "../../../../components/ui/button";
import { Sheet, SheetContent } from "../../../../components/ui/sheet";
import { mayEditRecord } from '../../../../utils/recordEditability';
import { useSeatStanding } from '../../../../utils/seatStanding';
import { SourcePractice } from '../../../../components/ui/source-practice';
import { medicationNameOf } from '../../../../utils/medicationName';
import { RecordPracticeNote, recordPracticeId, useRecordPracticeView, useRetireOnPracticeChange } from '../../../../contexts/RecordPracticeContext';

const MedicationRequests = () => {
  const { standing: recordStanding } = useChartRecordStanding();
  const navigate = useNavigate();
  const { userRole, USER_ROLES, practitionerRoles } = useAuthServiceContext();
  const seatStanding = useSeatStanding();
  const { loading, error, medicationRequestsList, freshness: recordFreshness } = useFhirMedicationRequests();
  const [selectedMedicationRequest, setSelectedMedicationRequest] =
    useState<MedicationRequest | null>(null);
  const [showDisplayModal, setShowDisplayModal] = useState<boolean>(false);
  // The record's practice context: its own prescriptions under a named practice; the empty state speaks for the whole record.
  const practiceView = useRecordPracticeView(medicationRequestsList, recordPracticeId);
  useRetireOnPracticeChange(() => { setShowDisplayModal(false); setSelectedMedicationRequest(null); });

  useFhirMedicationRequestBroadcast();
  useFhirMedicationRequestTargetedBroadcast({
    medicationRequest: selectedMedicationRequest || undefined,
    isOpen: showDisplayModal,
    onUpdate: (updatedMedicationRequest) => {
      setSelectedMedicationRequest(updatedMedicationRequest);
    },
    onDelete: () => {
      setShowDisplayModal(false);
      setSelectedMedicationRequest(null);
    },
  });

  const viewMedicationRequest = (medicationRequest: MedicationRequest) => {
    setSelectedMedicationRequest(medicationRequest);
    setShowDisplayModal(true);
  };

  const editMedicationRequest = (
    event: React.MouseEvent,
    medicationRequest: MedicationRequest,
  ) => {
    event.stopPropagation();
    navigate(medicationRequest.id as string, { relative: "path" });
  };

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

  const roleAllowsEdit = () => {
    return userRole && [USER_ROLES.PRACTITIONER].includes(userRole as string);
  };

  /*
   * AND THE ROLE IS NOT THE RULE THE SERVER APPLIES.
   *
   * Writing a MedicationRequest needs a paid clinician seat, resolved per request by `callerMayWrite`. The role
   * check above passes for an unseated practitioner - a medical assistant, a nurse rooming patients,
   * somebody whose seat was turned off this morning - so the page offered Add and Edit, and the save
   * came back refused. A refusal that arrives after the typing has already spent the work.
   */
  const seat = mayEditRecord({ seatStanding,
      resourceType: 'MedicationRequest',
      viewerIsStaff: Boolean(userRole)
          && ![USER_ROLES.PATIENT, USER_ROLES.RELATED_PERSON].includes(userRole as string),
      practitionerRoles,
  });

  const isAuthorizedToEdit = () => roleAllowsEdit() && seat.mayEdit;

  // WHOSE SCREEN THIS IS. The same component is the patient's "Prescriptions" and the clinician's
  // "Medication Requests" - two audiences, and the patient-terminology ruling covers only one of them.
  const isPatientOrProxy = [USER_ROLES.PATIENT, USER_ROLES.RELATED_PERSON].includes(userRole as string);

  return (
    <div className="p-2 space-y-3">
      <div className="flex justify-between items-center">
        <div className="mb-2 lg:mb-0 sm:mb-0">
          <h2 className="ak-section-title">
            {isPatientOrProxy ? "Prescriptions" : "Medication Requests"}
          </h2>
          <p className="text-sm">
            {isPatientOrProxy
              ? "Medicines a clinician has prescribed for you."
              : "Prescriptions and medication orders for patient treatment plans."}
          </p>
        </div>
        <div className="flex justify-end text-end">
          {/* SAID, NOT WITHHELD. A control that simply disappears reads as a broken screen or as a
              permission the reader has lost, and both send them to an administrator to check permissions
              that are already correct. A seat is nameable, and a practice can enable one in a minute. */}
          {roleAllowsEdit() && !seat.mayEdit && (
              <p className="text-sm text-secondary max-w-[22rem] text-right">{seat.reason}</p>
          )}
          {isAuthorizedToEdit() && (
            <Button onClick={addMedicationRequest}>
              <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]">
          <FileText strokeWidth={1} size={50} className="mx-auto mb-5" />{" "}
          <div>
            <h3 className="ak-section-title mb-3">
              Could not load Medication requests
            </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 && medicationRequestsList.length === 0 ? (
        /* THE OLD COPY POINTED AT A CONTROL THE READER COULD NOT HAVE. It said "Click Add to add a
 medication request" to everyone - but `isAuthorizedToEdit` is PRACTITIONER-only, so a
 patient was told to press a button that is not on their screen. That is the failure the
 shared EmptyState's own note warns about: the next step has to be reachable FROM HERE.
 It also stated its title twice, and called a prescription a "medication request" on a
 patient's own record. */
        <EmptyState
          icon={FileText}
          title={isPatientOrProxy ? "No prescriptions yet" : availableRecordEmpty("No medication requests yet", recordStanding, recordFreshness)}
          description={
            isPatientOrProxy
              ? "Medicines a clinician prescribes for you appear here. To ask about one, message your practice."
              : "Prescribe one with Add above."
          }
          data-testid="medication-requests-empty"
        />
      ) : loading ? (
        <div className="space-y-2 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-4 w-full rounded"></Skeleton>
              </div>
              <Skeleton className="h-12 w-12 rounded-full"></Skeleton>
            </div>
          ))}
        </div>
      ) : (
        medicationRequestsList.length !== 0 && (
          <div className="space-y-2 mt-3">
            <RecordPracticeNote view={practiceView} />
            {practiceView.shown.map(
              (medicationRequest: MedicationRequest) => {
                return (
                  <div
                    className="focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 flex gap-2 justify-between items-center"
                    key={medicationRequest.id}
                    role="button"
                    tabIndex={0}
                    onClick={() => viewMedicationRequest(medicationRequest)}
                    onKeyDown={(event: React.KeyboardEvent) => {
                      if (event.key !== 'Enter' && event.key !== ' ') return;
                      event.preventDefault();
                      viewMedicationRequest(medicationRequest);
                    }}
                  >
                    <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">
                        <Pill
                          size={40}
                          className="bg-green-soft text-sage-ink p-2 rounded"
                        />

                        <div className="space-y-1">
                          <p className="font-bold flex flex-wrap gap-x-4 gap-y-1 items-center text-lg">
                            <span className="min-w-0 break-words">
                              {medicationNameOf(medicationRequest) ?? "No name provided"}
                            </span>
                            <span className="chip capitalize">
                              {medicationRequest.status
                                ? medicationRequest.status
                                : "Status unknown"}
                            </span>
                          </p>
                          <p className="text-sm text-secondary capitalize">
                            {medicationRequest.intent &&
                              medicationRequest.intent}
                          </p>{" "}
                          <p className="text-sm text-secondary"><SourcePractice resource={medicationRequest} /></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) =>
                            editMedicationRequest(event, medicationRequest)
                          }
                          variant="outline"
                        >
                          <Edit /> Edit
                        </Button>
                      </div>
                    )}
                  </div>
                );
              },
            )}
          </div>
        )
      )}

      {selectedMedicationRequest && (
        <Sheet
          open={!!selectedMedicationRequest}
          onOpenChange={(open) => {
            if (!open) setSelectedMedicationRequest(null);
          }}
        >
          <SheetContent className="sm:max-w-[700px] sm:min-w-[700px] w-4/4">
            <FhirMedicationRequestDisplay
              medicationRequest={selectedMedicationRequest}
              isOpen={showDisplayModal}
              onClose={() => {
                setShowDisplayModal(false);
                setSelectedMedicationRequest(null);
              }}
            />
          </SheetContent>
        </Sheet>
      )}
    </div>
  );
};

export default MedicationRequests;

// import { useNavigate } from 'react-router-dom';
// import { MedicationRequest } from 'fhir/r4';
// import { AppSpinner, FhirMedicationRequestDisplay, ScrollableTab } from '../../../../components';
// import {
// useFhirMedicationRequestBroadcast,
// useFhirMedicationRequests,
// useFhirMedicationRequestTargetedBroadcast
// } from '../../../../hooks';
// import { useAuthServiceContext, useMedicationRequestServiceContext } from '../../../../services';

// const MedicationRequests = () => {
// const navigate = useNavigate();
// const { userRole, USER_ROLES } = useAuthServiceContext();
// const { getMedicationRequestDisplay } = useMedicationRequestServiceContext();
// const { loading, error, clearError, medicationRequestsList } = useFhirMedicationRequests();
// const [isGuideOpen, setIsGuideOpen] = useState<boolean>(false);
// const [selectedMedicationRequest, setSelectedMedicationRequest] = useState<MedicationRequest | null>(null);
// const [showDisplayModal, setShowDisplayModal] = useState<boolean>(false);
// const spacerMargin = '24px';

// useFhirMedicationRequestBroadcast();
// useFhirMedicationRequestTargetedBroadcast({
// medicationRequest: selectedMedicationRequest || undefined,
// isOpen: showDisplayModal,
// onUpdate: (updatedMedicationRequest) => {
// setSelectedMedicationRequest(updatedMedicationRequest);
// },
// onDelete: () => {
// setShowDisplayModal(false);
// setSelectedMedicationRequest(null);
// }
// });

// const viewMedicationRequest = (medicationRequest: MedicationRequest) => {
// setSelectedMedicationRequest(medicationRequest);
// setShowDisplayModal(true);
// };

// const editMedicationRequest = (event: React.MouseEvent, medicationRequest: MedicationRequest) => {
// event.stopPropagation();
// navigate(medicationRequest.id as string, { relative: 'path' });
// };

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

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

// const getStatusDisplay = (medicationRequest: MedicationRequest): { isActive: boolean, text: string, color?: string } => {
// if (!medicationRequest) return { isActive: false, text: '' };

// switch (medicationRequest.status) {
// case 'active':
// return { isActive: true, text: 'Active', color: '#00a32a' };
// case 'on-hold':
// return { isActive: false, text: 'On Hold', color: '#e39700' };
// case 'cancelled':
// return { isActive: false, text: 'Cancelled', color: '#cc1818' };
// case 'completed':
// return { isActive: false, text: 'Completed', color: '#4f94d4' };
// case 'entered-in-error':
// return { isActive: false, text: 'Error', color: '#cc1818' };
// case 'stopped':
// return { isActive: false, text: 'Stopped', color: '#cc1818' };
// case 'draft':
// return { isActive: false, text: 'Draft', color: '#757575' };
// case 'unknown':
// default:
// return { isActive: false, text: 'Unknown' };
// }
// };

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

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

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

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

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

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

// <>
// {loading ? (
// <AppSpinner/>
// ): (
// <ScrollableTab>
// {medicationRequestsList.length !== 0 && (
// <ItemGroup isBordered isSeparated isRounded size='large'>
// {medicationRequestsList.map((medicationRequest: MedicationRequest) => {
// const displayTitle = getMedicationRequestDisplay(medicationRequest);
// const dosageCount = medicationRequest.dosageInstruction?.length || 0;
// const { isActive, text: statusText, color: statusColor } = getStatusDisplay(medicationRequest);
// const intent = medicationRequest.intent;

// return (
// <Item key={medicationRequest.id}
// onClick={() => viewMedicationRequest(medicationRequest)}>
// <Flex>
// <FlexItem>
// <Icon icon={info}
// size={24}
// style={{
// marginRight: 12,
// color: statusColor
// }}/>
// </FlexItem>
// <FlexBlock>
// <Flex align="center" justify="space-between">
// <FlexItem>
// <Text style={{ fontWeight: 500 }}>
// {displayTitle}
// </Text>
// {dosageCount > 0 && (
// <Text variant="muted" style={{ display: 'block' }}>
// {dosageCount} dosage{dosageCount !== 1 ? 's': ''}
// </Text>
// )}
// {intent && (
// <Text variant="muted" style={{ display: 'block' }}>
// Intent: {intent}
// </Text>
// )}
// </FlexItem>
// {isAuthorizedToEdit() && (
// <FlexItem>
// <Button
// variant="secondary"
// size="small"
// icon={edit}
// onClick={(event: React.MouseEvent) => editMedicationRequest(event, medicationRequest)}
// >
// Edit
// </Button>
// </FlexItem>
// )}
// </Flex>
// </FlexBlock>
// </Flex>
// </Item>
// );
// })}
// </ItemGroup>
// )}
// </ScrollableTab>
// )}
// </>

// {selectedMedicationRequest && (
// <FhirMedicationRequestDisplay
// medicationRequest={selectedMedicationRequest}
// isOpen={showDisplayModal}
// onClose={() => {
// setShowDisplayModal(false);
// setSelectedMedicationRequest(null);
// }}
// />
// )}
// </View>
// );
// };

// export default MedicationRequests;