'use client';

import { format } from 'date-fns';
import { LoaderCircle, X } from 'lucide-react';
import { useTaskTimelineQuery } from '@/hooks/use-api-queries';
import { buildStageTimeline, stageLabel, taskTypeLabel } from '@/components/notifications/task-stage-helpers';
import { StatusPill } from '@/components/ui/status-pill';
import { Button } from '@/components/ui/button';

function formatTimestamp(value: string | null) {
  if (!value) {
    return 'n/a';
  }

  const parsed = new Date(value);
  if (Number.isNaN(parsed.getTime())) {
    return 'n/a';
  }

  return format(parsed, 'MMM dd, yyyy HH:mm:ss');
}

type TaskDetailModalProps = {
  isOpen: boolean;
  taskId: string | null;
  onClose: () => void;
};

export function TaskDetailModal({ isOpen, taskId, onClose }: TaskDetailModalProps) {
  const { data, isLoading, error } = useTaskTimelineQuery(taskId ?? '', isOpen && Boolean(taskId));

  if (!isOpen || !taskId) {
    return null;
  }

  const task = data?.task ?? null;
  const events = data?.events ?? [];
  const timeline = task ? buildStageTimeline(task, events) : [];

  return (
    <div className="fixed inset-0 z-[60]">
      <button
        type="button"
        aria-label="Close task detail modal"
        className="absolute inset-0 bg-[color:rgba(0,0,0,0.7)]"
        onClick={onClose}
      />

      <div className="absolute left-1/2 top-1/2 w-[95vw] max-w-4xl -translate-x-1/2 -translate-y-1/2 rounded-2xl border border-[color:var(--line-weak)] bg-[color:var(--panel)] p-5 shadow-[0_25px_70px_rgba(0,0,0,0.55)]">
        <header className="mb-4 flex items-start justify-between gap-3">
          <div>
            <p className="text-xs uppercase tracking-[0.16em] text-[color:var(--terminal-muted)]">Job details</p>
            <h3 className="text-xl font-semibold text-[color:var(--terminal-bright)]">{task ? taskTypeLabel(task.task_type) : 'Task'}</h3>
            <p className="mt-1 break-all text-xs text-[color:var(--terminal-muted)]">{taskId}</p>
          </div>

          <div className="flex items-center gap-2">
            {task ? <StatusPill status={task.status} /> : null}
            <button
              type="button"
              aria-label="Close task detail modal"
              className="inline-flex h-9 w-9 items-center justify-center rounded-lg border border-[color:var(--line-weak)] text-[color:var(--terminal-bright)] transition hover:border-[color:var(--line-strong)]"
              onClick={onClose}
            >
              <X className="size-4" />
            </button>
          </div>
        </header>

        {isLoading ? (
          <div className="flex items-center gap-2 text-sm text-[color:var(--terminal-muted)]">
            <LoaderCircle className="size-4 animate-spin" />
            Loading task timeline...
          </div>
        ) : null}

        {error ? (
          <p className="text-sm text-[#ffb5b5]">Unable to load task timeline.</p>
        ) : null}

        {task ? (
          <>
            <div className="mb-4 grid grid-cols-1 gap-3 rounded-xl border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] p-3 md:grid-cols-2">
              <p className="text-xs text-[color:var(--terminal-muted)]">Stage: <span className="text-[color:var(--terminal-bright)]">{stageLabel(task.stage)}</span></p>
              <p className="text-xs text-[color:var(--terminal-muted)]">Workflow run: <span className="text-[color:var(--terminal-bright)]">{task.workflow_run_id ?? 'n/a'}</span></p>
              <p className="text-xs text-[color:var(--terminal-muted)]">Created: <span className="text-[color:var(--terminal-bright)]">{formatTimestamp(task.created_at)}</span></p>
              <p className="text-xs text-[color:var(--terminal-muted)]">Finished: <span className="text-[color:var(--terminal-bright)]">{formatTimestamp(task.finished_at)}</span></p>
              <p className="text-xs text-[color:var(--terminal-muted)]">Updated: <span className="text-[color:var(--terminal-bright)]">{formatTimestamp(task.updated_at)}</span></p>
              <p className="text-xs text-[color:var(--terminal-muted)]">Attempts: <span className="text-[color:var(--terminal-bright)]">{task.attempts}/{task.max_attempts}</span></p>
            </div>

            <div className="mb-4 rounded-xl border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] p-3">
              <p className="mb-2 text-xs uppercase tracking-[0.12em] text-[color:var(--terminal-muted)]">Stage timeline</p>
              <ol className="space-y-2">
                {timeline.map((item) => (
                  <li key={item.stage} className="rounded-lg border border-[color:var(--line-weak)] px-3 py-2">
                    <div className="flex items-center justify-between gap-3">
                      <p className="text-sm text-[color:var(--terminal-bright)]">{item.label}</p>
                      <span className={item.state === 'active'
                        ? 'text-xs uppercase tracking-[0.12em] text-[#9fffcf]'
                        : item.state === 'completed'
                          ? 'text-xs uppercase tracking-[0.12em] text-[color:var(--terminal-muted)]'
                          : 'text-xs uppercase tracking-[0.12em] text-[#6f8791]'}
                      >
                        {item.state}
                      </span>
                    </div>
                    {item.detail ? <p className="mt-1 text-xs text-[color:var(--terminal-muted)]">{item.detail}</p> : null}
                    <p className="mt-1 text-xs text-[color:var(--terminal-muted)]">{formatTimestamp(item.timestamp)}</p>
                  </li>
                ))}
              </ol>
            </div>

            {task.error ? (
              <div className="mb-3 rounded-lg border border-[#6f2f2f] bg-[color:rgba(70,20,20,0.45)] p-3">
                <p className="text-xs uppercase tracking-[0.12em] text-[#ffbbbb]">Error</p>
                <p className="mt-1 text-sm text-[#ffd6d6]">{task.error}</p>
              </div>
            ) : null}

            {task.result ? (
              <div className="rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] p-3">
                <p className="text-xs uppercase tracking-[0.12em] text-[color:var(--terminal-muted)]">Result summary</p>
                <pre className="mt-2 max-h-40 overflow-auto whitespace-pre-wrap break-words text-xs text-[color:var(--terminal-bright)]">{JSON.stringify(task.result, null, 2)}</pre>
              </div>
            ) : null}
          </>
        ) : null}

        <div className="mt-4 flex justify-end">
          <Button variant="ghost" onClick={onClose}>Close</Button>
        </div>
      </div>
    </div>
  );
}