'use client';

import { format } from 'date-fns';
import { ChevronDown, LoaderCircle, X } from 'lucide-react';
import Link from 'next/link';
import { useEffect, useMemo, useState } from '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';
import type { Task, TaskStageContext } from '@/lib/types';

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');
}

function formatCounterLabel(value: string) {
  return value
    .replace(/([a-z0-9])([A-Z])/g, '$1 $2')
    .replace(/_/g, ' ')
    .replace(/\b\w/g, (char) => char.toUpperCase());
}

function ProgressPanel({ task }: { task: Task }) {
  const progress = task.notification.progress;
  if (!progress) {
    return null;
  }

  return (
    <div>
      <div className="mb-1 flex items-center justify-between text-xs text-[color:var(--terminal-muted)]">
        <span>{progress.current}/{progress.total} {progress.unit}</span>
        <span>{progress.percent ?? 0}%</span>
      </div>
      <div className="h-2 rounded-full bg-[color:rgba(255,255,255,0.08)]">
        <div
          className="h-full rounded-full bg-[color:var(--accent)] transition-[width] duration-300"
          style={{ width: `${progress.percent ?? 0}%` }}
        />
      </div>
    </div>
  );
}

function StatsPanel({ task }: { task: Task }) {
  const counters = task.stage_context?.counters ?? {};
  const counterEntries = Object.entries(counters);

  if (task.notification.stats.length === 0 && counterEntries.length === 0) {
    return <p className="text-xs text-[color:var(--terminal-muted)]">No structured metrics available for this job yet.</p>;
  }

  return (
    <div className="flex flex-wrap gap-2">
      {task.notification.stats.map((stat) => (
        <div key={`${stat.label}:${stat.value}`} className="rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--panel)] px-3 py-2 text-xs text-[color:var(--terminal-bright)]">
          <span className="text-[color:var(--terminal-muted)]">{stat.label}</span> {stat.value}
        </div>
      ))}
      {counterEntries.map(([label, value]) => (
        <div key={label} className="rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--panel)] px-3 py-2 text-xs text-[color:var(--terminal-bright)]">
          <span className="text-[color:var(--terminal-muted)]">{formatCounterLabel(label)}</span> {value}
        </div>
      ))}
    </div>
  );
}

function StageContextBlock({ context }: { context: TaskStageContext | null }) {
  if (!context) {
    return null;
  }

  const counters = Object.entries(context.counters ?? {});

  return (
    <div className="mt-2 space-y-2">
      {context.progress ? (
        <div className="text-[11px] text-[color:var(--terminal-muted)]">
          Progress {context.progress.current}/{context.progress.total} {context.progress.unit}
        </div>
      ) : null}
      {context.subject ? (
        <div className="text-[11px] text-[color:var(--terminal-muted)]">
          {[context.subject.ticker, context.subject.accessionNumber, context.subject.label].filter(Boolean).join(' · ')}
        </div>
      ) : null}
      {counters.length > 0 ? (
        <div className="flex flex-wrap gap-1.5">
          {counters.map(([label, value]) => (
            <span
              key={label}
              className="inline-flex items-center rounded-full border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] px-2 py-1 text-[11px] text-[color:var(--terminal-muted)]"
            >
              {formatCounterLabel(label)}: {value}
            </span>
          ))}
        </div>
      ) : null}
    </div>
  );
}

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));
  const task = data?.task ?? null;
  const events = data?.events ?? [];
  const timeline = task ? buildStageTimeline(task, events) : [];
  const [expandedStage, setExpandedStage] = useState<string | null>(null);

  const defaultExpandedStage = useMemo(() => {
    if (task?.status === 'completed') {
      return null;
    }

    if (task?.status === 'failed') {
      return task.stage;
    }

    for (const item of timeline) {
      if (item.state === 'active') {
        return item.stage;
      }
    }

    for (let index = timeline.length - 1; index >= 0; index -= 1) {
      if (timeline[index]?.state === 'completed') {
        return timeline[index].stage;
      }
    }

    return timeline[0]?.stage ?? null;
  }, [timeline]);

  useEffect(() => {
    if (!isOpen) {
      setExpandedStage(null);
      return;
    }

    setExpandedStage((current) => {
      if (current && timeline.some((item) => item.stage === current)) {
        return current;
      }

      return defaultExpandedStage;
    });
  }, [defaultExpandedStage, isOpen, timeline]);

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

  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 flex max-h-[88vh] w-[95vw] max-w-4xl -translate-x-1/2 -translate-y-1/2 flex-col overflow-hidden 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>

        <div className="min-h-0 flex-1 overflow-y-auto pr-1">
          {isLoading ? (
            <div className="mb-4 space-y-2 rounded-xl border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] p-3">
              <div className="flex items-center gap-2 text-sm text-[color:var(--terminal-muted)]">
                <LoaderCircle className="size-4 animate-spin" />
                Loading task timeline...
              </div>
              <div className="space-y-2">
                {Array.from({ length: 4 }).map((_, index) => (
                  <div key={index} className="animate-pulse rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--panel)] px-3 py-2">
                    <div className="h-3 w-2/5 rounded bg-[color:var(--panel-bright)]" />
                    <div className="mt-2 h-2 w-3/5 rounded bg-[color:var(--panel-bright)]" />
                  </div>
                ))}
              </div>
            </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)]">Summary</p>
                <p className="text-sm text-[color:var(--terminal-bright)]">{task.notification.title}</p>
                <p className="mt-1 text-xs text-[color:var(--terminal-bright)]">{task.notification.statusLine}</p>
                {task.notification.detailLine ? (
                  <p className="mt-1 text-xs text-[color:var(--terminal-muted)]">{task.notification.detailLine}</p>
                ) : null}
                <div className="mt-3">
                  <ProgressPanel task={task} />
                </div>
                <div className="mt-3 flex flex-wrap gap-2">
                  {task.notification.actions
                    .filter((action) => action.id !== 'open_details' && action.href)
                    .map((action) => (
                      <Link
                        key={action.id}
                        href={action.href ?? '#'}
                        className={action.primary
                          ? 'inline-flex items-center rounded-lg border border-[color:var(--line-strong)] bg-[color:var(--panel)] px-3 py-1.5 text-xs text-[color:var(--accent)] transition hover:border-[color:var(--accent)]'
                          : 'inline-flex items-center rounded-lg border border-[color:var(--line-weak)] px-3 py-1.5 text-xs text-[color:var(--terminal-muted)] transition hover:border-[color:var(--line-strong)] hover:text-[color:var(--terminal-bright)]'
                        }
                      >
                        {action.label}
                      </Link>
                    ))}
                </div>
              </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)]">Key metrics</p>
                <StatsPanel task={task} />
              </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="max-h-72 space-y-1.5 overflow-y-auto pr-1">
                  {timeline.map((item) => (
                    <li key={item.stage} className="rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--panel)]">
                      <button
                        type="button"
                        className="flex w-full items-center justify-between gap-3 px-3 py-2 text-left"
                        onClick={() => {
                          setExpandedStage((current) => (current === item.stage ? null : item.stage));
                        }}
                      >
                        <div>
                          <p className="text-sm text-[color:var(--terminal-bright)]">{item.label}</p>
                          <p className="mt-0.5 text-[11px] text-[color:var(--terminal-muted)]">{formatTimestamp(item.timestamp)}</p>
                        </div>
                        <div className="flex items-center gap-2">
                          <span className={item.state === 'active'
                            ? 'text-[11px] uppercase tracking-[0.12em] text-[color:var(--accent)]'
                            : item.state === 'failed'
                              ? 'text-[11px] uppercase tracking-[0.12em] text-[#ff8f8f]'
                            : item.state === 'completed'
                              ? 'text-[11px] uppercase tracking-[0.12em] text-[color:var(--terminal-muted)]'
                              : 'text-[11px] uppercase tracking-[0.12em] text-[#7f8994]'}
                          >
                            {item.state}
                          </span>
                          <ChevronDown className={expandedStage === item.stage ? 'size-3.5 rotate-180 text-[color:var(--terminal-muted)] transition' : 'size-3.5 text-[color:var(--terminal-muted)] transition'} />
                        </div>
                      </button>

                      {expandedStage === item.stage ? (
                        <div className="border-t border-[color:var(--line-weak)] px-3 py-2">
                          <p className="text-xs text-[color:var(--terminal-muted)]">{item.detail ?? 'No additional detail for this step.'}</p>
                          <StageContextBlock context={item.context} />
                        </div>
                      ) : null}
                    </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 ? (
                <details className="mb-3 rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] p-3">
                  <summary className="cursor-pointer text-xs uppercase tracking-[0.12em] text-[color:var(--terminal-muted)]">Debug result</summary>
                  <pre className="mt-3 max-h-56 overflow-auto whitespace-pre-wrap break-words text-xs text-[color:var(--terminal-bright)]">{JSON.stringify(task.result, null, 2)}</pre>
                </details>
              ) : null}
            </>
          ) : null}
        </div>

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