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

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

/**
 * THE SUPPORT TICKET FORM - the assistant's escalation, in the assistant's own panel.
 *
 * Spencer, 2026-09-08: *"when you click 'or submit a support ticket' it just displays the support
 * ticket form in the ai assistant overlay."*
 *
 * SO IT IS A VIEW, NOT A DESTINATION. No dialog over a dialog, no new tab, no route: the panel swaps
 * what it is showing and swaps back. Somebody escalating is already stuck, and taking their screen
 * away from them at that moment is how a support ticket turns into a phone call.
 *
 * WHAT THEY DO NOT HAVE TO TYPE is the point of putting it here rather than on a support site. The
 * workspace, the route and the question the assistant just failed to answer are all known, and they
 * are shown so the reader can SEE what is attached rather than trusting that something is.
 *
 * The context is where they were and what they asked - never a capture of the screen. A ticket
 * that scraped the page would carry another patient's name out of a front desk's queue the first
 * time staff raised one.
 */

export type SupportTicketFormProps = {
    /** 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;
    /**
     * Prefills only the first draft with a page-supplied recovery reference.
     * The reader sends the request; this is not its resulting support reference.
     */
    recoveryReference?: string;
};

export const SupportTicketForm = ({
    onBack,
    workspace,
    route,
    lastQuestion,
    recoveryReference,
}: SupportTicketFormProps) => {
    /* The hook, not the context: this service is a thin wrapper over the HTTP client with no
       shared state, so requiring a provider high in the tree would be ceremony that can only fail. */
    const { submitSupportTicket } = useSupportTicketService();

    const [subject, setSubject] = useState(recoveryReference ? "Help with an invitation that is on hold" : "");
    const [body, setBody] = useState(recoveryReference ? `Reference: ${recoveryReference}\n\n` : "");
    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 submitSupportTicket({
                subject: subject.trim(),
                body: body.trim(),
                workspace,
                route,
                lastQuestion,
            });
            setReference(receipt.reference);
        } catch (failure) {
            /*
             * THE TEXT IS NOT CLEARED ON A FAILURE, and that is the whole of the error handling
             * that matters. Somebody has just written out a problem they could not solve; losing it
             * to a failed request is a worse experience than the one that brought them here. The
             * fields keep what they hold, and the button says try again.
             */
            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 ticket 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. We will reply by email.
                </p>
                {/* THE ONLY WAY BACK TO THIS TICKET FOR AS LONG AS IT STAYS OPEN. An email arrives only
                    once somebody replies, so without this link an open ticket has no door back to it at
                    all - the person who just raised it would have to know the URL by heart. A plain
                    anchor rather than `useNavigate`: the widget mounts wherever it is embedded, and
                    cannot assume it sits inside a router context of its own. */}
                <a
                    href="#/dashboard/support"
                    className="mt-2 self-start text-sm font-medium text-primary underline underline-offset-2 hover:no-underline"
                >
                    Follow this ticket
                </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" />
                    Submit a support ticket
                </p>
                <p className="mt-1 text-sm text-ink-muted">
                    This goes to Akashic support. Ask your practice administrator about patients or practice procedures.
                </p>

                <form
                    id="ahr-support-ticket"
                    onSubmit={submit}
                    className="mt-3 space-y-3"
                >
                    {/* 🚨 `htmlFor` AND AN `id`, NOT A LABEL WRAPPED ROUND THE FIELD. Wrapping works
                        for a native control and does NOT work here: `Input` is a component, so what
                        sits inside the label at author time is a tag the checker cannot see through,
                        and the association it reports is the one a browser would actually make.
                        ⚖️ The textarea below wraps and passes for exactly that reason - it is a real
                        `<textarea>`. The difference between these two labels is the whole point, so
                        they are deliberately NOT written the same way.
                        ⛔ Not silenced with a lint exception: the association is the accessible name
                        for this field, and an exception would have left the field unlabelled while
                        reporting that it was fine. */}
                    <label htmlFor="ahr-support-ticket-subject" className="block">
                        <span className="text-sm font-medium text-ink-strong">
                            What is it about?
                        </span>
                    </label>
                    <Input
                        id="ahr-support-ticket-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 rather than an Input: the whole value of a ticket over a phone
                            call is that somebody can take their time and be complete. A one-line
                            field tells them not to. */}
                        <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">
                            Don't include patient names or other identifying details — describe the
                            problem in general terms.
                        </p>
                    </label>

                    {/* SHOWN, NOT HIDDEN. A ticket that silently attaches context is a ticket the
                        reader cannot reason about; one that shows it lets them 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 ticket
                        </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-support-ticket"
                    disabled={sending || !subject.trim() || !body.trim()}
                    className="btn btn-green w-full"
                >
                    {sending ? "Sending…" : "Send it"}
                </button>
            </div>
        </div>
    );
};

export default SupportTicketForm;