'use client';

import React from 'react';
import { CheckCircle2, Loader2, Sparkles, Square } from 'lucide-react';

import type { ProcessArtifact, ProcessEvent, ProcessRun } from '@/types';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { appArtifactPreview, appFeedRoleLabel, appStatusLabel } from '@/lib/i18n/common';
import { pickAppText } from '@/lib/i18n/core';
import { useAppI18n } from '@/lib/i18n/provider';
import { cn } from '@/lib/utils';

type RunCardPhase = 'live' | 'exiting' | 'collapsed';

type AgentFeedItem = {
  key: string;
  created_at: string;
  role: 'user' | 'assistant' | 'system' | 'tool';
  text: string;
  tone?: ProcessRun['status'];
};

const TERMINAL_STATUSES = new Set<ProcessRun['status']>(['done', 'error', 'cancelled']);

const AGENT_ACCENTS = [
  {
    frame: 'border-sky-500/25 bg-sky-500/[0.05]',
    title: 'text-sky-300',
    dot: 'bg-sky-400',
    result: 'border-sky-500/25 bg-sky-500/[0.08]',
  },
  {
    frame: 'border-emerald-500/25 bg-emerald-500/[0.05]',
    title: 'text-emerald-300',
    dot: 'bg-emerald-400',
    result: 'border-emerald-500/25 bg-emerald-500/[0.08]',
  },
  {
    frame: 'border-amber-500/25 bg-amber-500/[0.05]',
    title: 'text-amber-300',
    dot: 'bg-amber-400',
    result: 'border-amber-500/25 bg-amber-500/[0.08]',
  },
  {
    frame: 'border-fuchsia-500/25 bg-fuchsia-500/[0.05]',
    title: 'text-fuchsia-300',
    dot: 'bg-fuchsia-400',
    result: 'border-fuchsia-500/25 bg-fuchsia-500/[0.08]',
  },
] as const;

function accentFor(index: number) {
  return AGENT_ACCENTS[index % AGENT_ACCENTS.length];
}

function statusTone(status: ProcessRun['status']) {
  if (status === 'done') return 'border-emerald-500/20 bg-emerald-500/10 text-emerald-300';
  if (status === 'error') return 'border-rose-500/20 bg-rose-500/10 text-rose-300';
  if (status === 'cancelled') return 'border-zinc-500/20 bg-zinc-500/10 text-zinc-300';
  if (status === 'waiting') return 'border-amber-500/20 bg-amber-500/10 text-amber-300';
  if (status === 'queued') return 'border-sky-500/20 bg-sky-500/10 text-sky-300';
  return 'border-sky-500/20 bg-sky-500/10 text-sky-300';
}

function feedTone(role: AgentFeedItem['role']) {
  if (role === 'user') {
    return 'ml-6 border-border/70 bg-muted/60 text-foreground';
  }
  if (role === 'system') {
    return 'mx-4 border-border/60 bg-accent/60 text-foreground/85';
  }
  if (role === 'tool') {
    return 'mr-6 border-border/70 bg-background/80 text-foreground';
  }
  return 'mr-6 border-border/70 bg-background/80 text-foreground';
}

function delegatedTask(run: ProcessRun): string | null {
  const value = run.metadata?.delegated_task;
  return typeof value === 'string' && value.trim() ? value.trim() : null;
}

function buildFeed(
  run: ProcessRun,
  events: ProcessEvent[],
  artifacts: ProcessArtifact[],
  locale: 'zh-CN' | 'en-US',
): AgentFeedItem[] {
  const items: AgentFeedItem[] = [];
  let hasLeadBubble = false;

  for (const event of events) {
    if (!event.text?.trim()) {
      continue;
    }
    if (event.kind === 'run_message') {
      const role = event.message_role || 'assistant';
      if (role === 'user') {
        hasLeadBubble = true;
      }
      items.push({
        key: event.event_id,
        created_at: event.created_at,
        role,
        text: event.text.trim(),
      });
      continue;
    }
    if (event.kind === 'run_progress') {
      items.push({
        key: event.event_id,
        created_at: event.created_at,
        role: 'assistant',
        text: event.text.trim(),
      });
      continue;
    }
    if (event.kind === 'run_status' && event.status && event.status !== 'running') {
      items.push({
        key: event.event_id,
        created_at: event.created_at,
        role: 'system',
        text: event.text.trim(),
        tone: event.status,
      });
    }
  }

  for (const artifact of artifacts) {
    items.push({
      key: artifact.artifact_id,
      created_at: artifact.created_at,
      role: artifact.actor_type === 'mcp' ? 'tool' : 'assistant',
      text: appArtifactPreview(artifact, locale),
    });
  }

  if (!hasLeadBubble) {
    const task = delegatedTask(run);
    if (task) {
      items.push({
        key: `${run.run_id}:delegated-task`,
        created_at: run.started_at,
        role: 'user',
        text: task,
      });
    }
  }

  return items
    .sort((a, b) => new Date(a.created_at).getTime() - new Date(b.created_at).getTime())
    .slice(-8);
}

function runSummary(run: ProcessRun, feed: AgentFeedItem[], locale: 'zh-CN' | 'en-US'): string {
  if (run.summary?.trim()) {
    return run.summary.trim();
  }
  const latestAssistant = [...feed].reverse().find((item) => item.role === 'assistant' || item.role === 'tool');
  return latestAssistant?.text || pickAppText(locale, '已完成子任务处理', 'Subtask processing completed');
}

function useRunCardPhases(runs: ProcessRun[]) {
  const [phases, setPhases] = React.useState<Record<string, RunCardPhase>>(() =>
    Object.fromEntries(
      runs.map((run) => [run.run_id, TERMINAL_STATUSES.has(run.status) ? 'collapsed' : 'live'])
    )
  );
  const timersRef = React.useRef<Record<string, ReturnType<typeof setTimeout>>>({});

  React.useEffect(() => {
    setPhases((prev) => {
      const next = { ...prev };
      const seen = new Set<string>();

      for (const run of runs) {
        seen.add(run.run_id);
        const isTerminal = TERMINAL_STATUSES.has(run.status);
        const current = next[run.run_id];
        if (!current) {
          next[run.run_id] = isTerminal ? 'collapsed' : 'live';
          continue;
        }
        if (!isTerminal) {
          next[run.run_id] = 'live';
          if (timersRef.current[run.run_id]) {
            clearTimeout(timersRef.current[run.run_id]);
            delete timersRef.current[run.run_id];
          }
          continue;
        }
        if (current === 'live') {
          next[run.run_id] = 'exiting';
          timersRef.current[run.run_id] = setTimeout(() => {
            setPhases((snapshot) => {
              if (snapshot[run.run_id] !== 'exiting') {
                return snapshot;
              }
              return { ...snapshot, [run.run_id]: 'collapsed' };
            });
            delete timersRef.current[run.run_id];
          }, 420);
        }
      }

      for (const runId of Object.keys(next)) {
        if (!seen.has(runId)) {
          if (timersRef.current[runId]) {
            clearTimeout(timersRef.current[runId]);
            delete timersRef.current[runId];
          }
          delete next[runId];
        }
      }

      return next;
    });

    return () => {
      for (const timer of Object.values(timersRef.current)) {
        clearTimeout(timer);
      }
      timersRef.current = {};
    };
  }, [runs]);

  return phases;
}

function AgentBubble({
  item,
  locale,
}: {
  item: AgentFeedItem;
  locale: 'zh-CN' | 'en-US';
}) {
  return (
    <div
      className={cn(
        'rounded-2xl border px-3 py-2 text-[13px] leading-5 transition-colors',
        feedTone(item.role),
        item.role === 'system' && item.tone ? statusTone(item.tone) : ''
      )}
    >
      <div className="mb-1 text-[10px] font-medium uppercase tracking-[0.14em] text-muted-foreground">
        <span>{appFeedRoleLabel(item.role, locale)}</span>
      </div>
      <div className="whitespace-pre-wrap break-words">{item.text}</div>
    </div>
  );
}

function LiveAgentCard({
  run,
  feed,
  artifactCount,
  selected,
  phase,
  accentIndex,
  onSelect,
  locale,
}: {
  run: ProcessRun;
  feed: AgentFeedItem[];
  artifactCount: number;
  selected: boolean;
  phase: RunCardPhase;
  accentIndex: number;
  onSelect: () => void;
  locale: 'zh-CN' | 'en-US';
}) {
  const showSpinner = !TERMINAL_STATUSES.has(run.status);
  const accent = accentFor(accentIndex);

  return (
    <button
      type="button"
      onClick={onSelect}
      className={cn(
        'min-w-[308px] max-w-[308px] rounded-[22px] border bg-card/70 p-3.5 text-left backdrop-blur-sm transition-all duration-300',
        accent.frame,
        selected ? 'ring-1 ring-primary/40 shadow-[0_18px_36px_-30px_rgba(15,23,42,0.75)]' : 'hover:border-primary/30',
        phase === 'exiting' && 'pointer-events-none scale-[0.94] -translate-y-2 opacity-0'
      )}
    >
      <div className="flex items-start justify-between gap-3">
        <div className="min-w-0">
          <div className="flex items-center gap-2 text-[11px] font-medium uppercase tracking-[0.18em] text-muted-foreground">
            <span className={cn('h-2 w-2 rounded-full', accent.dot)} />
            <span>{pickAppText(locale, '子 Agent', 'Sub-agent')}</span>
          </div>
          <div className={cn('mt-1 truncate text-sm font-semibold', accent.title)}>{run.actor_name}</div>
          <div className="mt-1 line-clamp-2 text-xs text-muted-foreground">{run.title}</div>
        </div>
        <Badge variant="outline" className={cn('border', statusTone(run.status))}>
          {appStatusLabel(run.status, locale)}
        </Badge>
      </div>

      <div className="mt-3 rounded-[18px] border border-border/60 bg-background/55 p-2.5">
        <div className="max-h-[280px] space-y-2.5 overflow-y-auto pr-1">
          {feed.length === 0 && (
            <div className="rounded-2xl border border-dashed border-border/60 bg-background/60 px-4 py-5 text-center text-sm text-muted-foreground">
              {pickAppText(locale, '等待子 agent 输出...', 'Waiting for sub-agent output...')}
            </div>
          )}
          {feed.map((item) => (
            <AgentBubble key={item.key} item={item} locale={locale} />
          ))}
        </div>
      </div>

      <div className="mt-3 flex items-center gap-2 text-[11px] text-muted-foreground">
        {showSpinner && (
          <span className="inline-flex items-center gap-1.5 rounded-full border border-border/60 bg-muted/40 px-2.5 py-1 text-foreground/80">
            <Loader2 className="h-3 w-3 animate-spin" />
            {pickAppText(locale, '运行中', 'Running')}
          </span>
        )}
        {artifactCount > 0 && <span>{pickAppText(locale, `${artifactCount} 个输出`, `${artifactCount} outputs`)}</span>}
        {typeof run.source === 'string' && run.source.trim() && <span>{run.source}</span>}
      </div>
    </button>
  );
}

function ResultCard({
  run,
  summary,
  artifactCount,
  selected,
  accentIndex,
  onSelect,
  locale,
}: {
  run: ProcessRun;
  summary: string;
  artifactCount: number;
  selected: boolean;
  accentIndex: number;
  onSelect: () => void;
  locale: 'zh-CN' | 'en-US';
}) {
  const accent = accentFor(accentIndex);

  return (
    <button
      type="button"
      onClick={onSelect}
      className={cn(
        'min-w-[188px] max-w-[228px] rounded-2xl border bg-card/70 px-3.5 py-3 text-left backdrop-blur-sm transition-colors',
        accent.result,
        selected ? 'ring-1 ring-primary/35' : 'hover:border-primary/25'
      )}
    >
      <div className="flex items-center justify-between gap-3">
        <div className="min-w-0">
          <div className="text-[10px] font-medium uppercase tracking-[0.18em] text-muted-foreground">{pickAppText(locale, '结果', 'Result')}</div>
          <div className={cn('mt-1 truncate text-sm font-semibold', accent.title)}>{run.actor_name}</div>
        </div>
        <CheckCircle2 className="h-4 w-4 text-emerald-400" />
      </div>
      <div className="mt-2 line-clamp-3 text-sm text-foreground/80">{summary}</div>
      <div className="mt-3 flex items-center gap-2 text-[11px] text-muted-foreground">
        <Badge variant="outline" className={cn('border', statusTone(run.status))}>
          {appStatusLabel(run.status, locale)}
        </Badge>
        {artifactCount > 0 && <span>{pickAppText(locale, `${artifactCount} 个输出`, `${artifactCount} outputs`)}</span>}
      </div>
    </button>
  );
}

export function AgentTeamBlock({
  rootRun,
  memberRuns,
  events,
  artifacts,
  selectedRunId,
  onSelectRun,
  onCancelRun,
}: {
  rootRun: ProcessRun;
  memberRuns: ProcessRun[];
  events: ProcessEvent[];
  artifacts: ProcessArtifact[];
  selectedRunId: string | null;
  onSelectRun: (runId: string) => void;
  onCancelRun: (runId: string) => void;
}) {
  const { locale } = useAppI18n();
  const phases = useRunCardPhases(memberRuns);
  const sortedRuns = React.useMemo(
    () =>
      [...memberRuns].sort((a, b) => {
        const at = new Date(a.started_at).getTime();
        const bt = new Date(b.started_at).getTime();
        return at - bt;
      }),
    [memberRuns]
  );
  const liveRuns = sortedRuns.filter((run) => phases[run.run_id] === 'live');
  const terminalRuns = sortedRuns.filter((run) => TERMINAL_STATUSES.has(run.status));
  const collapsedRuns = sortedRuns.filter((run) => phases[run.run_id] === 'collapsed');
  const liveCount = liveRuns.filter((run) => !TERMINAL_STATUSES.has(run.status)).length;
  const canCancelRoot =
    !rootRun.parent_run_id &&
    (rootRun.status === 'running' || rootRun.status === 'waiting');

  if (liveRuns.length === 0 && terminalRuns.length > 0) {
    return (
      <div className="inline-flex max-w-full flex-wrap items-start gap-2 rounded-2xl border border-border/60 bg-card/35 px-3 py-3 backdrop-blur-sm">
        <div className="mr-1 flex min-h-[68px] min-w-[132px] max-w-[180px] flex-col justify-center">
          <div className="inline-flex items-center gap-2 text-[11px] font-medium uppercase tracking-[0.18em] text-muted-foreground">
            <Sparkles className="h-3.5 w-3.5" />
            {pickAppText(locale, '智能体结果', 'Agent results')}
          </div>
          <div className="mt-1 line-clamp-2 text-sm font-medium text-foreground">{rootRun.title}</div>
        </div>
        {terminalRuns.map((run, index) => {
          const runEvents = events.filter((event) => event.run_id === run.run_id);
          const runArtifacts = artifacts.filter((artifact) => artifact.run_id === run.run_id);
          const feed = buildFeed(run, runEvents, runArtifacts, locale);
          return (
            <ResultCard
              key={run.run_id}
              run={run}
              summary={runSummary(run, feed, locale)}
              artifactCount={runArtifacts.length}
              selected={selectedRunId === run.run_id}
              accentIndex={index}
              onSelect={() => onSelectRun(run.run_id)}
              locale={locale}
            />
          );
        })}
      </div>
    );
  }

  return (
    <div className="overflow-hidden rounded-[24px] border border-border/70 bg-card/45 p-3.5 backdrop-blur-sm shadow-[0_18px_42px_-34px_rgba(0,0,0,0.55)]">
      <div className="flex flex-wrap items-start justify-between gap-3">
        <div>
          <div className="inline-flex items-center gap-2 text-xs font-medium uppercase tracking-[0.2em] text-muted-foreground">
            <Sparkles className="h-3.5 w-3.5" />
            {pickAppText(locale, '智能体团队', 'Agent team')}
          </div>
          <div className="mt-1.5 text-base font-semibold text-foreground">{rootRun.title}</div>
          <p className="mt-1 text-sm text-muted-foreground">
            {liveCount > 0
              ? pickAppText(locale, `主 agent 正在协调 ${liveCount} 个运行中的 sub-agent`, `Lead agent is coordinating ${liveCount} running sub-agents`)
              : pickAppText(locale, '子 agent 已完成，结果已折叠为摘要卡片', 'Sub-agents are done. Results are folded into summary cards')}
          </p>
        </div>
        <div className="flex items-center gap-2">
          {canCancelRoot && (
            <Button variant="outline" size="sm" className="bg-background/60" onClick={() => onCancelRun(rootRun.run_id)}>
              <Square className="mr-1.5 h-3.5 w-3.5" />
              {pickAppText(locale, '取消', 'Cancel')}
            </Button>
          )}
          <Badge variant="outline" className="border-border/70 bg-background/55 text-foreground/85">
            {pickAppText(locale, `${memberRuns.length} 个 sub-agent`, `${memberRuns.length} sub-agents`)}
          </Badge>
          <Badge variant="outline" className={cn('border', statusTone(rootRun.status))}>
            {appStatusLabel(rootRun.status, locale)}
          </Badge>
        </div>
      </div>

      {liveRuns.length > 0 && (
        <div className="mt-3 -mx-1 overflow-x-auto pb-2">
          <div className="flex min-w-full gap-3 px-1">
            {liveRuns.map((run, index) => {
              const runEvents = events.filter((event) => event.run_id === run.run_id);
              const runArtifacts = artifacts.filter((artifact) => artifact.run_id === run.run_id);
              const feed = buildFeed(run, runEvents, runArtifacts, locale);
              return (
                <LiveAgentCard
                  key={run.run_id}
                  run={run}
                  feed={feed}
                  artifactCount={runArtifacts.length}
                  selected={selectedRunId === run.run_id}
                  phase={phases[run.run_id] || 'live'}
                  accentIndex={index}
                  onSelect={() => onSelectRun(run.run_id)}
                  locale={locale}
                />
              );
            })}
          </div>
        </div>
      )}

      {collapsedRuns.length > 0 && (
        <div className="mt-3 flex flex-wrap gap-2">
          {collapsedRuns.map((run, index) => {
            const runEvents = events.filter((event) => event.run_id === run.run_id);
            const runArtifacts = artifacts.filter((artifact) => artifact.run_id === run.run_id);
            const feed = buildFeed(run, runEvents, runArtifacts, locale);
            return (
              <ResultCard
                key={run.run_id}
                run={run}
                summary={runSummary(run, feed, locale)}
                artifactCount={runArtifacts.length}
                selected={selectedRunId === run.run_id}
                accentIndex={index}
                onSelect={() => onSelectRun(run.run_id)}
                locale={locale}
              />
            );
          })}
        </div>
      )}
    </div>
  );
}