import Link from "next/link";
import { formatUsPhone } from "@/lib/checkin/phone";
import type { CheckinDraft, CheckinDraftAction } from "./types";

const checkboxClass =
  "mt-0.5 h-5 w-5 shrink-0 rounded border-slate-300 text-slate-900 " +
  "focus:ring-2 focus:ring-slate-900/20";

/**
 * Step 3 — review the summary and capture consent. Loyalty opt-in (granted
 * later at the POS step), transactional-SMS consent (gates the completion SMS,
 * TCPA), optional marketing opt-in, and an optional "log in to attach" link for
 * anonymous customers.
 */
export function StepReview({
  draft,
  dispatch,
  storeName,
  showLoginLink,
  loginHref,
}: {
  draft: CheckinDraft;
  dispatch: React.Dispatch<CheckinDraftAction>;
  storeName: string;
  showLoginLink: boolean;
  loginHref: string;
}) {
  return (
    <fieldset className="space-y-5 border-0 p-0">
      <legend className="text-base font-semibold text-slate-900">
        Review your check-in
      </legend>

      <dl className="rounded-lg bg-white p-4 text-sm shadow-sm">
        <div className="flex justify-between py-1">
          <dt className="text-slate-500">Name</dt>
          <dd className="font-medium text-slate-900">
            {draft.first_name} {draft.last_name}
          </dd>
        </div>
        <div className="flex justify-between py-1">
          <dt className="text-slate-500">Phone</dt>
          <dd className="font-medium text-slate-900">
            {formatUsPhone(draft.phone)}
          </dd>
        </div>
        <div className="flex justify-between py-1">
          <dt className="text-slate-500">Containers</dt>
          <dd className="font-medium text-slate-900">{draft.container_count}</dd>
        </div>
        {draft.container_description ? (
          <div className="flex justify-between gap-4 py-1">
            <dt className="text-slate-500">Details</dt>
            <dd className="text-right font-medium text-slate-900">
              {draft.container_description}
            </dd>
          </div>
        ) : null}
      </dl>

      <label className="flex items-start gap-3 text-sm text-slate-700">
        <input
          type="checkbox"
          className={checkboxClass}
          checked={draft.opt_loyalty}
          onChange={(e) =>
            dispatch({ type: "set", field: "opt_loyalty", value: e.target.checked })
          }
        />
        <span>
          Join {storeName}&apos;s loyalty program (earn points when staff complete
          your buy).
        </span>
      </label>

      <label className="flex items-start gap-3 text-sm text-slate-700">
        <input
          type="checkbox"
          className={checkboxClass}
          checked={draft.opt_txn}
          onChange={(e) =>
            dispatch({ type: "set", field: "opt_txn", value: e.target.checked })
          }
        />
        <span>
          Text me status updates about my buy (no marketing). Reply STOP to opt
          out.
        </span>
      </label>

      <label className="flex items-start gap-3 text-sm text-slate-700">
        <input
          type="checkbox"
          className={checkboxClass}
          checked={draft.opt_promo}
          onChange={(e) =>
            dispatch({ type: "set", field: "opt_promo", value: e.target.checked })
          }
        />
        <span>Send me occasional promos and deals from {storeName}.</span>
      </label>

      {showLoginLink ? (
        <p className="text-sm text-slate-500">
          Have an Alqove account?{" "}
          <Link href={loginHref} className="font-medium text-slate-900 underline">
            Log in to attach this check-in
          </Link>
          .
        </p>
      ) : null}
    </fieldset>
  );
}