import { useState, type ReactNode } from "react";
import { Navigate } from "react-router-dom";
import { CalendarDays, CreditCard, Globe, IdCardLanyard, UsersRound, type LucideIcon } from "lucide-react";
import { useAuthServiceContext } from "../../../../services/AuthService";
import { useBillingContext } from "../../../../services/BillingContext";
import { isUnderClosure, usePracticeClosure, usePracticeClosureService } from "../../../../services/PracticeClosureService";
import { Checkbox } from "../../../../components/ui/checkbox";
import { Input } from "../../../../components/ui/input";
import { Card } from "../../../../components/ui/card";
import { resolveHeaderBranding } from "../../../../components/PortalFrameHeader/headerBranding";
import { CLOSURE_CARD, NOTICE_TONE, counted, formatBillingDate, sameName } from "./closureText";
import { practiceTimeZoneOf } from "../../../../utils/practiceTimezone";
import PracticeClosureStatus from "./PracticeClosureStatus";
import "./PracticeClosure.css";

// The rest of the app learned at sign-in that the practice was closed, so reopening starts it afresh.
const reloadApp = () => {
  window.location.hash = "#/dashboard/home";
  window.location.reload();
};

const UNCONFIRMED = "Closing could not be confirmed. Reload this page to see where it stands before trying again.";
const REFUSALS: Record<string, string> = {
  "name-mismatch": "The name typed does not match this practice.",
  conflict: "This practice changed while you were closing it. Try again.",
  "not-the-owner": "Only the owner can close this practice.",
};

// One consequence, on the shared card (a panel: it opens nothing, so it takes no hover): the icon at the left, the title and its sentence beside it.
const Effect = ({ icon: Icon, title, children }: { icon: LucideIcon; title: string; children: ReactNode }) => (
  <li className="ak-card ak-card--panel flex items-center gap-3">
    <Icon className="practice-closure__effect-icon" aria-hidden />
    <span className="flex min-w-0 flex-col gap-[3px]">
      <span className="ak-card__title ak-card__title--lead">{title}</span>
      <span className="ak-card__description">{children}</span>
    </span>
  </li>
);

type Surface = "closure" | "account";

const ClosureConfirmation = ({ surface }: { surface: Surface }) => {
  const { currentOrganization } = useAuthServiceContext();
  const billing = useBillingContext();
  const organizationId = currentOrganization?.id;
  const { view, reload } = usePracticeClosure(organizationId);
  const { closePractice } = usePracticeClosureService();
  const [typed, setTyped] = useState("");
  const [acknowledged, setAcknowledged] = useState(false);
  const [count, setCount] = useState<number>();
  const [submitting, setSubmitting] = useState(false);
  const [notice, setNotice] = useState<string>();

  const [reopened, setReopened] = useState<string>();

  const read = typeof view === "string" ? undefined : view;
  const practiceName = read?.preview?.practiceName ?? currentOrganization?.name ?? "This practice";
  const timeZone = practiceTimeZoneOf(currentOrganization);

  if (view === "checking") return <p className="ak-status-line">Checking&hellip;</p>;
  // The account while closed is the Owner's recovery view; an open practice has its normal account.
  if (surface === "account" && !reopened) {
    if (read && !isUnderClosure(read)) return <Navigate to="/dashboard/organization/account" replace />;
    if (view === "denied" || read?.isOwner === false) {
      return (
        <>
          <h1 className="ak-page-title">Practice account</h1>
          <div className={NOTICE_TONE.stop} role="alert">
            <span className="ak-notice__description">Only the practice owner can see its account while it is closed.</span>
          </div>
        </>
      );
    }
    if (!read) {
      return (
        <div className={NOTICE_TONE.stop} role="alert">
          <div className="ak-notice__description flex flex-col items-start gap-1.5">
            <span>This practice&apos;s account could not be read.</span>
            <button type="button" className="btn btn-blue-ghost-sm" onClick={reload}>Try again</button>
          </div>
        </div>
      );
    }
  }
  if (view === "denied") {
    return (
      <div className={NOTICE_TONE.stop} role="alert">
        <span className="ak-notice__description">You do not have access to this practice&apos;s closure.</span>
      </div>
    );
  }
  if (reopened && read && !isUnderClosure(read)) {
    return (
      <div className={NOTICE_TONE.done} role="status">
        <div className="ak-notice__description flex flex-col items-start gap-1.5">
          <span>{reopened}</span>
          <button type="button" className="btn btn-blue-sm" onClick={reloadApp}>
            Go to the dashboard
          </button>
        </div>
      </div>
    );
  }
  // After signing in to a closed practice this is the screen that still works, so it serves every state.
  if (read && isUnderClosure(read)) {
    return (
      <div className="practice-closure">
        <PracticeClosureStatus
          key={`${organizationId}:${read.closure?.status}:${read.closure?.closedAt}`}
          read={read}
          surface={surface}
          organizationId={organizationId ?? ""}
          practiceName={practiceName}
          timeZone={timeZone}
          logoUrl={resolveHeaderBranding(currentOrganization).logoUrl}
          onReopened={(notice) => {
            setReopened(notice);
            reload();
          }}
          onChanged={reload}
        />
      </div>
    );
  }
  if (read?.isOwner === false) {
    return (
      <div className={NOTICE_TONE.stop} role="alert">
        <span className="ak-notice__description">Only the practice owner can close this practice.</span>
      </div>
    );
  }
  const preview = read?.preview;
  if (!preview) {
    return (
      <div className={NOTICE_TONE.stop} role="alert">
        <div className="ak-notice__description flex flex-col items-start gap-1.5">
          <span>Whether this practice can be closed could not be checked. </span>
          <button type="button" className="btn btn-blue-ghost-sm" onClick={reload}>Try again</button>
        </div>
      </div>
    );
  }

  const name = preview.practiceName;
  const cancelling = count ?? preview.futureAppointments;
  const ready = sameName(typed, name) && acknowledged && !submitting;
  const agencyPays = billing.subscriptionPayer === "contractor";
  const freePlan = billing.billingMode === "free_basic";
  const paidThrough = preview.paidThrough !== undefined ? preview.paidThrough : (billing.subscription?.paidThrough ?? billing.subscription?.nextChargeAt);
  const staffTitle = typeof preview.staffCount === "number"
    ? `${counted(preview.staffCount, "person loses", "people lose")} this workspace`
    : "Everyone who works here loses this workspace";
  const patientTitle = typeof preview.patientCount === "number"
    ? `${counted(preview.patientCount, "patient keeps", "patients keep")} everything`
    : "Patients keep everything";
  const periodEnd = paidThrough
    ? `The current paid period runs through ${formatBillingDate(paidThrough, timeZone)}`
    : "The current paid period runs to its end";
  const planTitle = freePlan
    ? "There is no paid plan to stop"
    : agencyPays ? "The subscription your contractor pays for will not renew" : "Your subscription will not renew";
  const planText = freePlan
    ? "Practice access and bookings stop now, and nothing is charged while the practice is closed."
    : `Practice access and bookings stop now. ${periodEnd}; ${agencyPays ? "your contractor" : "you"} will not be charged`
      + " for another period while the practice stays closed.";

  const close = async () => {
    if (!organizationId) return;
    setSubmitting(true);
    setNotice(undefined);
    try {
      const outcome = await closePractice(organizationId, typed, cancelling);
      if (outcome.status === 200 || outcome.status === 202 || outcome.code === "job-not-started") {
        reload();
      } else if (outcome.code === "count-changed" && typeof outcome.count === "number") {
        setCount(outcome.count);
        setAcknowledged(false);
        setNotice(`The number of future appointments has changed to ${outcome.count.toLocaleString()}. Review it and confirm again.`);
      } else {
        const refusal = REFUSALS[outcome.code ?? ""] ?? (outcome.status === 403 ? REFUSALS["not-the-owner"] : undefined);
        setNotice(refusal ?? UNCONFIRMED);
        // An answer this page cannot place may still have closed the practice; the closure read says which.
        if (!refusal) reload();
      }
    } catch {
      setNotice(UNCONFIRMED);
      reload();
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <div className="practice-closure">
      <div className="practice-closure__head">
        <h1 className="ak-page-title ahr-view-title">Close {name}</h1>
        <p className="ak-page-title__sub">Only you can do this. You are the owner.</p>
      </div>
      <div className="ak-page-body">
      <div className="ak-notice">
        {/* One description, so the bold lead stays in the notice's one text run. */}
        <span className="ak-notice__description">
          <b>Closing archives this practice. Nothing is deleted.</b> Records, messages and invoices are preserved.
          You can reopen the practice, but cancelled appointments are not restored.
        </span>
      </div>
      <h2 className="ak-section-title">What happens the moment you close it</h2>
      <ul className="ak-card-list practice-closure__effects">
          <Effect icon={CalendarDays} title={`${counted(cancelling, "future appointment is", "future appointments are")} cancelled`}>
            We try to email patients who have an address. After closing, this page counts anyone a notice could
            not reach the way they chose. Reopening does not bring these appointments back.
          </Effect>
          <Effect icon={IdCardLanyard} title={staffTitle}>
            Their own accounts and their own records are untouched. Anyone who works at another practice on
            Akashic keeps that.
          </Effect>
          <Effect icon={UsersRound} title={patientTitle}>
            A record belongs to the patient, not to a practice. They lose nothing at all.
          </Effect>
          <Effect icon={Globe} title="Online booking and your website form stop accepting">
            Both say the practice is closed rather than failing quietly. Enquiries already in the front
            desk&apos;s inbox are kept.
          </Effect>
          <Effect icon={CreditCard} title={planTitle}>{planText}</Effect>
      </ul>
      <h2 className="ak-section-title">To close it</h2>
      <Card className={CLOSURE_CARD}>
        <div className="practice-closure__field">
          <label htmlFor="practice-closure-name" className="ak-label">
            Type the practice&apos;s name to confirm
          </label>
          <Input
            id="practice-closure-name"
            className="ak-field"
            value={typed}
            placeholder={name}
            autoComplete="off"
            disabled={submitting}
            onChange={(event) => setTyped(event.target.value)}
          />
          <p className="ak-field-help">
            Enter the exact name and acknowledge the appointment cancellations to enable closing.
          </p>
        </div>
        <div className="practice-closure__check">
          <Checkbox
            id="practice-closure-ack"
            checked={acknowledged}
            disabled={submitting}
            onCheckedChange={(value) => setAcknowledged(value === true)}
          />
          <label htmlFor="practice-closure-ack" className="ak-label">
            {`I understand that ${counted(cancelling, "appointment", "appointments")} will be cancelled, that email`}
            {" notices are attempted only where there is an address, and that opening the practice again does not bring them back."}
          </label>
        </div>
        {notice && (
          <div className="ak-notice ak-notice--error" role="alert">
            <span className="ak-notice__description">{notice}</span>
          </div>
        )}
        <div className="practice-closure__actions">
          <button type="button" className="btn btn-red" disabled={!ready} onClick={close}>
            {submitting ? <>Closing&hellip;</> : "Close this practice"}
          </button>
        </div>
      </Card>
      </div>
    </div>
  );
};

// A practice switch starts the confirmation over; nothing typed for one practice carries to another.
const PracticeClosurePage = ({ surface = "closure" }: { surface?: Surface }) => {
  const { currentOrganization } = useAuthServiceContext();
  return <ClosureConfirmation key={`${currentOrganization?.id}:${surface}`} surface={surface} />;
};

export default PracticeClosurePage;