import { useEffect, useMemo, useRef, useState } from "react";
import { OverlayActions } from "../../../components/ui/overlay-actions";
import { useDirtyReport } from "../../../hooks/useDirtyReport";
import type { Organization } from "fhir/r4";
import { useAuthServiceContext } from "../../../services/AuthService";
import { useOrganizationServiceContext } from "../../../services/OrganizationService";
import { useFhirHealthcareServices } from "../../../hooks";
import { isNewPatientConsultationType } from "../../../config/newPatientExam";
import { OFFSET_PRESETS, formatOffset, resolveOrgReminderPolicy } from "../../../config/appointmentReminderPolicy";
import { DURATION_QUICK_PICK_MINUTES, formatDurationLabel } from "../../../config/appointmentDuration";
import {
  bookingRulesProblem,
  changedParts,
  readBookingRules,
  toReminderPolicy,
  withBookingRules,
  type BookingRulesDraft,
  type BookingRulesPart,
} from "../../../utils/bookingRulesDraft";
import { relayServerFailure } from "../../../utils/fetchFailureMessage";
import { ToggleControl } from "../../../components/ui/toggle-control";
import { Checkbox } from "../../../components/ui/checkbox";
import { Label } from "../../../components/ui/label";
import { RadioGroup, RadioGroupItem } from "../../../components/ui/radio-group";
import { SelectControl } from "../../../components/ui/select-control";
import { TextControl } from "../../../components/ui/text-control";
import { DismissibleAlert } from "../../../components/ui/dismissible-alert";
import { RECORD_CHANGED_MESSAGE, RELOAD_DISCARDS_MESSAGE } from "../../../utils/recordChanged";
import { useRefreshSessionOrganization } from "../../../hooks/useRefreshSessionOrganization";
import { outcomeUnknown, SaveRetiredError, TIMED_OUT_MAY_HAVE_SAVED, useSaveScope } from "../../../utils/saveOperation";
import { olderThan } from "../../../utils/versionOrder";

// The service's translation of the server's 412 (StaleOrganizationError), known by its name as the session hook
// knows a retired save: someone else saved the practice first, so this opening saves nothing more until reloaded.
const refusedAsStale = (err: unknown): boolean => (err as { name?: unknown } | null)?.name === "StaleOrganizationError";
import "./BookingRulesPanel.css";

// Someone else changed the booking rules this form was filled from: nothing of them is written, and the form is
// reloaded before anything more is saved from it.
class BookingChangedElsewhere extends Error {
  constructor() {
    super(RECORD_CHANGED_MESSAGE);
    this.name = "BookingChangedElsewhere";
  }
}


// The deck's times, plus any other preset already in use.
const DECK_OFFSETS = [60, 120, 1440, 10080];

const PART_LABEL: Record<BookingRulesPart, string> = {
  booking: "how online bookings work",
  policy: "video visits",
  reminders: "appointment reminders",
};

const BOOKING_MODES = [
  { value: "direct", title: "Direct", detail: "The patient picks a time and it is booked." },
  { value: "review", title: "Review", detail: "The slot is held and the front desk approves it." },
  {
    value: "request-only",
    title: "Request only",
    detail: "The patient asks and the front desk confirms. A chosen time is held; preferred days hold nothing.",
  },
] as const;

type BookingRulesPanelProps = { onDirtyChange?: (dirty: boolean) => void };

// One Save over three stores: the booking extensions (a whole-organization write) first, then the
// video and reminder routes. Only changed parts are written.
const BookingRulesPanel = ({ onDirtyChange }: BookingRulesPanelProps) => {
  const { currentOrganization, setWpOrganization } = useAuthServiceContext();
  const { updateOrganization, updateAppointmentPolicySettings, updateAppointmentReminderSettings } =
    useOrganizationServiceContext();
  const { healthcareServicesBundle, healthcareServicesList } = useFhirHealthcareServices();

  const saved = useMemo(() => readBookingRules(currentOrganization), [currentOrganization]);
  const [draft, setDraft] = useState<BookingRulesDraft>(saved);
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState<string>();
  const [savedNotice, setSavedNotice] = useState(false);
  const [customDuration, setCustomDuration] = useState(!DURATION_QUICK_PICK_MINUTES.includes(saved.defaultDurationMinutes));
  // Refused because another admin changed the booking rules: nothing more is saved until Reload record.
  const [stale, setStale] = useState(false);
  const [reloading, setReloading] = useState(false);
  const refreshOrganization = useRefreshSessionOrganization();
  // Saves and reloads belong to this sheet, practice and viewer; closing or replacing the sheet retires them.
  const saveScope = useSaveScope(currentOrganization?.id);
  // The practice as the session holds it now: a reload never refills the form from anything older.
  const live = useRef(currentOrganization);
  live.current = currentOrganization;

  // Re-seed from a newer organization only while the form is untouched.
  const seededFrom = useRef<BookingRulesDraft>(saved);
  useEffect(() => {
    setDraft((current) => {
      if (changedParts(current, seededFrom.current).length > 0) return current;
      seededFrom.current = saved;
      return saved;
    });
  }, [saved]);

  const pending = changedParts(draft, saved);
  useDirtyReport(pending.length > 0, onDirtyChange);

  // The rule is satisfied by any active service typed as a new patient consultation. Warn, never block,
  // once the catalogue has loaded and has none.
  const noConsultationService =
    Boolean(healthcareServicesBundle) &&
    !(healthcareServicesList ?? []).some(
      (service) => service.active !== false && isNewPatientConsultationType(service.type),
    );

  const update = (patch: Partial<BookingRulesDraft>) => {
    setDraft((current) => ({ ...current, ...patch }));
    setSavedNotice(false);
  };

  const save = async () => {
    // Only the booking extensions are checked, and only when they are being written.
    const problem = pending.includes("booking") ? bookingRulesProblem(draft) : undefined;
    if (problem) {
      setError(problem);
      return;
    }
    const operation = saveScope.start();
    setSaving(true);
    setError(undefined);
    const done: BookingRulesPart[] = [];
    let latest: Organization | null = currentOrganization;
    let failed: BookingRulesPart | undefined;
    try {
      for (const part of pending) {
        failed = part;
        // Admitted before each part is sent: a retired save sends nothing more.
        if (!operation.belongs()) throw new SaveRetiredError();
        if (part === "booking") {
          if (!latest) throw new Error("The practice is not loaded.");
          // Only over the booking rules this form was filled from: if someone else changed them since, nothing is
          // written over them, and nothing more is saved from this form until it is reloaded. Another practice
          // setting changing does not stand in the way; the write itself is conditional on the version it is built on.
          if (changedParts(readBookingRules(latest), seededFrom.current).includes("booking")) {
            throw new BookingChangedElsewhere();
          }
          const base = latest;
          latest = await operation.step(() => updateOrganization(withBookingRules(base, draft), operation.transport), true);
        } else if (part === "policy") {
          latest = (await operation.step(() => updateAppointmentPolicySettings({ telehealthEnabled: draft.telehealthEnabled }, operation.transport), true)).organization;
        } else {
          const policy = toReminderPolicy(draft, resolveOrgReminderPolicy(latest));
          latest = (await operation.step(() => updateAppointmentReminderSettings(policy, operation.transport), true)).organization;
        }
        // Answered after it was retired: nothing of it is published here.
        if (!operation.belongs()) throw new SaveRetiredError();
        setWpOrganization(latest);
        done.push(part);
      }
      seededFrom.current = readBookingRules(latest);
      setSavedNotice(true);
    } catch (err) {
      if (err instanceof SaveRetiredError || !operation.belongs()) return;
      // What was confirmed saved stays said; the part that failed decides what comes next.
      const kept = done.length ? `Saved ${done.map((p) => PART_LABEL[p]).join(" and ")}. ` : "";
      if (err instanceof BookingChangedElsewhere || refusedAsStale(err)) {
        setStale(true);
        setError(`${kept}Not saved: ${failed ? PART_LABEL[failed] : PART_LABEL.booking}. ${RECORD_CHANGED_MESSAGE}`);
        return;
      }
      if (outcomeUnknown(err)) {
        // Sent, with its answer lost: it may have saved. Not "not saved", and not Save again - Reload record checks.
        setStale(true);
        setError(`${kept}Not confirmed: ${failed ? PART_LABEL[failed] : "your changes"}. ${TIMED_OUT_MAY_HAVE_SAVED}`);
        return;
      }
      const reason = relayServerFailure(err, "It could not be saved.");
      setError(`${kept}Not saved: ${failed ? PART_LABEL[failed] : "your changes"}. ${reason} Save again to retry what is left.`);
    } finally {
      if (operation.belongs()) setSaving(false);
      operation.retire();
    }
  };

  // Reload record: the practice as it is now, read fresh, refills the form (discarding its edits, as it said first)
  // and becomes what the next save is checked against.
  // Never backward: an answer older than the practice the session holds refills from that newer one.
  const reload = async () => {
    const operation = saveScope.start();
    setReloading(true);
    try {
      const fresh = await refreshOrganization(operation.transport);
      if (!operation.belongs()) return;
      if (!fresh) {
        setError("The practice could not be read. Try Reload record again.");
        return;
      }
      const known = live.current;
      const newest = known && known.id === fresh.id && olderThan(fresh, known) ? known : fresh;
      const rules = readBookingRules(newest);
      seededFrom.current = rules;
      setDraft(rules);
      setStale(false);
      setError(undefined);
    } catch (err) {
      if (err instanceof SaveRetiredError || !operation.belongs()) return;
      setError("The practice could not be read. Try Reload record again.");
    } finally {
      if (operation.belongs()) setReloading(false);
      operation.retire();
    }
  };

  const offsets = [...new Set([...DECK_OFFSETS, ...draft.reminderOffsets.filter((m) => OFFSET_PRESETS.includes(m))])].sort(
    (a, b) => a - b,
  );
  const toggleOffset = (minutes: number, checked: boolean) =>
    update({
      reminderOffsets: checked
        ? [...draft.reminderOffsets, minutes].sort((a, b) => a - b)
        : draft.reminderOffsets.filter((m) => m !== minutes),
    });

  return (
    <div className="booking-rules space-y-6">
      <div className="ak-notice">
        <span className="ak-notice__description">
          <b>These reach every patient.</b> Changing how bookings are taken applies to the
          next patient who opens your portal; changing reminder times applies to every appointment already in the book. A
          reminder that has already been sent cannot be recalled.
        </span>
      </div>
      {error && (
        <DismissibleAlert status="error" onDismiss={() => setError(undefined)}>
          {error}
        </DismissibleAlert>
      )}

      <ToggleControl
        label="Offer video visits"
        help="Video must also be enabled for each service and schedule. This setting alone does not make them bookable by video."
        checked={draft.telehealthEnabled}
        onChange={(checked) => update({ telehealthEnabled: checked })}
        disabled={saving}
      />

      <fieldset className="space-y-2">
        <legend className="booking-rules__heading mb-2">How online bookings work</legend>
        <RadioGroup
          value={draft.bookingMode}
          onValueChange={(value) => update({ bookingMode: value as BookingRulesDraft["bookingMode"] })}
          disabled={saving}
        >
          {BOOKING_MODES.map((mode) => (
            <div key={mode.value} className="flex items-start gap-2">
              <RadioGroupItem value={mode.value} id={`booking-mode-${mode.value}`} className="mt-0.5" />
              <Label htmlFor={`booking-mode-${mode.value}`} className="block font-normal">
                <span className="block font-medium">{mode.title}</span>
                <span className="block text-sm text-muted-foreground">{mode.detail}</span>
              </Label>
            </div>
          ))}
        </RadioGroup>
        {draft.bookingMode === "request-only" && (
          <RadioGroup
            className="booking-rules__nested"
            value={draft.requestStyle}
            onValueChange={(value) => update({ requestStyle: value as BookingRulesDraft["requestStyle"] })}
            disabled={saving}
          >
            <div className="flex items-start gap-2">
              <RadioGroupItem value="preferred-slot" id="request-style-slot" className="mt-0.5" />
              <Label htmlFor="request-style-slot" className="font-normal">
                The patient picks a practitioner and a time, held for the front desk
              </Label>
            </div>
            <div className="flex items-start gap-2">
              <RadioGroupItem value="time-window" id="request-style-window" className="mt-0.5" />
              <Label htmlFor="request-style-window" className="font-normal">
                The patient gives preferred days and times, and the front desk schedules it
              </Label>
            </div>
          </RadioGroup>
        )}
      </fieldset>

      <div className="space-y-2">
        <div className="flex items-start gap-2">
          <Checkbox
            id="booking-new-patient-first"
            className="mt-0.5"
            checked={draft.requireNewPatientFirst}
            disabled={saving}
            onCheckedChange={(checked) => update({ requireNewPatientFirst: checked === true })}
          />
          <Label htmlFor="booking-new-patient-first" className="block font-normal">
            <span className="block font-medium">Require new patients to book a new patient consultation first</span>
            <span className="block text-sm text-muted-foreground">
              Any service of that type satisfies it — you name the service yourself.
            </span>
          </Label>
        </div>
        {draft.requireNewPatientFirst && noConsultationService && (
          <div className="booking-rules__nested ak-notice" role="status">
            <span className="ak-notice__description">
              None of your services is a new patient consultation yet, so new patients cannot book online.
              Give one of your services the type New patient consultation under Services.
            </span>
          </div>
        )}
      </div>

      <div className="space-y-2">
        <div className="booking-rules__heading">Appointment reminders</div>
        <div className="text-xs text-muted-foreground">
          Emailed only to patients who have turned reminders on in their own communication preferences.
        </div>
        <ul className="booking-rules__list">
          {offsets.map((minutes) => (
            <li key={minutes} className="flex items-center gap-2">
              <Checkbox
                id={`reminder-offset-${minutes}`}
                checked={draft.reminderOffsets.includes(minutes)}
                disabled={saving}
                onCheckedChange={(checked) => toggleOffset(minutes, checked === true)}
              />
              <Label htmlFor={`reminder-offset-${minutes}`} className="font-medium">
                {formatOffset(minutes)}
              </Label>
            </li>
          ))}
        </ul>
      </div>

      <SelectControl
        label="Most reminders per appointment"
        help="If more times are ticked than this, the ones closest to the appointment are used."
        value={String(draft.maxReminders)}
        options={[1, 2, 3, 4, 5].map((n) => ({ label: String(n), value: String(n) }))}
        onChange={(value) => update({ maxReminders: Number(value) })}
        disabled={saving}
      />

      <details className="booking-rules__more">
        <summary className="text-sm font-medium text-primary">More booking settings</summary>
        <div className="mt-4 space-y-4">
          <div className="space-y-2">
            <SelectControl
              label="Default appointment length"
              help="Every appointment uses this unless its service sets its own. The front desk can change it per booking."
              value={customDuration ? "custom" : String(draft.defaultDurationMinutes)}
              options={[
                ...DURATION_QUICK_PICK_MINUTES.map((minutes) => ({ label: formatDurationLabel(minutes), value: String(minutes) })),
                { label: "Custom…", value: "custom" },
              ]}
              onChange={(value) => {
                setCustomDuration(value === "custom");
                if (value !== "custom") update({ defaultDurationMinutes: Number(value) });
              }}
              disabled={saving}
            />
            {customDuration && (
              <TextControl
                label="Custom length (minutes)"
                type="number"
                min={1}
                value={String(draft.defaultDurationMinutes || "")}
                onChange={(value) => update({ defaultDurationMinutes: parseInt(value, 10) || 0 })}
                disabled={saving}
              />
            )}
          </div>
          <div className="space-y-2">
            <div className="flex items-center gap-2">
              <Checkbox
                id="reminder-quiet-hours"
                checked={draft.quietHours !== null}
                disabled={saving}
                onCheckedChange={(checked) =>
                  update({ quietHours: checked === true ? { start: "21:00", end: "08:00", behavior: "defer" } : null })
                }
              />
              <Label htmlFor="reminder-quiet-hours" className="font-medium">
                Quiet hours for reminders
              </Label>
            </div>
            {draft.quietHours && (
              <div className="booking-rules__nested space-y-3">
                <div className="flex flex-wrap gap-3">
                  <TextControl
                    label="Start"
                    type="time"
                    value={draft.quietHours.start}
                    onChange={(start) => draft.quietHours && update({ quietHours: { ...draft.quietHours, start } })}
                    disabled={saving}
                  />
                  <TextControl
                    label="End"
                    type="time"
                    value={draft.quietHours.end}
                    onChange={(end) => draft.quietHours && update({ quietHours: { ...draft.quietHours, end } })}
                    disabled={saving}
                  />
                </div>
                <RadioGroup
                  value={draft.quietHours.behavior}
                  onValueChange={(behavior) =>
                    draft.quietHours && update({ quietHours: { ...draft.quietHours, behavior: behavior as "defer" | "suppress" } })
                  }
                  disabled={saving}
                >
                  <div className="flex items-center gap-2">
                    <RadioGroupItem value="defer" id="quiet-hours-defer" />
                    <Label htmlFor="quiet-hours-defer" className="font-normal">Send after quiet hours</Label>
                  </div>
                  <div className="flex items-center gap-2">
                    <RadioGroupItem value="suppress" id="quiet-hours-suppress" />
                    <Label htmlFor="quiet-hours-suppress" className="font-normal">Skip the reminder</Label>
                  </div>
                </RadioGroup>
              </div>
            )}
          </div>
        </div>
      </details>

      <OverlayActions className="flex items-center justify-end gap-3">
        {savedNotice && pending.length === 0 && <span className="text-sm text-muted-foreground">Saved</span>}
        {stale && (
          <>
            <span className="text-sm text-muted-foreground">{RELOAD_DISCARDS_MESSAGE}</span>
            <button type="button" className="btn btn-blue" onClick={() => void reload()} disabled={reloading}>
              {reloading ? "Reloading…" : "Reload record"}
            </button>
          </>
        )}
        <button
          type="button"
          className={`btn btn-green${saving ? " btn-busy" : ""}`}
          onClick={() => void save()}
          disabled={saving || stale || pending.length === 0}
        >
          Save
        </button>
      </OverlayActions>
    </div>
  );
};

export default BookingRulesPanel;