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

/**
 * Where a patient follows a problem they reported from the help widget.
 *
 * A separate screen from the practice's on separate routes, keeping the client side of the fence the
 * server already holds: nothing here touches the practice hook, and nothing on the practice side
 * touches this.
 *
 * No holder badge, unlike the practice's list: a patient's report goes to Akashic when it is raised
 * and never moves, so the column would say the same word on every row.
 *
 * A plain anchor per row rather than `<Link>`: this app is a HashRouter, and an anchor lands on the
 * right in-app route without needing a Router ancestor to render at all.
 */

export const MySupportPage = () => {
    const { tickets, loading, error } = usePatientSupportTickets();

    return (
        <div className="space-y-4">
            <div>
                <h1 className="ak-page-title flex items-center gap-2">
                    <LifeBuoy className="h-5 w-5" aria-hidden="true" />
                    Support
                </h1>
                <p className="text-sm text-secondary">
                    Problems you have reported about this portal, and what we said back.
                </p>
            </div>

            {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>
            ) : (
                <Card>
                    <CardContent className="space-y-1">
                        {tickets.length === 0 ? (
                            <EmptyState
                                icon={LifeBuoy}
                                title="Nothing reported yet"
                                description="Report portal problems using Support. Your reports appear here."
                            />
                        ) : (
                            tickets.map((ticket) => (
                                <a
                                    key={ticket.ticketId}
                                    href={`#/dashboard/my-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>
                                    <Badge variant={TICKET_STATUS_VARIANT[ticket.status]}>
                                        {TICKET_STATUS_LABELS[ticket.status]}
                                    </Badge>
                                </a>
                            ))
                        )}
                    </CardContent>
                </Card>
            )}
        </div>
    );
};

export default MySupportPage;