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 {
    usePatientSupportTicketThread,
    TICKET_STATUS_LABELS,
    TICKET_STATUS_VARIANT,
    type PatientSupportTicketEvent,
} from "../../../hooks/usePatientSupportTickets";
import { formatDateTime } from "../../../utils/dateUtils";

/**
 * One problem a patient reported, the answer, and the reply that follows it.
 *
 * Two sides only. A patient's ticket belongs to Akashic from the moment it is raised and never moves
 * to a contractor, so there is no escalation, no hand-back and no third speaker to name.
 */

/**
 * Who spoke, in the reader's own terms - never an account id, and never guessed when it is blank.
 * The reader's own replies say "You" rather than their name: the name is stored on the ticket for
 * whoever answers, and reading it back tells them nothing while putting it on a shared screen.
 */
const speakerLabel = (event: PatientSupportTicketEvent): string => {
    if (event.side === "patient") return "You";
    return event.authorName ? `${event.authorName} · Akashic support` : "Akashic support";
};

export const MySupportTicketDetail = () => {
    const { ticketId } = useParams<{ ticketId: string }>();
    const { ticket, events, loading, error, notFound, reply, replying, replyError } =
        usePatientSupportTicketThread(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` carries what to say. The draft stays: losing what somebody just wrote is
            // worse than making them press send again.
        }
    };

    return (
        <div className="space-y-4">
            <a
                href="#/dashboard/my-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…
                </p>
            )}

            {/* A stale bookmark, or an id that was never theirs - an ordinary state, never a failure. */}
            {!loading && notFound && (
                <Alert>
                    <AlertDescription>
                        This could not be found. 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="ak-section-title">{ticket.subject}</h2>
                            <Badge variant={TICKET_STATUS_VARIANT[ticket.status]}>
                                {TICKET_STATUS_LABELS[ticket.status]}
                            </Badge>
                        </div>
                        <p className="text-sm text-secondary">
                            {ticket.reference && `${ticket.reference} — `}
                            Reported {formatDateTime(ticket.createdAt)}
                        </p>
                        <p className="whitespace-pre-wrap text-sm">{ticket.body}</p>
                    </div>

                    {/* Oldest first, so the thread reads top to bottom the way it happened. */}
                    <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>
                                    ) : (
                                        <p className="mt-1 text-sm text-ink-muted">
                                            Marked {item.status ? TICKET_STATUS_LABELS[item.status] : "updated"}.
                                        </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 we 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">
                                Describe the problem without including health details or other personal information.
                            </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 MySupportTicketDetail;