import { useMemo } from "react";
import { useNavigate } from "react-router-dom";
import type { MedicationRequest, MedicationStatement } from "fhir/r4";
import { ChevronRight, Pill, Plus } from "lucide-react";
import { useFhirMedicationRequests, useFhirMedicationStatements } from "../../../../hooks";
import { EmptyState } from "../../../../components/ui/empty-state";
import { OrgBadge } from "../../../../components/ui/org-badge";
import { Skeleton } from "../../../../components/ui/skeleton";
import { relayServerFailure } from "../../../../utils/fetchFailureMessage";
import { usePracticeToday } from "../../../../hooks/usePracticeToday";
import { buildMedicationLists, currentSummary, fillByLine, type MedicationRow } from "./medicationRows";
import { RecordPracticeNote, recordPracticeId, useRecordPracticeView, useRetireOnPracticeChange } from "../../../../contexts/RecordPracticeContext";
import "./MedicationsOverview.css";

type MedicationRecord = MedicationRequest | MedicationStatement;
const isRequest = (record: MedicationRecord): record is MedicationRequest => record.resourceType === "MedicationRequest";
const isStatement = (record: MedicationRecord): record is MedicationStatement => record.resourceType === "MedicationStatement";

// A dose given in the room is not listed here: it belongs to the visit that gave it, and the page says so.
/** The fill deadline, said only once the prescribing practice's calendar is known. */
const FillByLine = ({ row }: { row: MedicationRow }) => {
  const practice = usePracticeToday(row.validUntil ? row.organizationId : undefined);
  if (practice.state !== "ready") return null;
  const line = fillByLine(row, practice.today, practice.zone);
  return line ? <span className="ak-meds__fill-by">{line}</span> : null;
};

const MedicationsOverview = () => {
  const navigate = useNavigate();
  const requests = useFhirMedicationRequests();
  const statements = useFhirMedicationStatements();

  // A read that has not answered is still loading, never an empty list.
  const loading = requests.loading || statements.loading || !requests.answered || !statements.answered;
  const failure = requests.error || statements.error;
  // A 403 cannot be retried into a list, so it is named rather than offered again.
  const refused = Boolean((requests.error && requests.refused) || (statements.error && statements.refused));
  // The record's practice context: its own medicines under a named practice; the empty state speaks for the whole record.
  // Read from the records themselves, since a statement's row does not carry the practice it was written at.
  const records = useMemo<MedicationRecord[]>(
    () => [...requests.medicationRequestsList, ...statements.medicationStatementsList],
    [requests.medicationRequestsList, statements.medicationStatementsList],
  );
  const practiceView = useRecordPracticeView(records, recordPracticeId);
  // A medicine opens on its own page, so nothing on this list is left open to close.
  useRetireOnPracticeChange(() => undefined);
  const wholeRecord = buildMedicationLists(
    requests.medicationRequestsList,
    statements.medicationStatementsList,
  );
  const lists = buildMedicationLists(
    practiceView.shown.filter(isRequest),
    practiceView.shown.filter(isStatement),
  );

  const rowButton = (row: MedicationRow) => {
    const className = `ak-card ak-card--edge ak-meds__row${row.own ? " ak-meds__row--own" : ""}`;
    const body = (
      <span className="ak-meds__text">
        <span className="ak-card__title ak-card__title--lead ak-meds__name">{row.name}</span>
        {row.schedule && <span className="ak-meds__schedule">{row.schedule}</span>}
        {/* The practice travels with whoever is named (Spencer, 2026-08-29), so a medicine the
            patient added names none - there is no clinician on it to travel with. */}
        {row.organization && !row.own && (
          <span className="ak-org-line ak-meds__org">
            <OrgBadge name={row.organization} />
            <span className="ak-org-line__name">{row.organization}</span>
          </span>
        )}
        <span className="ak-card__description ak-meds__by">{row.provenance}</span>
        <FillByLine row={row} />
      </span>
    );
    // A record with no id is still shown by its name; it has no page to open.
    return row.path ? (
      <button key={row.id} type="button" className={className} onClick={() => navigate(row.path as string)}>
        {body}
        <ChevronRight className="ak-meds__chevron size-4" aria-hidden />
      </button>
    ) : (
      <div key={row.id} className={className}>{body}</div>
    );
  };
  // Nothing current is not nothing recorded: other and past records may still be on the list below.
  const anyRecorded = wholeRecord.current.length + wholeRecord.other.length + wholeRecord.past.length > 0;

  const addButton = (
    <button type="button" className="ak-link ak-meds__add" onClick={() => navigate("medication-statements/new")}>
      <span className="ak-meds__plus" aria-hidden>
        <Plus />
      </span>
      Add a medicine you take
    </button>
  );

  if (failure) {
    return (
      <EmptyState
        icon={Pill}
        title={refused ? "Medicines are not available to you" : "We could not load your medicines"}
        description={refused ? failure : relayServerFailure(failure, "Please try again in a moment.")}
      />
    );
  }

  return (
    <div className="ak-meds">
      <div className="ak-meds__col">
        <div className="ak-section-head ak-meds__h3">
          <h2 className="ak-section-title">Current prescriptions and reported use</h2>
          <span className="ak-section-head__count">{currentSummary(lists)}</span>
        </div>
        <div>
          <RecordPracticeNote view={practiceView} />
          {/* The fetch polls, so `loading` outlives the first result. Only the list waits - the
              headings and the right-hand column are the same whether anything has arrived. */}
          {lists.current.length > 0 ? (
            lists.current.map(rowButton)
          ) : loading ? (
            <div className="ak-card ak-meds__empty">
              <Skeleton className="h-5 w-56" />
              <Skeleton className="mt-2 h-4 w-40" />
            </div>
          ) : wholeRecord.current.length === 0 && (
            <EmptyState
              size="compact"
              className="ak-card ak-meds__empty"
              title={anyRecorded ? "No current prescriptions or reported use found" : "Nothing on your list yet"}
              description={anyRecorded
                ? "Other medication records are listed below."
                : "Add anything you take, including what you bought yourself."}
            />
          )}
          {addButton}
        </div>

        {lists.other.length > 0 && (
          <>
            <h2 className="ak-section-title ak-meds__h3">Other medication records</h2>
            <div>{lists.other.map(rowButton)}</div>
          </>
        )}

        {lists.past.length > 0 && (
          <>
            <h2 className="ak-section-title ak-meds__h3">Past medication records</h2>
            <div className="ak-meds__past">{lists.past.map(rowButton)}</div>
          </>
        )}
      </div>

      <div className="ak-meds__col">
        <h2 className="ak-section-title ak-meds__h3">What is not on this page</h2>
        <div className="ak-meds__aside">
          <div>
            <b>Medicines given to you at a visit</b>
            <span>An injection, a drip, a dose in the room</span>
            <button type="button" className="ak-link ak-meds__link" onClick={() => navigate("/dashboard/patient")}>
              Inside the visit that gave it · My Visits &amp; Results
            </button>
          </div>
          <div>
            <b>Vaccinations</b>
            <span>Including what is due</span>
            <button type="button" className="ak-link ak-meds__link" onClick={() => navigate("/dashboard/patient?lens=now")}>
              On the Now lens of your record
            </button>
          </div>
        </div>

        <h2 className="ak-section-title ak-meds__h3">If you stop taking a medication</h2>
        <div className="ak-meds__aside">
          <span>Update the medication record so your healthcare providers are aware.</span>
        </div>
      </div>
    </div>
  );
};

export default MedicationsOverview;