import { Head, Link } from '@inertiajs/react';
import { ClipboardList } from 'lucide-react';
import {
    TicketCard,
    ReportIssueButton,
    StatusPill,
} from '@/components/ticket/ticket-ui';
import { formatDate } from '@/lib/format';
import type { CustomerTicket } from '@/types';

export default function TicketIndex({
    tickets,
}: {
    tickets: CustomerTicket[];
}) {
    return (
        <>
            <Head title="My reports" />

            <div className="flex flex-col gap-5">
                <div className="flex flex-wrap items-end justify-between gap-4">
                    <div>
                        <h1 className="text-2xl font-semibold tracking-tight">
                            My reports
                        </h1>
                        <p className="mt-1 text-sm text-muted-foreground">
                            Every issue you have raised, and where it has got to.
                        </p>
                    </div>
                    <ReportIssueButton href="/ticket/tickets/new" />
                </div>

                <TicketCard>
                    {tickets.length === 0 ? (
                        <div className="py-8 text-center">
                            <ClipboardList className="mx-auto size-6 text-muted-foreground" />
                            <p className="mt-2 text-sm font-medium">
                                Nothing reported yet
                            </p>
                            <p className="mx-auto mt-1 max-w-sm text-xs text-muted-foreground">
                                If your system stops producing, shows a fault,
                                or your bill does not add up, report it and we
                                will chase it.
                            </p>
                        </div>
                    ) : (
                        <ul className="divide-y divide-hairline">
                            {tickets.map((ticket) => (
                                <li key={ticket.id}>
                                    <Link
                                        href={`/ticket/tickets/${ticket.id}`}
                                        className="-mx-3 flex flex-col gap-1.5 rounded-lg px-3 py-3.5 transition-colors hover:bg-muted/60"
                                    >
                                        <div className="flex flex-wrap items-center gap-2">
                                            <span className="font-mono text-xs text-muted-foreground">
                                                {ticket.display_number}
                                            </span>
                                            <StatusPill status={ticket.status} />
                                            {ticket.needs_your_reply ? (
                                                <span className="rounded-full bg-violet-500/10 px-2 py-0.5 text-[11px] font-medium text-violet-700 dark:text-violet-300">
                                                    Your reply is needed
                                                </span>
                                            ) : null}
                                        </div>

                                        <p className="text-sm font-medium">
                                            {ticket.issue}
                                        </p>

                                        <p className="text-xs text-muted-foreground">
                                            Reported{' '}
                                            {formatDate(ticket.reported_at)}
                                            {ticket.job
                                                ? ` · ${ticket.job.job_number}`
                                                : ''}
                                            {ticket.last_update_at
                                                ? ` · last update ${formatDate(ticket.last_update_at)}`
                                                : ''}
                                        </p>
                                    </Link>
                                </li>
                            ))}
                        </ul>
                    )}
                </TicketCard>
            </div>
        </>
    );
}
