import type { ReactNode } from "react";
import { History, Loader2, Pencil } from "lucide-react";
import { FieldHistoryProvider, FieldHistoryScope, useFieldHistory } from "../FieldHistory/FieldHistoryProvider";
import { RELOAD_DISCARDS_MESSAGE } from "../../utils/recordChanged";
import "./ProfileSection.css";

/** One profile section: History and Edit in the heading, one Cancel/Save pair, its own field history. */

const SectionHistory = ({ title }: { title: string }) => {
  const { isActive, loading, activate, deactivate } = useFieldHistory();
  return (
    <button
      type="button"
      className="btn btn-blue-ghost-sm"
      aria-pressed={isActive}
      disabled={loading}
      onClick={isActive ? deactivate : activate}
    >
      {loading ? <Loader2 className="animate-spin" aria-hidden="true" /> : <History aria-hidden="true" />}
      History{" "}<span className="sr-only">of {title}</span>
    </button>
  );
};

const SectionHistoryHint = () => {
  const { isActive, nothingEverEdited, historyUnavailable, historyRefused } = useFieldHistory();
  if (!isActive) return null;
  if (historyRefused) {
    return <p className="profile-section__hint ak-field-help">Your access to this patient does not include its edit history.</p>;
  }
  if (historyUnavailable) {
    return <p className="profile-section__hint ak-field-error">We could not read this history just now.</p>;
  }
  return (
    <p className="profile-section__hint ak-field-help">
      {nothingEverEdited ? "Nothing in this section has been edited yet." : "Select a highlighted field to see its changes."}
    </p>
  );
};

export interface ProfileSectionProps {
  title: string;
  icon: ReactNode;
  /** The Patient whose history this section reads. */
  patientId?: string;
  canEdit: boolean;
  editing: boolean;
  saving: boolean;
  error?: string | null;
  /** This opening can save nothing more (refused, out of date, or unconfirmed): Reload record or Cancel. */
  stale?: boolean;
  reloading?: boolean;
  onReload?: () => void;
  onEdit: () => void;
  onCancel: () => void;
  onSave: () => void;
  readView: ReactNode;
  editView: ReactNode;
}

export const ProfileSection = ({
  title,
  icon,
  patientId,
  canEdit,
  editing,
  saving,
  error,
  stale = false,
  reloading = false,
  onReload,
  onEdit,
  onCancel,
  onSave,
  readView,
  editView,
}: ProfileSectionProps) => (
  <FieldHistoryProvider>
    <FieldHistoryScope resourceType="Patient" id={patientId}>
      <section className="profile-section ak-card ak-card--panel" aria-label={title}>
        <div className="profile-section__head ak-card__header border-b border-border">
          <h3 className="profile-section__title ak-card__title ak-card__title--lead">
            {icon}
            {title}
          </h3>
          <div className="profile-section__actions">
            <SectionHistory title={title} />
            {/* A hidden span names the section, so the icon-only floor leaves this labelled button alone. */}
            {canEdit && !editing && (
              <button type="button" className="btn btn-blue-ghost-sm" onClick={onEdit}>
                <Pencil aria-hidden="true" />
                Edit{" "}<span className="sr-only">{title}</span>
              </button>
            )}
          </div>
        </div>
        {editing ? (
          <form
            className="profile-section__form"
            onSubmit={(event) => {
              event.preventDefault();
              onSave();
            }}
          >
            <SectionHistoryHint />
            {editView}
            {error && <p className="ak-field-error" role="alert">{error}</p>}
            {stale && <p className="ak-field-help">{RELOAD_DISCARDS_MESSAGE}</p>}
            <div className="profile-section__save">
              <button type="button" className="btn btn-red-ghost-sm" onClick={onCancel} disabled={saving}>
                Cancel
              </button>
              {stale ? (
                <button type="button" className="btn btn-blue-sm" onClick={onReload} disabled={reloading}>
                  {reloading ? "Reloading…" : "Reload record"}
                </button>
              ) : (
                <button type="submit" className="btn btn-green-sm" disabled={saving}>
                  {saving ? "Saving…" : "Save"}
                </button>
              )}
            </div>
          </form>
        ) : (
          <div className="profile-section__body">
            <SectionHistoryHint />
            {readView}
          </div>
        )}
      </section>
    </FieldHistoryScope>
  </FieldHistoryProvider>
);

export default ProfileSection;