import { useState } from "react";
import { ArrowLeft, LifeBuoy } from "lucide-react";

import { usePatientSupportService } from "../../services/PatientSupportService.tsx";
import { relayServerFailure } from "../../utils/fetchFailureMessage";
import { Input } from "../ui/input.tsx";

/**
 * A patient reporting that the portal itself is broken, from the assistant's own panel.
 *
 * The practice's form is a separate component reaching separate routes, and they are not merged.
 * The server keys a patient's ticket on their account, outside every practice partition; one
 * component switching on the mount is the only way those two could meet in this client.
 *
 * A view, not a destination: the panel swaps what it shows and swaps back. Somebody reporting a
 * fault is already stuck, and taking their screen away at that moment is how a report turns into a
 * telephone call to the practice, which cannot fix it.
 */

export type PatientSupportTicketFormProps = {
    /** Back to the conversation. The panel stays open either way. */
    onBack: () => void;
    /** The surface being helped with, in the reader's terms. */
    workspace: string;
    /** The in-app route, so support can open the screen rather than ask which one. */
    route: string;
    /** The last thing asked of the assistant, when there was one. */
    lastQuestion?: string;
};

export const PatientSupportTicketForm = ({
    onBack,
    workspace,
    route,
    lastQuestion,
}: PatientSupportTicketFormProps) => {
    const { submitPatientSupportTicket } = usePatientSupportService();

    const [subject, setSubject] = useState("");
    const [body, setBody] = useState("");
    const [sending, setSending] = useState(false);
    const [error, setError] = useState<string | null>(null);
    const [reference, setReference] = useState<string | null>(null);

    const submit = async (event: React.FormEvent) => {
        event.preventDefault();
        if (sending || !subject.trim() || !body.trim()) return;

        setSending(true);
        setError(null);
        try {
            const receipt = await submitPatientSupportTicket({
                subject: subject.trim(),
                body: body.trim(),
                workspace,
                route,
                lastQuestion,
            });
            setReference(receipt.reference);
        } catch (failure) {
            /*
             * The fields keep what they hold. Somebody has just written out a problem they could not
             * solve, and losing it to a failed request is worse than the thing that brought them here.
             */
            setError(
                relayServerFailure(failure, "That could not be sent just now. Your message is still here — try again."),
            );
        } finally {
            setSending(false);
        }
    };

    if (reference) {
        return (
            <div className="flex min-h-0 flex-1 flex-col p-3">
                <p className="text-sm font-medium text-ink-strong">Your report is in.</p>
                <p className="mt-1 text-sm text-ink-muted">
                    Quote <span className="font-medium text-ink-strong">{reference}</span> if you get
                    in touch about it. The answer appears on your support screen.
                </p>
                {/* The only way back to this ticket until somebody answers it. A plain anchor rather
                    than `useNavigate`: the widget mounts wherever it is embedded and cannot assume a
                    router context of its own. */}
                <a
                    href="#/dashboard/my-support"
                    className="mt-2 self-start text-sm font-medium text-primary underline underline-offset-2 hover:no-underline"
                >
                    See your support tickets
                </a>
                <button
                    type="button"
                    onClick={onBack}
                    className="mt-3 self-start text-sm font-medium text-primary underline underline-offset-2 hover:no-underline"
                >
                    Back to the assistant
                </button>
            </div>
        );
    }

    return (
        <div className="flex min-h-0 flex-1 flex-col">
            <div className="thin-scrollbar min-h-0 flex-1 overflow-y-auto p-3">
                <button
                    type="button"
                    onClick={onBack}
                    className="flex items-center gap-1.5 text-sm font-medium text-primary hover:underline"
                >
                    <ArrowLeft className="size-3.5" aria-hidden="true" />
                    Back to the assistant
                </button>

                <p className="mt-3 flex items-center gap-1.5 text-sm font-medium text-ink-strong">
                    <LifeBuoy className="size-4 text-warning" aria-hidden="true" />
                    Report a problem
                </p>
                <p className="mt-1 text-sm text-ink-muted">
                    This goes to Akashic support. For care, appointments, or bills, message your practice.
                </p>

                <form
                    id="ahr-patient-support-ticket"
                    onSubmit={submit}
                    className="mt-3 space-y-3"
                >
                    {/* `htmlFor` and an `id` rather than a label wrapped round the field: `Input` is a
                        component, so a wrapping label associates with nothing a browser can see. The
                        textarea below wraps because it is a real `<textarea>`. */}
                    <label htmlFor="ahr-patient-support-subject" className="block">
                        <span className="text-sm font-medium text-ink-strong">
                            What is it about?
                        </span>
                    </label>
                    <Input
                        id="ahr-patient-support-subject"
                        value={subject}
                        onChange={(event) => setSubject(event.target.value)}
                        placeholder="One line"
                        className="mt-1"
                        required
                    />

                    <label className="block">
                        <span className="text-sm font-medium text-ink-strong">
                            What happened?
                        </span>
                        {/* A textarea, not an Input: the value of writing a report rather than
                            telephoning is having room to be complete. */}
                        <textarea
                            value={body}
                            onChange={(event) => setBody(event.target.value)}
                            rows={6}
                            placeholder="What you were doing, and what happened instead."
                            className="mt-1 w-full rounded-[2px] border border-border bg-surface p-2 text-sm text-ink"
                            required
                        />
                        <p className="mt-1 text-xs text-ink-muted">
                            Describe the problem without including health details or other personal information.
                        </p>
                    </label>

                    {/* Shown rather than hidden, so the reader can see they do not have to describe
                        where they were. */}
                    <div className="rounded-[2px] border border-line-soft bg-muted p-2">
                        <p className="text-step-11 font-medium uppercase tracking-[0.05em] text-ink-muted">
                            Sent with your report
                        </p>
                        <p className="mt-1 text-sm text-ink-muted">{workspace}</p>
                        <p className="text-sm text-ink-muted">{route}</p>
                        {lastQuestion && (
                            <p className="mt-1 text-sm text-ink-muted">
                                Your last question: “{lastQuestion}”
                            </p>
                        )}
                    </div>

                    {error && (
                        <p role="alert" className="text-sm font-medium text-destructive">
                            {error}
                        </p>
                    )}
                </form>
            </div>

            {/* Pinned, like the assistant's composer, so a long description never pushes the send
                button off the bottom of the panel. */}
            <div className="shrink-0 border-t border-border p-3">
                <button
                    type="submit"
                    form="ahr-patient-support-ticket"
                    disabled={sending || !subject.trim() || !body.trim()}
                    className="btn btn-green w-full"
                >
                    {sending ? "Sending…" : "Send it"}
                </button>
            </div>
        </div>
    );
};

export default PatientSupportTicketForm;