import { useState } from "react";
import { useParams } from "react-router-dom";
import { AlertCircle, ArrowLeft, Loader2, MessagesSquare } from "lucide-react";
import { Alert, AlertDescription } from "../../../components/ui/alert.tsx";
import { Badge } from "../../../components/ui/badge.tsx";
import { EmptyState } from "../../../components/ui/empty-state.tsx";
import {
    useSupportTicketThread,
    TICKET_STATUS_LABELS,
    TICKET_STATUS_VARIANT,
    TICKET_HOLDER_LABELS,
    type SupportTicketThreadEvent,
} from "../../../hooks/useSupportTickets";
import { formatDateTime } from "../../../utils/dateUtils";

/**
 * ONE TICKET, ITS THREAD, AND THE REPLY BOX THAT FOLLOWS IT - what a practice sees after raising a
 * ticket from the assistant's escalation form. `SupportPage` is the list this screen is reached from;
 * this is what opens when a row (or the emailed "Open this ticket" link) is followed.
 *
 * THE REPLY BOX DISAPPEARS ON A RESOLVED TICKET, not because the route refuses it (the server does
 * that too, with a 409) but because a form that is always there invites a reply the server will only
 * reject a moment later - the same shape of gap the widget's own send button avoids by disabling on
 * an empty draft.
 *
 * The status label, Badge variant and holder label maps live in `useSupportTickets.ts`, not here - see
 * that file's comment for why a second copy is the wrong move on a screen where the status word is
 * the signal.
 */

/**
 * Who said it, in the reader's own terms - never an account id, and never guessed when it is blank.
 *
 * THREE SIDES, NOT TWO. A ticket is raised with the contractor managing this practice's platform, but
 * escalation can move it to Akashic and hand-back can move it back - so one thread can hold replies
 * from both. This reads `event.side`, the side that WROTE that message, rather than inferring from
 * who holds the ticket now: a hand-back or a link ending is exactly the moment those two stop
 * agreeing, and re-labelling an old reply to match a new holder would misattribute who actually wrote
 * it. "Your contractor" and "Akashic support" are the same two words `moveDescription` below uses for
 * the same two destinations, so the thread reads as one vocabulary throughout.
 */
const speakerLabel = (event: SupportTicketThreadEvent): string => {
    if (event.side === "contractor") return event.authorName ? `${event.authorName} · Your contractor` : "Your contractor";
    if (event.side === "akashic") return event.authorName ? `${event.authorName} · Akashic support` : "Akashic support";
    return event.authorName || "Your practice";
};

/**
 * Plain words for an ownership move - `kind` is a database word and `movedTo` is the server's
 * `AKASHIC` / `CONTRACTOR#<id>` shape, and neither belongs in front of a practice reading their own
 * ticket. A link ending says only that the relationship ended, never why: that is between the
 * practice and their contractor, and this thread is not the place to characterise it.
 */
const moveDescription = (event: SupportTicketThreadEvent): string => {
    const destination = event.movedTo === "AKASHIC" ? "Akashic support" : "your contractor";
    switch (event.kind) {
        case "escalation":
            return `Escalated to ${destination}.`;
        case "hand-back":
            return `Handed back to ${destination}.`;
        case "link-ended":
            return "Moved to Akashic support because the contractor relationship ended.";
        default:
            return "This ticket's owner changed.";
    }
};

export const SupportTicketDetail = () => {
    const { ticketId } = useParams<{ ticketId: string }>();
    const { ticket, events, loading, error, notFound, reply, replying, replyError } =
        useSupportTicketThread(ticketId);
    const [draft, setDraft] = useState("");

    const submitReply = async (formEvent: React.FormEvent) => {
        formEvent.preventDefault();
        if (!draft.trim() || replying) return;
        try {
            await reply(draft.trim());
            setDraft("");
        } catch {
            // `replyError` already carries what to say. The draft is kept, on the same reasoning
            // `SupportTicketForm` states for its own send failure: losing what somebody just wrote is
            // worse than making them press send again.
        }
    };

    return (
        <div className="space-y-4">
            <a
                href="#/dashboard/support"
                className="flex w-fit items-center gap-1.5 text-sm font-medium text-primary hover:underline"
            >
                <ArrowLeft className="size-3.5" aria-hidden="true" />
                Back to support
            </a>

            {error && (
                <Alert variant="destructive">
                    <AlertCircle className="h-4 w-4" />
                    <AlertDescription>{error}</AlertDescription>
                </Alert>
            )}

            {loading && (
                <p className="flex items-center gap-2 text-sm text-secondary">
                    <Loader2 className="h-4 w-4 animate-spin" />
                    Loading this ticket…
                </p>
            )}

            {/* An ordinary state - a stale bookmark, a colleague's ticket - never rendered as a failure. */}
            {!loading && notFound && (
                <Alert>
                    <AlertDescription>
                        This ticket could not be found. It may belong to a colleague, or the link may be
                        out of date.
                    </AlertDescription>
                </Alert>
            )}

            {!loading && ticket && (
                <>
                    <div className="space-y-1">
                        <div className="flex flex-wrap items-center gap-2">
                            <h2 className="text-lg font-semibold">{ticket.subject}</h2>
                            <Badge variant={TICKET_STATUS_VARIANT[ticket.status]}>
                                {TICKET_STATUS_LABELS[ticket.status]}
                            </Badge>
                            {/* Status and holder answer different questions - what is happening to
                                the ticket, and who is holding it - so this stays a second badge
                                rather than words folded into the status one. */}
                            <Badge variant="outline">{TICKET_HOLDER_LABELS[ticket.holder]}</Badge>
                        </div>
                        <p className="text-sm text-secondary">
                            {ticket.reference && `${ticket.reference} — `}
                            Raised {formatDateTime(ticket.createdAt)}
                        </p>
                        <p className="whitespace-pre-wrap text-sm">{ticket.body}</p>
                    </div>

                    {/* Oldest first - the thread reads top to bottom the way it happened, the same
                        order every message thread in this app already renders in. */}
                    <div className="space-y-3">
                        {events.length === 0 ? (
                            <EmptyState icon={MessagesSquare} title="No replies yet" size="compact" />
                        ) : (
                            events.map((item, index) => (
                                <div
                                    key={`${item.at}-${index}`}
                                    className="rounded-[2px] border border-border p-3"
                                >
                                    <p className="text-step-11 font-medium uppercase tracking-[0.05em] text-ink-muted">
                                        {speakerLabel(item)} · {formatDateTime(item.at)}
                                    </p>
                                    {item.kind === "reply" && (
                                        <p className="mt-1 whitespace-pre-wrap text-sm">{item.body}</p>
                                    )}
                                    {item.kind === "status" && (
                                        <p className="mt-1 text-sm text-ink-muted">
                                            Marked {item.status ? TICKET_STATUS_LABELS[item.status] : "updated"}.
                                        </p>
                                    )}
                                    {item.kind !== "reply" && item.kind !== "status" && (
                                        <p className="mt-1 text-sm text-ink-muted">{moveDescription(item)}</p>
                                    )}
                                </div>
                            ))
                        )}
                    </div>

                    {ticket.status !== "resolved" && (
                        <form onSubmit={submitReply} className="space-y-2">
                            <label className="block">
                                <span className="text-sm font-medium text-ink-strong">Reply</span>
                                <textarea
                                    value={draft}
                                    onChange={(event) => setDraft(event.target.value)}
                                    rows={4}
                                    placeholder="Add more detail, or answer a question support asked."
                                    className="mt-1 w-full rounded-[2px] border border-border bg-surface p-2 text-sm text-ink"
                                />
                            </label>
                            <p className="text-xs text-secondary">
                                Don't include patient details in your reply - describe the problem in
                                general terms.
                            </p>
                            {replyError && (
                                <p role="alert" className="text-sm font-medium text-destructive">
                                    {replyError}
                                </p>
                            )}
                            <button
                                type="submit"
                                disabled={replying || !draft.trim()}
                                className="btn btn-green"
                            >
                                {replying ? "Sending…" : "Send reply"}
                            </button>
                        </form>
                    )}
                </>
            )}
        </div>
    );
};

export default SupportTicketDetail;