import { Head, Link, router } from '@inertiajs/react';

import AdminLayout from '@/Layouts/AdminLayout';

interface DlqJob {
  id: number;
  job_class: string;
  queue: string;
  connection: string;
  retryable: boolean;
  replayed_at: string | null;
  exception: string | null;
  payload: Record<string, unknown>;
  created_at: string | null;
}

interface Props {
  job: DlqJob;
}

export default function DlqShow({ job }: Props) {
  const handleRetry = () => {
    router.post(route('admin.dlq.replay', job.id));
  };

  return (
    <>
      <Head title={`DLQ Job #${job.id}`} />
      <div className="container py-6 space-y-6">
        <div className="flex items-center justify-between">
          <div>
            <h1 className="text-2xl font-bold tracking-tight">Dead Letter Job #{job.id}</h1>
            <p className="text-sm text-muted-foreground mt-1">{job.job_class}</p>
          </div>
          <div className="flex gap-2">
            <Link
              href={route('admin.dlq.index')}
              className="text-sm text-muted-foreground hover:underline"
            >
              ← Back to Queue
            </Link>
            {job.retryable && !job.replayed_at && (
              <button
                onClick={handleRetry}
                className="rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground hover:bg-primary/90"
              >
                Retry Job
              </button>
            )}
          </div>
        </div>

        <div className="rounded-lg border bg-card p-6 space-y-4">
          <div className="grid grid-cols-2 gap-4 text-sm">
            <div>
              <span className="font-medium">Queue:</span>{' '}
              <span className="text-muted-foreground">{job.queue}</span>
            </div>
            <div>
              <span className="font-medium">Connection:</span>{' '}
              <span className="text-muted-foreground">{job.connection}</span>
            </div>
            <div>
              <span className="font-medium">Created:</span>{' '}
              <span className="text-muted-foreground">{job.created_at ?? '—'}</span>
            </div>
            <div>
              <span className="font-medium">Replayed:</span>{' '}
              <span className="text-muted-foreground">{job.replayed_at ?? '—'}</span>
            </div>
          </div>
        </div>

        {job.exception && (
          <div className="rounded-lg border bg-card p-6">
            <h2 className="font-semibold mb-2">Exception</h2>
            <pre className="text-xs text-destructive whitespace-pre-wrap overflow-auto max-h-96">
              {job.exception}
            </pre>
          </div>
        )}

        <div className="rounded-lg border bg-card p-6">
          <h2 className="font-semibold mb-2">Payload</h2>
          <pre className="text-xs text-muted-foreground whitespace-pre-wrap overflow-auto max-h-96">
            {JSON.stringify(job.payload, null, 2)}
          </pre>
        </div>
      </div>
    </>
  );
}

DlqShow.layout = (page: React.ReactNode) => <AdminLayout>{page}</AdminLayout>;
