import { useRef, useState, type ReactNode } from "react";
import { Phone } from "lucide-react";
import { Patient, ContactPoint, Address } from "fhir/r4";
import { Input } from "../ui/input";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
import { StateSelect } from "../ui/state-select";
import { formatPhoneNumber } from "../../utils/phoneNumber";
import { sanitizeUsPostalCode } from "../../utils/usStates";
import { ProfileField, ProfileInput, ProfileRow, ProfileRows } from "./ProfileFields";
import { ProfileSection } from "./ProfileSection";
import { setTelecomSlots, telecomSlots, telecomUseSlots } from "./telecomSlots";
import { useAuthServiceContext } from "../../services/AuthService";
import ChangeLoginEmailDialog, { type LoginEmailChanged } from "./ChangeLoginEmailDialog";
import { usePatientServiceContext } from "../../services/PatientService";
import { viewerEpoch } from "../../utils/writeThroughHold";
import { useSectionEditor, type SectionUpdatePatient } from "./useSectionEditor";
import { PROFILE_HISTORY, formatProfileAddress, profileAddressHistory } from "../../utils/fieldHistory/profileHistoryFields";

/** What How to reach you edits, compared at save time against the latest read. */
const reachYouOf = (patient: Patient) => ({ telecom: patient.telecom, address: patient.address });

const ADDRESS_USE_LABELS: Record<string, string> = {
  home: "Home",
  work: "Work",
  temp: "Temporary address",
  old: "Old address",
  billing: "Billing address",
};

export const addressLabel = (address: Address, index: number): string =>
  (address.use && ADDRESS_USE_LABELS[address.use]) || (index === 0 ? "Address" : `Address ${index + 1}`);

const PHONE_USES: { value: string; label: string }[] = [
  { value: "mobile", label: "Mobile" },
  { value: "home", label: "Home" },
  { value: "work", label: "Work" },
];

/** Radix selects cannot hold an empty value, so "no use recorded" has a name of its own. */
const NO_USE = "none";

/** An address with blank parts removed, or undefined when no street, city or ZIP is left: the state
 * picker has no empty choice, so a state alone is what clearing an address leaves behind. */
export const cleanAddress = (address: Address): Address | undefined => {
  const line = (address.line ?? []).map((entry) => entry?.trim()).filter((entry): entry is string => Boolean(entry));
  const cleaned: Address = {
    ...address,
    line: line.length ? line : undefined,
    city: address.city?.trim() || undefined,
    state: address.state?.trim() || undefined,
    postalCode: address.postalCode?.trim() || undefined,
  };
  return cleaned.line || cleaned.city || cleaned.postalCode ? cleaned : undefined;
};

interface ContactsProps {
  data: ContactPoint[];
  patient: Patient;
  updatePatient: SectionUpdatePatient;
  onSeen?: (patient: Patient) => void;
  submitting: boolean;
  /** Shows the section without its Edit control. */
  readOnly?: boolean;
  setSubmitting: (submitting: boolean) => void;
}

type ReachDraft = {
  phones: [string, string];
  phoneUses: [string, string];
  emails: [string, string];
  addresses: Address[];
};

const reachDraftOf = (patient: Patient): ReachDraft => ({
  phones: telecomSlots(patient.telecom, "phone"),
  phoneUses: telecomUseSlots(patient.telecom, "phone"),
  emails: telecomSlots(patient.telecom, "email"),
  addresses: patient.address ?? [],
});

/** One number or address under its sentence-case subheading. */
const Slot = ({ heading, children }: { heading: string; children: ReactNode }) => (
  <>
    <span className="profile-fields__sub">{heading}</span>
    <span className="profile-fields__v">{children}</span>
  </>
);

/** How to reach you: primary and secondary phone and email, and addresses, edited as one section. */
const Contacts = ({ patient, updatePatient, onSeen, submitting, readOnly = false }: ContactsProps) => {
  const { currentUser } = useAuthServiceContext();
  const [changeLoginOpen, setChangeLoginOpen] = useState(false);
  // The sign-in email is the account's identity, not a contact point: read-only here, changed through
  // its own confirmation, and shown only on the viewer's own profile. It is the signed-in account's email
  // claim: the record's username tag can hold the account's UUID, which is not an email.
  const isSelfProfile = Boolean(currentUser?.fhir?.id && patient.id && currentUser.fhir.id === patient.id);
  const loginEmail = isSelfProfile ? currentUser?.cognito?.email || undefined : undefined;
  const { fetchPatient } = usePatientServiceContext();
  const shownPatientId = useRef(patient.id);
  shownPatientId.current = patient.id;
  // A committed change is read back through the section reload's path, for the same viewer and patient only.
  const loginEmailChanged = ({ patientId, epoch }: LoginEmailChanged) => {
    const admit = () => {
      if (viewerEpoch() !== epoch || shownPatientId.current !== patientId) throw new DOMException("The viewer or record changed.", "AbortError");
    };
    void fetchPatient(patientId, false, undefined, true, { admit, signal: new AbortController().signal })
      .then((latest) => {
        admit();
        onSeen?.(latest);
      })
      .catch(() => undefined);
  };
  const saved = reachDraftOf(patient);
  // Saved over the record as it is now, only while this section is as it was when editing opened; a write that
  // loses a race is read and checked again, never written over another change here. See useSectionEditor.
  const { editing, draft, setDraft, saving, error, stale, reloading, open, cancel, save, reload } = useSectionEditor<ReachDraft>({
    patient,
    pick: reachYouOf,
    draftOf: reachDraftOf,
    apply: (next, reach) => {
      setTelecomSlots(next, "phone", reach.phones, reach.phoneUses);
      setTelecomSlots(next, "email", reach.emails);
      const addresses = reach.addresses.map(cleanAddress).filter((address): address is Address => Boolean(address));
      next.address = addresses.length ? addresses : undefined;
      return next;
    },
    updatePatient,
    onSeen,
    failure: "Your contact details were not saved",
  });

  const input = (kind: "phones" | "emails", index: 0 | 1, label: string) => (
    <ProfileInput id={`reach-${kind}-${index}`} label={label}>
      <Input className="ak-field"
        id={`reach-${kind}-${index}`}
        type={kind === "phones" ? "tel" : "email"}
        value={draft[kind][index]}
        disabled={saving}
        onChange={(event) => {
          const values = [...draft[kind]] as [string, string];
          values[index] = event.target.value;
          setDraft({ ...draft, [kind]: values });
        }}
      />
    </ProfileInput>
  );

  const useSelect = (index: 0 | 1) => {
    const current = draft.phoneUses[index];
    const options = current && !PHONE_USES.some((option) => option.value === current)
      ? [...PHONE_USES, { value: current, label: current.charAt(0).toUpperCase() + current.slice(1) }]
      : PHONE_USES;
    return (
      <ProfileInput id={`reach-phone-use-${index}`} label="Phone use">
        <Select
          value={current || NO_USE}
          disabled={saving}
          onValueChange={(value) => {
            const uses = [...draft.phoneUses] as [string, string];
            uses[index] = value === NO_USE ? "" : value;
            setDraft({ ...draft, phoneUses: uses });
          }}
        >
          <SelectTrigger id={`reach-phone-use-${index}`}>
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value={NO_USE}>Not given</SelectItem>
            {options.map((option) => (
              <SelectItem key={option.value} value={option.value}>{option.label}</SelectItem>
            ))}
          </SelectContent>
        </Select>
      </ProfileInput>
    );
  };

  const setAddress = (index: number, patch: Partial<Address>) =>
    setDraft({ ...draft, addresses: draft.addresses.map((current, at) => (at === index ? { ...current, ...patch } : current)) });

  const setLine = (index: number, lineIndex: 0 | 1, value: string) => {
    const line = draft.addresses[index].line ?? [];
    const lines = [line[0] ?? "", line[1] ?? ""];
    lines[lineIndex] = value;
    setAddress(index, { line: lines });
  };

  const phoneValue = (index: 0 | 1) => (
    <>
      {formatPhoneNumber(saved.phones[index])}
      {saved.phoneUses[index] && <span className="profile-fields__use">{saved.phoneUses[index]}</span>}
    </>
  );

  return (
    <>
    <ProfileSection
      title="How to reach you"
      icon={<Phone aria-hidden="true" />}
      patientId={patient.id}
      canEdit={!readOnly && !submitting}
      editing={editing}
      saving={saving}
      error={error}
      stale={stale}
      reloading={reloading}
      onReload={() => void reload()}
      onEdit={open}
      onCancel={cancel}
      onSave={() => void save()}
      readView={
        <ProfileRows>
          <ProfileRow>
            <ProfileField label="Phone" path={PROFILE_HISTORY.phone}>
              {saved.phones[0] || saved.phones[1] ? (
                <>
                  {saved.phones[0] && <Slot heading="Primary phone">{phoneValue(0)}</Slot>}
                  {saved.phones[1] && <Slot heading="Secondary phone">{phoneValue(1)}</Slot>}
                </>
              ) : (
                <span className="profile-fields__v profile-fields__v--dash">—</span>
              )}
            </ProfileField>
            <ProfileField label="Email" path={PROFILE_HISTORY.email}>
              {saved.emails[0] || saved.emails[1] ? (
                <>
                  {saved.emails[0] && <Slot heading="Primary email">{saved.emails[0]}</Slot>}
                  {saved.emails[1] && <Slot heading="Secondary email">{saved.emails[1]}</Slot>}
                </>
              ) : (
                <span className="profile-fields__v profile-fields__v--dash">—</span>
              )}
            </ProfileField>
          </ProfileRow>
          {isSelfProfile && (
            <ProfileRow>
              <ProfileField label="Login email">
                <span className="profile-fields__v profile-section__login">
                  <span>{loginEmail || "Not recorded"}</span>
                  <span className="profile-fields__hint">— where you sign in</span>
                  {loginEmail && (
                    <button
                      type="button"
                      className="btn btn-blue-ghost-sm"
                      aria-label="Change login email"
                      onClick={() => setChangeLoginOpen(true)}
                    >
                      Change
                    </button>
                  )}
                </span>
              </ProfileField>
            </ProfileRow>
          )}
          {/* An absent address is a field row's dash, not an empty state. */}
          {saved.addresses.length === 0 && (
            <ProfileRow>
              <ProfileField label="Address" path={profileAddressHistory(0)} value="" />
            </ProfileRow>
          )}
          {saved.addresses.map((address, index) => (
            <ProfileRow key={index}>
              <ProfileField label={addressLabel(address, index)} path={profileAddressHistory(index)} value={formatProfileAddress(address)} />
            </ProfileRow>
          ))}
        </ProfileRows>
      }
      editView={
        <>
          <div className="profile-section__grid">
            {input("phones", 0, "Primary phone")}
            {useSelect(0)}
            {input("phones", 1, "Secondary phone")}
            {useSelect(1)}
            {input("emails", 0, "Primary email")}
            {input("emails", 1, "Secondary email")}
          </div>
          {draft.addresses.map((address, index) => {
            const line = address.line ?? [];
            const id = `reach-address-${index}`;
            return (
              <div key={index} className="profile-section__row">
                <span className="profile-section__row-label ak-caption">{addressLabel(address, index)}</span>
                <div className="profile-section__grid">
                  <ProfileInput id={`${id}-street`} label="Street address">
                    <Input className="ak-field" id={`${id}-street`} value={line[0] ?? ""} disabled={saving} onChange={(event) => setLine(index, 0, event.target.value)} />
                  </ProfileInput>
                  <ProfileInput id={`${id}-unit`} label="Apt, suite, etc.">
                    <Input className="ak-field" id={`${id}-unit`} value={line[1] ?? ""} disabled={saving} onChange={(event) => setLine(index, 1, event.target.value)} />
                  </ProfileInput>
                  <ProfileInput id={`${id}-city`} label="City">
                    <Input className="ak-field" id={`${id}-city`} value={address.city ?? ""} disabled={saving} onChange={(event) => setAddress(index, { city: event.target.value })} />
                  </ProfileInput>
                  <ProfileInput label="State">
                    <StateSelect value={address.state} disabled={saving} onChange={(state) => setAddress(index, { state })} />
                  </ProfileInput>
                  <ProfileInput id={`${id}-zip`} label="ZIP code">
                    <Input className="ak-field"
                      id={`${id}-zip`}
                      inputMode="numeric"
                      value={address.postalCode ?? ""}
                      disabled={saving}
                      onChange={(event) => setAddress(index, { postalCode: sanitizeUsPostalCode(event.target.value) || undefined })}
                    />
                  </ProfileInput>
                </div>
                <button
                  type="button"
                  className="btn btn-red-ghost-sm"
                  disabled={saving}
                  onClick={() => setDraft({ ...draft, addresses: draft.addresses.filter((_, at) => at !== index) })}
                >
                  Remove this address
                </button>
              </div>
            );
          })}
          <button
            type="button"
            className="btn btn-blue-ghost-sm"
            disabled={saving}
            onClick={() => setDraft({ ...draft, addresses: [...draft.addresses, { use: draft.addresses.length ? undefined : "home" }] })}
          >
            Add an address
          </button>
          <p className="ak-field-help">You will receive a notice of any change.</p>
        </>
      }
    />
    {isSelfProfile && (
      <ChangeLoginEmailDialog
        open={changeLoginOpen}
        onOpenChange={setChangeLoginOpen}
        currentLoginEmail={loginEmail}
        patientId={patient.id ?? ""}
        onChanged={loginEmailChanged}
      />
    )}
    </>
  );
};

export default Contacts;