import { useEffect, useRef, useState, type ReactNode } from 'react';
import { ArrowLeft, Loader2, TriangleAlert } from 'lucide-react';
import { toast } from 'sonner';
import {
    FORM_SUBMISSION_STATUS_LABELS,
    FormSubmission,
    useFormSubmissionsService,
} from '../../../services/FormSubmissionsService.tsx';
import { useQuestionnaireServiceContext } from '../../../services/QuestionnaireService.tsx';
import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogHeader,
    DialogTitle,
} from '../../../components/ui/dialog.tsx';
import { operationStatusToast } from '../../../components/OperationStatusToast/OperationStatusToast.tsx';
import AttachSubmissionToPatient from './AttachSubmissionToPatient.tsx';
import { attachedPatientLabel } from './attachedPatientLabel';
import FormSubmissionReply, { SentReplies } from './FormSubmissionReply.tsx';
import QuarantinedAttachments from './QuarantinedAttachments.tsx';
import { SubmissionStatus, fullWhen } from './submissionDisplay.tsx';
import './FormSubmissionsPage.css';
import { relayServerFailure } from '../../../utils/fetchFailureMessage';
import { usePatientNamesByIds } from '../../../hooks/useAppointmentPatientNames';

type PendingAction = 'in_progress' | 'resolve' | null;
type Step = 'review' | 'attach' | 'reply' | 'discard';
type Outcome = { kind: 'progress' | 'attached' | 'replied'; text: string };

interface FormSubmissionDetailDialogProps {
    submission: FormSubmission | null;
    open: boolean;
    onOpenChange: (open: boolean) => void;
    onUpdated: (submission: FormSubmission) => void;
    /** Which form it came from, as the list names it. */
    formLabel?: string;
}

const STEP_TITLES: Record<Step, string> = {
    review: 'Form Submission',
    attach: 'Attach to a patient',
    reply: 'Reply by email',
    discard: 'Discard this reply?',
};

// Turns a slug-style Questionnaire linkId (e.g. "emergency_contact-phone" or "preferredName")
// into a readable fallback label. Only used when the real question text can't be resolved from
// the Questionnaire AND the linkId isn't an opaque id.
const prettifyLinkId = (linkId: string): string => {
    if (!linkId) {
        return 'Answer';
    }
    const spaced = linkId
        .replace(/[-_]+/g, ' ')
        .replace(/([a-z0-9])([A-Z])/g, '$1 $2');
    return spaced
        .split(' ')
        .filter(Boolean)
        .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
        .join(' ');
};

// A UUID-shaped linkId carries no human meaning, so it falls back to a positional label.
const isUuidLike = (linkId: string): boolean =>
    /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(linkId);

// Walk a Questionnaire's items (groups nest) and build linkId -> item.text. The submission only
// stores {linkId, value}, so this map is what turns the id into the real question label.
type QLabelItem = { linkId?: string; text?: string; item?: QLabelItem[] };
const collectQuestionnaireLabels = (
    items: QLabelItem[] | undefined,
    into: Record<string, string> = {},
): Record<string, string> => {
    for (const item of items ?? []) {
        if (item.linkId && item.text) {
            into[item.linkId] = item.text;
        }
        if (item.item?.length) {
            collectQuestionnaireLabels(item.item, into);
        }
    }
    return into;
};

const formatAnswerValue = (value: unknown): string => {
    if (value === null || value === undefined || value === '') {
        return '—';
    }
    if (typeof value === 'boolean') {
        return value ? 'Yes' : 'No';
    }
    if (Array.isArray(value)) {
        return value.length ? value.map((entry) => formatAnswerValue(entry)).join(', ') : '—';
    }
    if (typeof value === 'object') {
        try {
            return JSON.stringify(value);
        } catch {
            return String(value);
        }
    }
    return String(value);
};

const Alert = ({ title, children }: { title: string; children: ReactNode }) => (
    <div className="ak-notice ak-notice--error ahr-form-submissions__alert" role="alert">
        <TriangleAlert className="ahr-form-submissions__alert-icon" aria-hidden="true" />
        <div>
            <p className="ahr-form-submissions__alert-title">{title}</p>
            {children}
        </div>
    </div>
);

/**
 * One overlay for one submission. Keyed by its id, so nothing typed or loaded for one submission -
 * a reply draft, a note, a search, a late answer - can appear under another.
 */
const FormSubmissionDetailDialog = (props: FormSubmissionDetailDialogProps) =>
    props.submission
        ? <SubmissionOverlay key={props.submission.submissionId} {...props} submission={props.submission} />
        : null;

const SubmissionOverlay = ({
    submission,
    open,
    onOpenChange,
    onUpdated,
    formLabel,
}: FormSubmissionDetailDialogProps & { submission: FormSubmission }) => {
    const { updateSubmission } = useFormSubmissionsService();
    const { fetchQuestionnaire } = useQuestionnaireServiceContext();

    const [current, setCurrent] = useState<FormSubmission>(submission);
    const [step, setStep] = useState<Step>('review');
    const [outcome, setOutcome] = useState<Outcome | null>(null);
    const [draft, setDraft] = useState('');
    const [resolutionNote, setResolutionNote] = useState('');
    const [pendingAction, setPendingAction] = useState<PendingAction>(null);
    const [childBusy, setChildBusy] = useState(false);
    const [progressError, setProgressError] = useState<string | undefined>();
    const [resolveError, setResolveError] = useState<string | undefined>();
    const [replyError, setReplyError] = useState<string | undefined>();
    const [answerLabels, setAnswerLabels] = useState<Record<string, string>>({});

    // A write can outlive this overlay; its answer still reaches the list but never this screen.
    const alive = useRef(true);
    useEffect(() => () => { alive.current = false; }, []);

    // Real question labels from the Questionnaire; a failed read falls back to the linkId labels.
    useEffect(() => {
        const questionnaireId = submission.questionnaireId;
        if (!questionnaireId) return;
        let cancelled = false;
        fetchQuestionnaire(questionnaireId)
            .then((questionnaire) => {
                if (!cancelled) {
                    setAnswerLabels(collectQuestionnaireLabels(questionnaire?.item as QLabelItem[] | undefined));
                }
            })
            .catch((err) => {
                console.error('Failed to load questionnaire labels for form submission:', err);
            });
        return () => {
            cancelled = true;
        };
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [submission.questionnaireId]);

    const busy = pendingAction !== null || childBusy;
    const status = current.status;
    const isTerminal = status === 'resolved' || status === 'converted';
    const name = current.submitterContact?.name;
    const recipient = current.submitterContact?.email?.trim();
    const replies = current.replies ?? [];
    const { names: patientNames, birthDates } = usePatientNamesByIds(status === 'converted' ? [current.promotedPatientId] : []);
    const attachedName = current.promotedPatientId && patientNames[current.promotedPatientId]
        ? attachedPatientLabel(patientNames[current.promotedPatientId], birthDates?.[current.promotedPatientId])
        : undefined;

    const runUpdate = async (
        action: Exclude<PendingAction, null>,
        update: () => Promise<FormSubmission>,
    ): Promise<FormSubmission | 'failed' | 'gone'> => {
        setPendingAction(action);
        const toastId = operationStatusToast.saving();
        try {
            const updated = await update();
            onUpdated(updated);
            if (!alive.current) return 'gone';
            setCurrent(updated);
            return updated;
        } catch (err) {
            console.error('Failed to update form submission:', err);
            if (!alive.current) return 'gone';
            const message = relayServerFailure(err, 'The submission was not changed.');
            if (action === 'resolve') setResolveError(message);
            else setProgressError(message);
            return 'failed';
        } finally {
            operationStatusToast.dismiss(toastId);
            if (alive.current) setPendingAction(null);
        }
    };

    const handleMarkInProgress = async () => {
        if (busy) return;
        setProgressError(undefined);
        const result = await runUpdate('in_progress', () =>
            updateSubmission(current.submissionId, { status: 'in_progress' }),
        );
        if (typeof result === 'object') {
            setOutcome({ kind: 'progress', text: 'This submission is now in progress. No reply was sent and no patient record was attached.' });
        }
    };

    const handleResolve = async () => {
        if (busy) return;
        const trimmedNote = resolutionNote.trim();
        const result = await runUpdate('resolve', () =>
            updateSubmission(current.submissionId, {
                status: 'resolved',
                ...(trimmedNote ? { resolutionNote: trimmedNote } : {}),
            }),
        );
        // Resolve closes to the same list; only a confirmed save does.
        if (typeof result === 'object') {
            setResolveError(undefined);
            toast.success('Submission resolved');
            onOpenChange(false);
        }
    };

    // X, Escape and the scrim all come here. An unsent reply asks first; a write in flight holds.
    const requestClose = () => {
        if (busy) return;
        if (step === 'discard') {
            setStep('reply');
            return;
        }
        if (draft.trim()) {
            setStep('discard');
            return;
        }
        onOpenChange(false);
    };

    const backToReview = () => {
        setStep('review');
        setOutcome(null);
    };

    const facts = (
        <dl className="ahr-form-submissions__facts">
            <div>
                <dt>Submitted by</dt>
                <dd>{name || 'Anonymous / no contact provided'}</dd>
            </div>
            {formLabel && (
                <div>
                    <dt>Form</dt>
                    <dd>{formLabel}</dd>
                </div>
            )}
            {recipient && (
                <div>
                    <dt>Email entered on form</dt>
                    <dd>{recipient}</dd>
                </div>
            )}
            <div>
                <dt>Submitted</dt>
                <dd>{fullWhen(current.createdAt)}</dd>
            </div>
            {current.submitterContact?.phone && (
                <div>
                    <dt>Phone entered on form</dt>
                    <dd>{current.submitterContact.phone}</dd>
                </div>
            )}
        </dl>
    );

    // The form copies its Message answer into `message` for the list's one-line summary; the answers already say it.
    const messageIsAnAnswer = !!current.message
        && current.answers.some((answer) => formatAnswerValue(answer.value).trim() === current.message?.trim());

    const answers = (
        <>
            {(current.message || current.answers.length > 0) && (
                <h4 className="ahr-form-submissions__heading">Answers</h4>
            )}
            {current.message && !messageIsAnAnswer && (
                <div className="ahr-form-submissions__answer">
                    <span className="ahr-form-submissions__answer-label">Message</span>
                    <p className="ahr-form-submissions__answer-value">{current.message}</p>
                </div>
            )}
            {current.answers.map((answer, index) => (
                <div className="ahr-form-submissions__answer" key={`${answer.linkId}-${index}`}>
                    <span className="ahr-form-submissions__answer-label">
                        {answerLabels[answer.linkId] ||
                            (isUuidLike(answer.linkId) ? `Question ${index + 1}` : prettifyLinkId(answer.linkId))}
                    </span>
                    <p className="ahr-form-submissions__answer-value">{formatAnswerValue(answer.value)}</p>
                </div>
            ))}
            {/* The files a stranger attached are part of what was sent in, so they follow the answers. */}
            <QuarantinedAttachments submissionId={current.submissionId} attachmentKeys={current.attachmentKeys} attachmentNames={current.attachmentNames} />
        </>
    );

    // What staff did about it: shown on the details, not repeated under a success message.
    const history = (
        <>
            {current.resolutionNote && (
                <>
                    <h4 className="ahr-form-submissions__heading">Internal note</h4>
                    <p className="ahr-form-submissions__answer-value">{current.resolutionNote}</p>
                </>
            )}
            {replies.length > 0 && (
                <>
                    <h4 className="ahr-form-submissions__heading">Replies sent</h4>
                    <SentReplies replies={replies} />
                </>
            )}
        </>
    );

    const noteField = (
        <div className="ahr-form-submissions__field">
            <label className="ahr-form-submissions__heading" htmlFor="form-submission-resolution-note">
                Resolution note
            </label>
            <textarea
                id="form-submission-resolution-note"
                className="ahr-form-submissions__input"
                value={resolutionNote}
                onChange={(event) => setResolutionNote(event.target.value)}
                disabled={busy}
                rows={3}
                placeholder="Add a note for your team before resolving…"
            />
        </div>
    );

    const resolveButton = (label: string) => (
        <button type="button" className="btn btn-green" onClick={() => void handleResolve()} disabled={busy}>
            {pendingAction === 'resolve' && <Loader2 className="animate-spin" aria-hidden="true" />}
            {pendingAction === 'resolve' ? 'Resolving…' : label}
        </button>
    );

    const backButton = (label: string, onClick: () => void) => (
        <button type="button" className="btn btn-blue-ghost-sm" onClick={onClick} disabled={busy}>
            <ArrowLeft aria-hidden="true" />
            {label}
        </button>
    );

    const renderStep = () => {
        if (step === 'attach') {
            return (
                <AttachSubmissionToPatient
                    submission={current}
                    facts={facts}
                    onBack={backToReview}
                    onBusyChange={setChildBusy}
                    onAttached={(result, patientName) => {
                        const attached = { ...current, status: result.status, promotedPatientId: result.promotedPatientId };
                        onUpdated(attached);
                        if (!alive.current) return;
                        setCurrent(attached);
                        setStep('review');
                        setOutcome({ kind: 'attached', text: `Attached to ${patientName}. No email was sent by attaching the submission.` });
                    }}
                />
            );
        }

        if (step === 'reply' && recipient) {
            return (
                <FormSubmissionReply
                    submission={current}
                    facts={facts}
                    draft={draft}
                    onDraftChange={setDraft}
                    onBack={() => setStep('review')}
                    onBusyChange={setChildBusy}
                    error={replyError}
                    onErrorChange={setReplyError}
                    onReplySent={(reply) => {
                        // Appended locally; the server owns the list and the next read replaces it.
                        const replied = { ...current, replies: [...replies, reply] };
                        onUpdated(replied);
                        if (!alive.current) return;
                        setCurrent(replied);
                        setDraft('');
                        setReplyError(undefined);
                        setStep('review');
                        setOutcome({
                            kind: 'replied',
                            text: `Reply sent to ${reply.to || recipient}. Resolve the submission separately when the work is complete.`,
                        });
                    }}
                />
            );
        }

        if (step === 'discard') {
            return (
                <>
                    <div className="ahr-form-submissions__body">
                        <p className="ahr-form-submissions__plain">Your reply to {recipient} has not been sent.</p>
                        <p className="ahr-form-submissions__plain">The submission stays unchanged.</p>
                    </div>
                    <div className="ahr-form-submissions__footer">
                        {backButton('Back to reply', () => setStep('reply'))}
                        <span className="ahr-form-submissions__spacer" />
                        <button
                            type="button"
                            className="btn btn-red"
                            onClick={() => {
                                setDraft('');
                                onOpenChange(false);
                            }}
                        >
                            Discard reply
                        </button>
                    </div>
                </>
            );
        }

        if (resolveError !== undefined) {
            return (
                <>
                    <div className="ahr-form-submissions__body">
                        <p className="ahr-form-submissions__plain">
                            {[name || 'Anonymous', formLabel].filter(Boolean).join(' · ')}
                        </p>
                        <SubmissionStatus status={status} className="ahr-form-submissions__status--tag" />
                        <Alert title="Submission not resolved">
                            <p className="ahr-form-submissions__alert-text">
                                The saved status is still {FORM_SUBMISSION_STATUS_LABELS[status]}. Your resolution note is retained.
                            </p>
                            <p className="ahr-form-submissions__alert-text">{resolveError}</p>
                        </Alert>
                        {noteField}
                    </div>
                    <div className="ahr-form-submissions__footer">
                        {backButton('Back', () => setResolveError(undefined))}
                        <span className="ahr-form-submissions__spacer" />
                        {resolveButton('Retry resolve')}
                    </div>
                </>
            );
        }

        if (outcome) {
            return (
                <>
                    <div className="ahr-form-submissions__body">
                        {facts}
                        <SubmissionStatus status={status} className="ahr-form-submissions__status--tag" />
                        <p className="ak-notice ak-notice--success ahr-form-submissions__success" role="status">{outcome.text}</p>
                        {answers}
                    </div>
                    <div className="ahr-form-submissions__footer">
                        {backButton('Back to details', backToReview)}
                        <span className="ahr-form-submissions__spacer" />
                        {!isTerminal && resolveButton('Resolve')}
                    </div>
                </>
            );
        }

        return (
            <>
                <div className="ahr-form-submissions__body">
                    {facts}
                    <SubmissionStatus status={status} className="ahr-form-submissions__status--tag" />
                    {/* Named on every reopening, under the chip as drawn; when the record cannot be read the plain line below stands in. */}
                    {status === 'converted' && attachedName && (
                        <p className="ak-notice ak-notice--success ahr-form-submissions__success">
                            Attached to {attachedName}. No email was sent by attaching the submission.
                        </p>
                    )}
                    {progressError && (
                        <Alert title="Not marked in progress">
                            <p className="ahr-form-submissions__alert-text">{progressError}</p>
                        </Alert>
                    )}
                    {answers}
                    {history}
                    <p className="ahr-form-submissions__note">
                        Information entered on a public form is not verified patient identity.
                    </p>
                    {status === 'converted' && !attachedName && (
                        <p className="ahr-form-submissions__note">These answers are on the patient&rsquo;s record.</p>
                    )}
                    {/* Stated rather than a disabled button: the receptionist's next move is a phone call. */}
                    {!recipient && (
                        <p className="ahr-form-submissions__note">
                            This submission did not include an email address, so there is nowhere to send a reply.
                        </p>
                    )}
                    <div className="ahr-form-submissions__actions">
                        {status !== 'converted' && (
                            <button type="button" className="btn btn-blue-ghost-sm" disabled={busy} onClick={() => setStep('attach')}>
                                Attach to a patient
                            </button>
                        )}
                        {/* One reply per submission: once sent, what was said shows above and the next move is Resolve. */}
                        {recipient && replies.length === 0 && (
                            <button type="button" className="btn btn-blue-ghost-sm" disabled={busy} onClick={() => setStep('reply')}>
                                Reply by email
                            </button>
                        )}
                    </div>
                    {!isTerminal && noteField}
                </div>
                {!isTerminal && (
                    <div className="ahr-form-submissions__footer">
                        {status === 'new' && (
                            <button
                                type="button"
                                className="btn btn-blue-ghost-sm"
                                onClick={() => void handleMarkInProgress()}
                                disabled={busy}
                            >
                                {pendingAction === 'in_progress' && <Loader2 className="animate-spin" aria-hidden="true" />}
                                Mark in progress
                            </button>
                        )}
                        <span className="ahr-form-submissions__spacer" />
                        {resolveButton('Resolve')}
                    </div>
                )}
            </>
        );
    };

    return (
        <Dialog
            open={open}
            onOpenChange={(next) => {
                if (next) onOpenChange(true);
                else requestClose();
            }}
        >
            <DialogContent className="ahr-form-submissions__sheet">
                <DialogHeader className="ahr-form-submissions__head">
                    <DialogTitle>{STEP_TITLES[step]}</DialogTitle>
                    <DialogDescription className="sr-only">
                        A submission from a public website form.
                    </DialogDescription>
                </DialogHeader>
                {renderStep()}
            </DialogContent>
        </Dialog>
    );
};

export default FormSubmissionDetailDialog;