import { Link } from '@inertiajs/react';
import { cn } from '@/lib/utils';
import { formatDate, formatDuration } from '@/lib/format';
import type { JobSummary } from '@/types';
import { StatusDot } from './status-badge';

/**
 * A job as a row rather than a table line: status, identity, place, and how
 * long it has been sitting still. Read top to bottom, it answers "what is
 * going on" faster than a wide table does.
 */
/**
 * Attention items carry a reason type; plain summaries do not.
 */
function isBlocked(job: JobSummary): boolean {
    return (
        'reason_type' in job &&
        (job as { reason_type?: string }).reason_type === 'blocked'
    );
}

export function JobList({
    jobs,
    className,
    showInstallDate = false,
    showWaitingOn = false,
    jobHref,
}: {
    jobs: JobSummary[];
    className?: string;
    showInstallDate?: boolean;
    showWaitingOn?: boolean;
    jobHref: (id: number) => string;
}) {
    return (
        <ul className={cn('divide-hairline -mx-1 divide-y', className)}>
            {jobs.map((job) => (
                <li key={job.id}>
                    <Link
                        href={jobHref(job.id)}
                        className="hover:bg-accent/40 -mx-1 flex flex-col gap-2 rounded-lg px-2 py-2.5 transition-colors sm:flex-row sm:items-center sm:gap-4"
                    >
                        <div className="flex min-w-0 flex-1 items-start gap-2.5">
                            <StatusDot
                                tone={job.status.color}
                                className="mt-1.5"
                                pulse={isBlocked(job)}
                            />
                            <div className="min-w-0">
                                <div className="flex flex-wrap items-center gap-x-2">
                                    <span className="font-mono text-xs font-medium">
                                        {job.job_number}
                                    </span>
                                    <span className="truncate text-sm">
                                        {job.customer?.name ?? 'No customer'}
                                    </span>
                                </div>
                                <div className="text-muted-foreground mt-0.5 flex flex-wrap items-center gap-x-2 text-xs">
                                    <span className="truncate">
                                        {job.site?.address ??
                                            job.title ??
                                            job.type.label}
                                    </span>
                                    {job.site?.state_label ? (
                                        <>
                                            <span aria-hidden>·</span>
                                            <span>{job.site.state_label}</span>
                                        </>
                                    ) : null}
                                    {job.site?.distribution_network ? (
                                        <>
                                            <span aria-hidden>·</span>
                                            <span>
                                                {job.site.distribution_network}
                                            </span>
                                        </>
                                    ) : null}
                                </div>
                            </div>
                        </div>

                        <div className="flex shrink-0 items-center gap-4 sm:w-64 sm:justify-end">
                            <span className="text-muted-foreground min-w-0 truncate text-xs">
                                {showWaitingOn
                                    ? job.status.waiting_on
                                    : showInstallDate
                                      ? formatDate(job.install_scheduled_for)
                                      : job.status.label}
                            </span>
                            <span
                                className={cn(
                                    'crm-num w-16 shrink-0 text-right text-xs',
                                    job.is_stalled
                                        ? 'text-warning font-medium'
                                        : 'text-muted-foreground',
                                )}
                                title={
                                    job.is_stalled
                                        ? 'No status change in the chasing window'
                                        : undefined
                                }
                            >
                                {formatDuration(job.days_in_status)}
                            </span>
                        </div>
                    </Link>
                </li>
            ))}
        </ul>
    );
}