import type { CheckinDraft, CheckinDraftAction } from "./types";
import { normalizeUsPhone } from "@/lib/checkin/phone";

const fieldClass =
  "mt-1 block w-full min-h-12 rounded-lg border border-slate-300 px-4 py-3 text-base " +
  "focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-900/20";

/**
 * Step 1 — who's checking in. Name + a tel-optimized phone field. Phone is
 * stored as normalized US digits so the payload is clean and validation is
 * simple (D-edge: non-US numbers rejected gracefully).
 */
export function StepPhone({
  draft,
  dispatch,
}: {
  draft: CheckinDraft;
  dispatch: React.Dispatch<CheckinDraftAction>;
}) {
  return (
    <div className="space-y-4">
      <div className="grid grid-cols-2 gap-3">
        <div>
          <label htmlFor="ci-first" className="text-sm font-medium text-slate-700">
            First name
          </label>
          <input
            id="ci-first"
            type="text"
            autoComplete="given-name"
            className={fieldClass}
            value={draft.first_name}
            onChange={(e) =>
              dispatch({ type: "set", field: "first_name", value: e.target.value })
            }
          />
        </div>
        <div>
          <label htmlFor="ci-last" className="text-sm font-medium text-slate-700">
            Last name
          </label>
          <input
            id="ci-last"
            type="text"
            autoComplete="family-name"
            className={fieldClass}
            value={draft.last_name}
            onChange={(e) =>
              dispatch({ type: "set", field: "last_name", value: e.target.value })
            }
          />
        </div>
      </div>
      <div>
        <label htmlFor="ci-phone" className="text-sm font-medium text-slate-700">
          Phone number
        </label>
        <input
          id="ci-phone"
          type="tel"
          inputMode="tel"
          autoComplete="tel-national"
          placeholder="(512) 555-1234"
          className={fieldClass}
          value={draft.phone}
          onChange={(e) =>
            dispatch({
              type: "set",
              field: "phone",
              value: normalizeUsPhone(e.target.value),
            })
          }
        />
        <p className="mt-1 text-xs text-slate-500">
          US numbers only. Staff will look you up by phone or your check-in code.
        </p>
      </div>
    </div>
  );
}