import { AlertCircle, LifeBuoy, Loader2 } from "lucide-react";
import { Card, CardContent } from "../../../components/ui/card.tsx";
import { Alert, AlertDescription } from "../../../components/ui/alert.tsx";
import { Badge } from "../../../components/ui/badge.tsx";
import { EmptyState } from "../../../components/ui/empty-state.tsx";
import {
    useSupportTickets,
    TICKET_STATUS_LABELS,
    TICKET_STATUS_VARIANT,
    TICKET_HOLDER_LABELS,
} from "../../../hooks/useSupportTickets";
import { formatDateTime } from "../../../utils/dateUtils";

/**
 * THE PRACTICE'S OWN SUPPORT SCREEN - where a ticket raised from the assistant's escalation form
 * (`SupportTicketForm`, in `SetupHelpWidget`) is FOLLOWED afterwards. Raising a ticket happens in the
 * widget; everything that happens next happens here - a ticket somebody has to remember to check is a
 * ticket they stop filing and telephone about instead.
 *
 * A PLAIN ANCHOR TO EACH ROW, NOT `<Link>`. This app is a HashRouter (see App.tsx and
 * organizationPortalUrl.ts's own header on why), and `href="#/dashboard/support/<id>"` is the same
 * plain-anchor pattern App.tsx already uses for internal navigation (the upgrade-your-plan and
 * edit-profile links). `<Link>`/`useNavigate` need a Router ancestor to render at all; a bare anchor
 * needs none and still lands on exactly the right in-app route once clicked.
 *
 * The status label, Badge variant and holder label maps live in `useSupportTickets.ts`, not here -
 * this screen and `SupportTicketDetail` both paint the same status and holder, and a second copy of
 * the map that decides the colour is how a future contrast fix lands on one screen and leaves the
 * other wrong.
 */

export const SupportPage = () => {
    const { tickets, loading, error } = useSupportTickets();

    return (
        <div>
            <div>
                <h1 className="ak-page-title flex items-center gap-2">
                    <LifeBuoy className="h-5 w-5" aria-hidden="true" />
                    Support
                </h1>
                {/* NAMES WHO ACTUALLY RECEIVES THESE, AT CREATION. A ticket raised here goes first to
                    the contractor managing this practice's platform, never straight to Akashic - but
                    escalation can move it there afterward, which is why each row also names who holds
                    it now, the same correction `speakerLabel` makes on the thread itself. */}
                <p className="ak-page-title__sub">
                    Tickets this practice has raised with your contractor, and what happened next.
                </p>
            </div>

            <div className="ak-page-body">
            {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 support tickets…
                </p>
            ) : (
                <Card>
                    <CardContent className="space-y-1">
                        {tickets.length === 0 ? (
                            // Says what WILL appear here rather than asserting nothing is wrong - a
                            // practice on day one has never raised a ticket and does not yet know what
                            // this screen is for.
                            <EmptyState
                                icon={LifeBuoy}
                                title="No support tickets yet"
                                description="A ticket raised from the help widget shows up on this screen."
                            />
                        ) : (
                            tickets.map((ticket) => (
                                <a
                                    key={ticket.ticketId}
                                    href={`#/dashboard/support/${ticket.ticketId}`}
                                    className="flex items-start justify-between gap-3 border-b border-border py-3 text-left last:border-b-0 hover:bg-muted/40"
                                >
                                    <div className="min-w-0 space-y-1">
                                        <p className="truncate text-sm font-medium">{ticket.subject}</p>
                                        <p className="text-xs text-secondary">
                                            {ticket.reference && `${ticket.reference} — `}
                                            Updated {formatDateTime(ticket.updatedAt)}
                                        </p>
                                    </div>
                                    {/* Status and holder answer two different questions - what is
                                        happening to the ticket, and who is holding it - so each gets
                                        its own badge rather than folding one into the other's words. */}
                                    <div className="flex shrink-0 flex-wrap items-center justify-end gap-1">
                                        <Badge variant={TICKET_STATUS_VARIANT[ticket.status]}>
                                            {TICKET_STATUS_LABELS[ticket.status]}
                                        </Badge>
                                        <Badge variant="outline">{TICKET_HOLDER_LABELS[ticket.holder]}</Badge>
                                    </div>
                                </a>
                            ))
                        )}
                    </CardContent>
                </Card>
            )}
            </div>
        </div>
    );
};

export default SupportPage;