import { useEffect, useState } from 'react';
import { AlertTriangle, ShieldCheck } from 'lucide-react';
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '../../../../components/ui/dialog.tsx';
import { Input } from '../../../../components/ui/input.tsx';
import { Label } from '../../../../components/ui/label.tsx';
import { useCredentialRecoveryService } from '../../../../services';
import { useOptionalBillingContext } from '../../../../services/BillingContext.tsx';
import { relayServerFailure } from '../../../../utils/fetchFailureMessage';

// D1/D2 - the receptionist attests an in-person identity check.
// This dialog is the ONLY place in the product where a staff member changes a patient's sign-in
// credential, and routes.ts:2109 refuses that in general. What makes it defensible is the set: an
// attestation naming what was checked, an out-of-band notice to the patient's other channel, and a
// revert link that also locks the account. The disabled-until-complete submit is not politeness - an
// attestation naming no document is an attestation to nothing.
// We record what was CHECKED, never an image of the ID (D2). Do not add an upload here.

// Native <select>, deliberately NOT the Radix ui/select.tsx combobox - this needs to respond to a
// plain DOM `change` event via a real <select>/<option> pair (both for jsdom testability and because
// there is nothing here a listbox popover buys over the platform control). Mirrors
// DiagnosticsDataPage/Observations/SimpleReadingForm.tsx's own measurement picker, the closest prior
// art for a native select paired with <Label htmlFor>.
const ID_TYPE_OPTIONS = [
    { value: '', label: 'Select…' },
    { value: 'drivers-license', label: "Driver's license" },
    { value: 'state-id', label: 'State ID card' },
    { value: 'passport', label: 'Passport' },
    { value: 'military-id', label: 'Military ID' },
    { value: 'other', label: 'Other government-issued ID' },
];

const EMAIL_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

const SELECT_CLASSNAME =
    'border-input dark:bg-input/30 h-9 w-full rounded-md border bg-transparent px-3 py-1 text-sm shadow-xs '
    + 'outline-none transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-ring/50 '
    + 'focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50';

// handlers/CredentialRecovery/attest.ts (infra repo) crafts a specific, actionable `message` for every
// refusal it returns - GATE 1/2 (400/403, no relationship to this patient), the account-locked 409, the
// no-contact-details-on-file 409, the channel-belongs-to-the-attester 409, the verified-too-recently
// 409, and the address-already-in-use 409 all arrive as `{ message }` from the SAME `refuse()` helper.
// There is therefore exactly one client-side rule, not one per status code: show what the server said,
// verbatim, and only fall back to generic copy when there is nothing to show (a network failure, a
// malformed response). Mirrors ReceptionistRegisterPatientDialog.tsx's `serverMessage` helper - the
// same idiom, kept local rather than shared because each dialog's fallback text differs.
const serverMessage = (err: unknown): string | undefined => {
    const raw = relayServerFailure(err, '').trim();
    return raw.length > 0 ? raw : undefined;
};

const describeAttestError = (err: unknown): string =>
    serverMessage(err) ?? 'Could not change the login email. Please try again.';

export interface RecoverLoginEmailDialogProps {
    open: boolean;
    /** Named explicitly - staff act for someone else, there is no "caller's own patient" here. */
    patientId: string;
    /**
 * WHO THIS IS ABOUT, and it is the reason this prop exists rather than a nicety.
 *
 * THIS DIALOG SITS ONE CLICK OFF A LIST ROW, so the failure mode is acting on the WRONG ROW - and
 * a title reading *"this patient's account"* is equally true of every row on the screen. Consequence
 * copy, however good, cannot catch a wrong-subject error; only naming the subject can.
 *
 * OPTIONAL, AND THE FALLBACK IS DELIBERATE. A patient with no recorded name must not produce
 * *"Change Patient's login email"* - a placeholder rendered in the possessive reads as a real name and
 * is worse than the generic sentence it replaced. Absent the original copy, unchanged.
 */
    patientName?: string;
    onOpenChange: (open: boolean) => void;
    /** Fired once the credential has actually changed, so the parent can refresh/close around it. The
 * compensating-control outcome (whether the second channel was reached) is shown by THIS dialog,
 * not handed back - the receptionist needs to see it before the dialog goes away, not after. */
    onRecovered: () => void;
}

interface AttestResult {
    noticeReachedSecondChannel: boolean;
    /** THE MORE IMPORTANT OF THE TWO NOTICE LEGS (attest.ts's own comment, D3/A1): a victim of a
 * false attestation still holds the OLD address; a genuine recoverer has, by definition, lost the
 * other one. Surfaced exactly like `noticeReachedSecondChannel` - a success whose caveat is
 * stated, never silently dropped. */
    oldEmailNotified: boolean;
}

const RecoverLoginEmailDialog = ({ open, patientId, patientName, onOpenChange, onRecovered }: RecoverLoginEmailDialogProps) => {
    const { attestRecovery } = useCredentialRecoveryService();

    const [newEmail, setNewEmail] = useState('');
    const [idType, setIdType] = useState('');
    const [idState, setIdState] = useState('');
    const [idLast4, setIdLast4] = useState('');
    const [idExpiry, setIdExpiry] = useState('');
    const [submitting, setSubmitting] = useState(false);
    const [error, setError] = useState<string | undefined>();
    const [result, setResult] = useState<AttestResult | undefined>();
    // - can the out-of-band notice actually be TEXTED right now? A deployment fact, derived
    // server-side; `undefined` means nobody measured it and the dialog then says nothing.
    // The OPTIONAL accessor, deliberately: the throwing one would take down the only place a
    // receptionist can restore a patient's sign-in, in order to add a caveat to it.
    const smsTransactionalConfigured = useOptionalBillingContext()?.smsTransactionalConfigured;

    // Reset on every open - a prior patient's typed (but never-submitted) identity fields must never
    // survive into a new session, and a prior success screen must never bleed into the next patient.
    useEffect(() => {
        if (open) {
            setNewEmail('');
            setIdType('');
            setIdState('');
            setIdLast4('');
            setIdExpiry('');
            setSubmitting(false);
            setError(undefined);
            setResult(undefined);
        }
    }, [open]);

    // THE ONE CONTROL ON THIS GRANT (routes.ts's own comment: no second approver). ALL FIVE fields -
    // not "an" email and "an" identity field - must be present, mirroring parseAttestBody's identical
    // all-or-nothing check server-side. An attestation naming no document is an attestation to nothing.
    const canSubmit =
        Boolean(newEmail.trim()) && EMAIL_PATTERN.test(newEmail.trim())
        && Boolean(idType)
        && Boolean(idState.trim())
        && Boolean(idLast4.trim())
        && Boolean(idExpiry)
        && !submitting;

    const handleSubmit = async () => {
        if (!canSubmit) return;
        setSubmitting(true);
        setError(undefined);
        try {
            const response = await attestRecovery({
                patientId,
                newEmail: newEmail.trim(),
                verifiedIdType: idType,
                verifiedIdState: idState.trim(),
                verifiedIdLast4: idLast4.trim(),
                verifiedIdExpiry: idExpiry,
            });
            setResult({
                noticeReachedSecondChannel: response.noticeReachedSecondChannel,
                oldEmailNotified: response.oldEmailNotified,
            });
            onRecovered();
        } catch (err) {
            console.error('Failed to attest credential recovery:', err);
            setError(describeAttestError(err));
        } finally {
            setSubmitting(false);
        }
    };

    return (
        <Dialog open={open} onOpenChange={onOpenChange}>
            <DialogContent className="max-w-lg">
                <DialogHeader className="text-left">
                    <DialogTitle>
                        {patientName
                            ? `Change ${patientName}'s login email`
                            : "Change the patient's login email"}
                    </DialogTitle>
                    <DialogDescription>
                        For staff use with the patient present in office and unable to sign in.
                    </DialogDescription>
                </DialogHeader>

                {result ? (
                    <div className="space-y-3">
                        <div className="flex items-start gap-2 text-sm text-foreground">
                            <ShieldCheck className="mt-0.5 size-4 shrink-0 text-green-700" />
                            <p>Login email changed.</p>
                        </div>
                        {/*
                          * 🚨 SHOWN FIRST, deliberately — this is the MORE important of the two notice
                          * legs (attest.ts's own comment, D3/A1): a victim of a false attestation still
                          * holds the old address; a genuine recoverer has, by definition, lost the other
                          * one. A receptionist must not be able to miss this to see the second-channel
                          * caveat below it.
                          */}
                        {!result.oldEmailNotified && (
                            <div className="flex items-start gap-2 rounded bg-amber-50 px-3 py-2 text-sm text-amber-800">
                                <AlertTriangle className="mt-0.5 size-4 shrink-0" />
                                <p>
                                    Changed — but we could not notify the previous email address, so whoever
                                    holds it will not know this happened.
                                </p>
                            </div>
                        )}
                        {!result.noticeReachedSecondChannel && (
                            <div className="flex items-start gap-2 rounded bg-amber-50 px-3 py-2 text-sm text-amber-800">
                                <AlertTriangle className="mt-0.5 size-4 shrink-0" />
                                <p>
                                    Changed — but we could not notify this patient on a second channel, so they
                                    will not be alerted.
                                </p>
                            </div>
                        )}
                    </div>
                ) : (
                    <div className="space-y-3">
                        {/* 🚨 CARD 224 — BEFORE THE IRREVERSIBLE STEP, NOT AFTER IT.
                          *
                          * The caveats above are truthful and arrive one step too late: the receptionist
                          * changes a patient's sign-in credential — irreversibly, from their side — and
                          * only then learns nobody could be told. routes.ts calls this door "an
                          * account-takeover primitive made survivable by D3's notice and D4's revert", so
                          * when the SMS leg cannot land, the primitive is running without half of what
                          * makes it defensible, and the person deciding finds out afterwards.
                          *
                          * 📌 Not hypothetical: with the transactional stream unprovisioned this is the
                          * outcome on EVERY attestation, not a rare edge.
                          *
                          * ⛔ IT DOES NOT GATE ANYTHING. The submit stays enabled and the flow is
                          * unchanged. The tech-averse, in-office patient with no mobile is precisely who
                          * this path exists for — hiding recovery from them would invert its purpose.
                          * This states a fact so the receptionist can decide; it does not decide for them.
                          *
                          * ⚠️ `=== false` ONLY. `undefined` is NOT KNOWN (a server without the field, or
                          * a failed billing read), and warning about a channel nobody measured is the
                          * false-assertion class this codebase keeps paying for. */}
                        {smsTransactionalConfigured === false && (
                            <div className="flex items-start gap-2 rounded bg-amber-50 px-3 py-2 text-sm text-amber-800">
                                <AlertTriangle className="mt-0.5 size-4 shrink-0" />
                                <p>
                                    Text messaging is not set up, so this patient will not get a text about
                                    the change. If their old email is also unreachable, nobody will be able
                                    to tell them it happened.
                                </p>
                            </div>
                        )}
                        <div className="space-y-1">
                            <Label htmlFor="recover-login-new-email">New login email</Label>
                            <Input
                                id="recover-login-new-email"
                                type="email"
                                value={newEmail}
                                onChange={(e) => setNewEmail(e.target.value)}
                                disabled={submitting}
                                placeholder="patient@example.com"
                                autoFocus
                            />
                        </div>

                        <div className="grid grid-cols-2 gap-3">
                            <div className="space-y-1">
                                <Label htmlFor="recover-login-id-type">ID type</Label>
                                <select
                                    id="recover-login-id-type"
                                    className={SELECT_CLASSNAME}
                                    value={idType}
                                    onChange={(e) => setIdType(e.target.value)}
                                    disabled={submitting}
                                >
                                    {ID_TYPE_OPTIONS.map((option) => (
                                        <option key={option.value || 'placeholder'} value={option.value}>
                                            {option.label}
                                        </option>
                                    ))}
                                </select>
                            </div>
                            <div className="space-y-1">
                                <Label htmlFor="recover-login-id-state">Issuing state</Label>
                                <Input
                                    id="recover-login-id-state"
                                    value={idState}
                                    onChange={(e) => setIdState(e.target.value)}
                                    disabled={submitting}
                                    placeholder="IA"
                                />
                            </div>
                        </div>

                        <div className="grid grid-cols-2 gap-3">
                            <div className="space-y-1">
                                <Label htmlFor="recover-login-id-last4">Last 4 of ID number</Label>
                                <Input
                                    id="recover-login-id-last4"
                                    value={idLast4}
                                    onChange={(e) => setIdLast4(e.target.value)}
                                    disabled={submitting}
                                    inputMode="numeric"
                                    maxLength={4}
                                    placeholder="1234"
                                />
                            </div>
                            <div className="space-y-1">
                                <Label htmlFor="recover-login-id-expiry">Expiry date</Label>
                                <Input
                                    id="recover-login-id-expiry"
                                    type="date"
                                    value={idExpiry}
                                    onChange={(e) => setIdExpiry(e.target.value)}
                                    disabled={submitting}
                                />
                            </div>
                        </div>

                        {error && (
                            <div className="rounded bg-destructive/10 px-3 py-2 text-sm text-destructive">
                                {error}
                            </div>
                        )}

                        {/*
                          * The staff member is making a claim, not clearing a checkbox. Bold sentence is the
                          * claim itself; the rest is what it means for them. NEVER mention a photo/scan being
                          * stored — D2 is a deliberate decision not to become a store of identity documents,
                          * and whether to ever capture one is a product question Spencer has not settled.
                          *
                          * 🚨 REVERSAL WORDING INTENTIONALLY REMOVED (coordinator review, post-Task-11). The
                          * original copy promised "The patient will be notified on their other contact method
                          * and can reverse it." That is not true today, on either leg:
                          *   - CredentialRevertPage.tsx (Task 12) does not exist anywhere in this repo — the
                          *     emailed revert link points at a route that renders nothing.
                          *   - The SMS leg cannot send until 10DLC carrier registration completes
                          *     (SMS_ORIGINATION_IDENTITY_TRANSACTIONAL was empty on the deployed Lambda as of
                          *     this review).
                          *   - The old-address email deliberately carries NO link at all (Spencer ruled a
                          *     practice's domain in a URL is itself PHI, since that address may be held by
                          *     someone who is not the patient).
                          * A UI asserting a safeguard that does not exist is worse than one that says nothing
                          * — it tells the receptionist the action is safer than it is, exactly when they are
                          * deciding whether to take it. The copy below claims ONLY what is true today: an
                          * email to the previous address. Restore the reversal claim ONLY once Task 12 ships
                          * AND the SMS leg can actually send — as a deliberate edit, not a "the copy looks
                          * incomplete" touch-up.
                          */}
                        <p className="text-sm text-muted-foreground">
                            <strong className="text-foreground">
                                You are recording that you checked this person&apos;s photo ID in person.
                            </strong>{' '}
                            This is recorded against your name and is auditable. The patient will be emailed at
                            their previous address that their sign-in email changed.
                        </p>

                        <div className="flex justify-end pt-2">
                            <button
                                type="button"
                                className="btn btn-blue"
                                onClick={() => void handleSubmit()}
                                disabled={!canSubmit}
                            >
                                {submitting ? 'Changing…' : 'Change the login email'}
                            </button>
                        </div>
                    </div>
                )}
            </DialogContent>
        </Dialog>
    );
};

export default RecoverLoginEmailDialog;