import {
  ArrowRight,
  CalendarCheck2,
  Clock4,
  Plus,
  Stethoscope,
} from "lucide-react";
import { Card, CardContent, CardDescription, CardTitle } from "../ui/card";
import { Button } from "../ui/button";
import { Link } from "react-router-dom";
import { useCallback, useMemo, useState } from "react";
import { Skeleton } from "../ui/skeleton";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogTitle,
  DialogTrigger,
} from "../ui/dialog";
import PatientBookAppointment from "../../pages/DashboardPage/PatientsPage/PatientPage/PatientBookAppointment/PatientBookAppointment.tsx";
import {
  useFhirAppointmentBroadcast,
  useFhirAppointments,
  useFhirPractitioners,
  useFhirTasks,
} from "../../hooks";
import { Appointment, Practitioner } from "fhir/r4";
import {
  useAppointmentServiceContext,
  useAuthServiceContext,
} from "../../services";
import { getFhirPhotoUrl } from "../../utils/fhirPhoto.ts";
import { formatFhirHumanName } from "../../utils/fhirHumanName.tsx";
import { categorizePatientAppointments, isAppointmentHappeningNow } from "../../utils/patientAppointmentCategorization.ts";
import PatientAppointmentDialog from "../appointments/PatientAppointmentDialog.tsx";
import AppointmentTaskList from "../appointments/AppointmentTaskList.tsx";
import { tasksByAppointmentId } from "../../utils/appointmentTasks.ts";
import doctorImage from "../../../assets/doctor1.jpg";
import { ORG_LOGO_EXTENSION_URL as ORGANIZATION_LOGO_EXTENSION_URL } from "../../config/organizationExtensions";
import { appointmentSubjectLine } from '../../utils/appointmentSubject';

// THE STATUS SET, THE TITLE RULE AND THE TASK BLOCK MOVED OUT. This was the ONE surface of
// three that showed a patient what was due before a visit - the dialog you get by clicking this card
// showed none, and the appointments list never had it at all. Spencer's rule is that it belongs to the
// appointment ROW wherever it appears, so it now lives in `utils/appointmentTasks.ts` +
// `components/appointments/AppointmentTaskList.tsx` and all three read it.
// Do not reintroduce a local copy here; this file's job is the card, not the rule.

const normalizePractitionerReference = (reference?: string): string | undefined => {
  if (!reference) {
    return undefined;
  }

  const match = reference.match(
    /(?:^|\/)(Practitioner|PractitionerRole)\/([^/?#]+)/,
  );

  return match ? `${match[1]}/${match[2]}` : undefined;
};

const AppointmentCard = () => {
  const { wpOrganization } = useAuthServiceContext();
  const { loading, error, appointmentsList } = useFhirAppointments();
  const { practitionersList } = useFhirPractitioners();
  const { tasksList } = useFhirTasks();
  const { setAppointmentsList } = useAppointmentServiceContext();
  const [showBookingModal, setShowBookingModal] = useState(false);
  // R6 / - the appointment a patient clicked, opened HERE rather than navigated to.
  const [openedAppointment, setOpenedAppointment] = useState<Appointment | undefined>();

  const organization = wpOrganization.current;
  const organizationLogo = organization?.extension?.find(
    (extension) => extension.url === ORGANIZATION_LOGO_EXTENSION_URL,
  )?.valueAttachment;
  const organizationImageUrl = getFhirPhotoUrl(
    organizationLogo,
    "organization",
  );
  const organizationName = organization?.name?.trim() || "Healthcare Organization";

  const practitionersByReference = useMemo(() => {
    const practitionerMap = new Map<string, Practitioner>();

    practitionersList.forEach(({ practitioner, roles }) => {
      if (practitioner.id) {
        practitionerMap.set(`Practitioner/${practitioner.id}`, practitioner);
      }

      roles.forEach((role) => {
        if (role.id) {
          practitionerMap.set(`PractitionerRole/${role.id}`, practitioner);
        }
      });
    });

    return practitionerMap;
  }, [practitionersList]);

  const upsertAppointment = useCallback(
    (appointment: Appointment) => {
      setAppointmentsList((currentAppointments) => {
        const appointmentExists = currentAppointments.some(
          (currentAppointment) => currentAppointment.id === appointment.id,
        );

        if (!appointmentExists) {
          return [...currentAppointments, appointment];
        }

        return currentAppointments.map((currentAppointment) =>
          currentAppointment.id === appointment.id
            ? appointment
            : currentAppointment,
        );
      });
    },
    [setAppointmentsList],
  );

  const removeAppointment = useCallback(
    (appointment: Appointment) => {
      setAppointmentsList((currentAppointments) =>
        currentAppointments.filter(
          (currentAppointment) => currentAppointment.id !== appointment.id,
        ),
      );
    },
    [setAppointmentsList],
  );

  useFhirAppointmentBroadcast({
    onCreate: upsertAppointment,
    onUpdate: upsertAppointment,
    onDelete: removeAppointment,
  });

  const categorizedAppointments = useMemo(
    () => categorizePatientAppointments(appointmentsList),
    [appointmentsList],
  );

  const appointmentTasksByAppointmentId = useMemo(
    () => tasksByAppointmentId(tasksList ?? [], appointmentsList ?? []),
    [appointmentsList, tasksList],
  );

  const formatDate = (dateString: string | undefined): string => {
    if (!dateString) return "No date available";
    const date = new Date(dateString);
    return date.toLocaleDateString("en-US", {
      weekday: "long",
      year: "numeric",
      month: "long",
      day: "numeric",
    });
  };

  const formatTime = (dateString: string | undefined): string => {
    if (!dateString) return "No time available";
    const date = new Date(dateString);
    return date.toLocaleTimeString("en-US", {
      hour: "2-digit",
      minute: "2-digit",
      hour12: true,
    });
  };

  const getDaysDifference = (dateString: string | undefined): string => {
    if (!dateString) return "No date available";
    const appointmentDate = new Date(dateString);
    const now = new Date();
    // Compare calendar days (midnight-to-midnight), not raw time - otherwise an appointment later *today* rounds
    // up to "Tomorrow".
    const appointmentDayStart = new Date(
      appointmentDate.getFullYear(),
      appointmentDate.getMonth(),
      appointmentDate.getDate(),
    );
    const todayStart = new Date(now.getFullYear(), now.getMonth(), now.getDate());
    const diffDays = Math.round(
      (appointmentDayStart.getTime() - todayStart.getTime()) / (1000 * 60 * 60 * 24),
    );

    if (diffDays === 0) return "Today";
    if (diffDays === 1) return "Tomorrow";
    if (diffDays > 1) return `In ${diffDays} days`;
    if (diffDays === -1) return "Yesterday";
    return `${Math.abs(diffDays)} days ago`;
  };

  const getPractitionerParticipant = (
    participants: Appointment["participant"],
  ) =>
    participants.find(
      (participant) =>
        participant.actor?.reference?.startsWith("Practitioner/") ||
        participant.actor?.reference?.startsWith("PractitionerRole/") ||
        participant.type?.[0]?.text === "primary performer",
    );

  const getPractitionerName = (
    participants: Appointment["participant"],
  ): string => {
    const participant = getPractitionerParticipant(participants);
    // Resolve the name live from the loaded practitioner record (same map that drives the photo);
    // the denormalized actor.display is only a fallback, since it goes stale after a rename.
    const reference = normalizePractitionerReference(
      participant?.actor?.reference,
    );
    const practitioner = reference
      ? practitionersByReference.get(reference)
      : undefined;

    return formatFhirHumanName(practitioner?.name, {
      emptyText: participant?.actor?.display?.trim() || "Unknown Practitioner",
    });
  };

  const getPractitionerImageUrl = (appointment: Appointment): string => {
    const practitionerReference = normalizePractitionerReference(
      getPractitionerParticipant(appointment.participant)?.actor?.reference,
    );
    const practitionerPhoto = practitionerReference
      ? practitionersByReference.get(practitionerReference)?.photo?.[0]
      : undefined;

    return practitionerPhoto
      ? getFhirPhotoUrl(practitionerPhoto, "practitioner")
      : doctorImage;
  };

  const getSpecialty = (appointment: Appointment): string => {
    return (
      appointment.specialty?.[0]?.text ||
      appointment.serviceCategory?.[0]?.text ||
      "Practitioner"
    );
  };

  // WHAT THE VISIT IS FOR, from the one shared helper - see utils/appointmentSubject. The fallback here
  // used to name a check-up nobody had booked, on any appointment that carried no type at all.
  const getAppointmentType = (appointment: Appointment): string =>
    appointmentSubjectLine(appointment);

  const renderAppointmentHeader = (className: string) => (
    // / B10 - the section carries the heading, not the empty-state message inside it.
    <CardTitle as="h2" className={className}>
      <div className="flex gap-2">Upcoming Appointments</div>
      <Dialog open={showBookingModal} onOpenChange={setShowBookingModal}>
        <DialogTrigger asChild>
          <Button className="btn btn-blue">
            <Plus size={16} /> Book Appointment
          </Button>
        </DialogTrigger>
        <DialogContent className="p-0">
          <DialogTitle className="sr-only">Book Appointment</DialogTitle>
          <DialogDescription className="sr-only">
            Select a practitioner, appointment type, date, and time.
          </DialogDescription>
          <div className="h-full overflow-y-auto thin-scrollbar">
            <PatientBookAppointment
              embedded
              onClose={() => setShowBookingModal(false)}
            />
          </div>
        </DialogContent>
      </Dialog>
    </CardTitle>
  );

  if (loading)
    return (
      <Card className="gap-3">
        {renderAppointmentHeader(
          "text-start flex justify-between items-center gap-3",
        )}
        <CardContent className="items-center">
          <CardDescription className="text-center justify-center space-y-5 items-center overflow-y-auto thin-scrollbar lg:min-h-[calc(100vh-177px)] max-h-[calc(100vh-400px)] md:max-h-[calc(100vh-180px)] lg:max-h-[calc(100vh-129px)]">
            {Array.from({ length: 2 }).map((_, i) => (
              <Card
                key={i}
                className="border p-3 gap-2 border-green-600 bg-white"
              >
                <CardTitle className="space-y-2 text-start text-lg border-b pb-3">
                  <div className="flex gap-2 justify-between items-center">
                    <Skeleton className="h-5 rounded w-2/4" />
                    <Skeleton className="h-5 rounded w-2/4" />
                  </div>
                  <Skeleton className="h-5 rounded w-2/4" />
                </CardTitle>
                <CardDescription className="text-start">
                  <div className="flex gap-3">
                    <Skeleton className="h-13 w-1/6 rounded" />
                    <div className="flex flex-col w-2/6 gap-2 justify-between items-center">
                      <Skeleton className="h-5 rounded w-full" />
                      <Skeleton className="h-5 rounded w-full" />
                    </div>
                    <div className="flex flex-col w-3/6 gap-2 justify-between items-center">
                      <Skeleton className="h-5 rounded w-full" />
                      <Skeleton className="h-5 rounded w-full" />
                    </div>
                  </div>
                  <div className="gap-2 flex-1 mt-3">
                    <Skeleton className="h-5 rounded w-2/4" />
                    <Skeleton className="h-5 rounded w-2/4" />
                  </div>
                </CardDescription>
              </Card>
            ))}
          </CardDescription>
        </CardContent>
      </Card>
    );

  if (error) {
    return (
      <Card className="gap-3">
        {renderAppointmentHeader(
          "text-start flex justify-between items-center gap-3",
        )}
        <CardContent className="items-center">
          <CardDescription className="flex flex-col items-center justify-center p-8 text-center space-y-4 overflow-y-auto thin-scrollbar lg:min-h-[calc(100vh-177px)] max-h-[calc(100vh-400px)] md:max-h-[calc(100vh-180px)] lg:max-h-[calc(100vh-129px)]">
            <CalendarCheck2 className="h-16 w-16 text-secondary" />
            <div>
              <h3 className="text-lg font-semibold mb-3">
                Could not load appointments
              </h3>
              <p className="text-secondary">Try again later.</p>
            </div>
            <Button
              className="btn btn-blue"
              onClick={() => window.location.reload()}
            >
              Retry
            </Button>
          </CardDescription>
        </CardContent>
      </Card>
    );
  }

  return (
    <div className="items-start items-star">
      {categorizedAppointments.upcoming.length === 0 ? (
        <Card className="gap-3">
          {renderAppointmentHeader(
            "text-start flex justify-between items-center gap-3",
          )}
          <CardContent className="items-center">
            <CardDescription className="flex flex-col items-center justify-center p-8 text-center space-y-4 overflow-y-auto thin-scrollbar lg:min-h-[calc(100vh-177px)] max-h-[calc(100vh-400px)] md:max-h-[calc(100vh-180px)] lg:max-h-[calc(100vh-129px)]">
              <CalendarCheck2 size={30} className="text-center mx-auto mb-5" />
              <div className="mb-3">
                {/* Card 240 / B10 — was an <h2>, which put "what you do not have" into the document
                    outline while the section itself had no heading at all. Styling unchanged. */}
                <p className="font-bold text-xl mb-2">
                  No Upcoming Appointments
                </p>
                <p className="text-sm">
                  Book an appointment to get started with your care.
                </p>
              </div>
            </CardDescription>
          </CardContent>
        </Card>
      ) : (
        <Card className="col-span-12 gap-1">
          {renderAppointmentHeader(
            "border-b pb-4 text-start px-3 flex justify-between items-center gap-3",
          )}
          <CardDescription className="p-2 text-center justify-center items-center overflow-y-auto thin-scrollbar min-h-[calc(100vh-350px)] lg:min-h-[calc(100vh-187px)] max-h-[calc(100vh-350px)] md:max-h-[calc(100vh-180px)] lg:max-h-[calc(100vh-189px)]">
            {categorizedAppointments.upcoming.map((appointment) => {
              const appointmentTasks = appointment.id
                ? appointmentTasksByAppointmentId.get(appointment.id) || []
                : [];
              const practitionerName = getPractitionerName(
                appointment.participant,
              );
              const practitionerImageUrl = getPractitionerImageUrl(appointment);

              return (
                <Card
                  key={appointment.id || appointment.start}
                  className="p-3 mb-2 gap-2 border-2 border-success bg-white cursor-pointer"
                  // - THIS USED TO `navigate("/dashboard/my-appointments")`, which dumped the
                  // patient on the LIST where they had to find the same appointment and click it again.
                  // Spencer: *"we're implementing new design and losing functionality."* It is the worst
                  // of the four instances precisely because nothing looked broken - losing a modal looks
                  // like navigation, and navigation looks intentional.
                  // `role="button"`, not `role="link"`: it opens something in place now, and a link
                  // promises a destination.
                  role="button"
                  tabIndex={0}
                  onClick={() => setOpenedAppointment(appointment)}
                  onKeyDown={(event) => {
                    if (event.target !== event.currentTarget) {
                      return;
                    }

                    if (event.key === "Enter" || event.key === " ") {
                      event.preventDefault();
                      setOpenedAppointment(appointment);
                    }
                  }}
                >
                  <CardTitle className="space-y-2 font-normal text-start text-lg border-b pb-3">
                    <div className="flex justify-between text-green-600 items-center">
                      <p>{formatDate(appointment?.start)}</p>
                      {/* 🚨 Card 301 — "Today" is TRUE for a visit that is running and is not the useful
                          thing to say about it. This list is the DOOR to a video visit: you join during
                          the appointment, so the one fact worth surfacing at that moment is that it is
                          happening. ⭐ Reuses the existing badge rather than inventing a treatment — the
                          colour decisions are settled elsewhere and this needs none of them. */}
                      <p className="text-sage-ink bg-green-soft text-sm px-2 py-1 rounded">
                        {isAppointmentHappeningNow(appointment)
                          ? 'Happening now'
                          : getDaysDifference(appointment?.start)}
                      </p>
                    </div>
                    <div className="flex flex-wrap items-center justify-between gap-3">
                      <p className="text-secondary flex items-center gap-2">
                        <Clock4 size={20} /> {formatTime(appointment?.start)}
                      </p>
                      <p className="flex items-center gap-2 text-sm">
                        <Stethoscope size={15} />
                        {getAppointmentType(appointment)}
                      </p>
                    </div>
                  </CardTitle>
                  <CardDescription className="text-start">
                    <div className="grid grid-cols-1 gap-3 md:grid-cols-2">
                      <div className="flex min-w-0 gap-2">
                        <img
                          className="w-13 h-13 rounded object-cover shrink-0"
                          src={organizationImageUrl}
                          alt={`${organizationName} logo`}
                        />
                        <div className="min-w-0 gap-2">
                          <p className="text-lg break-words">
                            {organizationName}
                          </p>
                          <p className="text-secondary">Organization</p>
                        </div>
                      </div>

                      <div className="flex min-w-0 gap-2">
                        <img
                          className="w-13 h-13 rounded object-cover shrink-0"
                          src={practitionerImageUrl}
                          alt={`${practitionerName} profile`}
                          onError={(event) => {
                            event.currentTarget.onerror = null;
                            event.currentTarget.src = doctorImage;
                          }}
                        />
                        <div className="min-w-0 gap-2">
                          <p className="text-secondary">Practitioner</p>
                          <p className="break-words">
                            {practitionerName}
                          </p>
                          <p className="text-secondary">
                            {getSpecialty(appointment)}
                          </p>
                        </div>
                      </div>
                    </div>
                    <div className="gap-2 flex-1 mt-3">
                      <p className="text-secondary">
                        Practitioner Instruction
                      </p>
                      <p>
                        {appointment.description ||
                          "No instructions provided."}
                      </p>
                    </div>

                    {/* The same block, now shared with the dialog this card opens and with the
                        appointments list — see the note at the top of this file. */}
                    <div className="flex-1 mt-3">
                      <AppointmentTaskList tasks={appointmentTasks} />
                    </div>
                  </CardDescription>
                </Card>
              );
            })}
            <div className="flex justify-end px-1 pt-2">
              {/* ⭐ R5's DELIBERATE EXIT. A row click now opens the appointment in place; THIS is the
                  control that takes you to the full page, and the count is what stops a patient
                  wondering where their other appointments went. */}
              <Link
                to={"/dashboard/my-appointments"}
                className="flex gap-2 text-primary font-bold text-xs items-center hover:text-blue-400 cursor-pointer"
              >
                View all ({categorizedAppointments.upcoming.length}) <ArrowRight size={15} />
              </Link>
            </div>
          </CardDescription>
        </Card>
      )}

      <PatientAppointmentDialog
        open={Boolean(openedAppointment)}
        onOpenChange={(next) => !next && setOpenedAppointment(undefined)}
        appointment={openedAppointment}
        practitionerName={
          openedAppointment ? getPractitionerName(openedAppointment.participant) : undefined
        }
        organizationName={organization?.name}
      />
    </div>
  );
};

export default AppointmentCard;