'use client';

import { FileJson, FileOutput, FolderSearch, Image as ImageIcon, Link2, MessagesSquare } from 'lucide-react';

import type { ProcessArtifact, ProcessEvent, ProcessRun } from '@/types';
import { Badge } from '@/components/ui/badge';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { ScrollArea } from '@/components/ui/scroll-area';
import { Separator } from '@/components/ui/separator';

function statusLabel(status: string) {
  if (status === 'done') return '已完成';
  if (status === 'error') return '失败';
  if (status === 'cancelled') return '已取消';
  if (status === 'waiting') return '等待中';
  if (status === 'running') return '运行中';
  if (status === 'queued') return '排队中';
  return status;
}

function actorTypeLabel(actorType: string) {
  if (actorType === 'mcp') return 'MCP';
  if (actorType === 'system') return '系统';
  if (actorType === 'agent') return '智能体';
  return actorType;
}

function eventKindLabel(kind: string) {
  if (kind === 'run_started') return '已启动';
  if (kind === 'run_progress') return '进行中';
  if (kind === 'run_status') return '状态更新';
  if (kind === 'run_artifact') return '产物';
  if (kind === 'run_finished') return '已结束';
  if (kind === 'run_cancelled') return '已取消';
  return kind;
}

function artifactIcon(type: ProcessArtifact['artifact_type']) {
  if (type === 'json') return <FileJson className="w-4 h-4" />;
  if (type === 'image') return <ImageIcon className="w-4 h-4" />;
  if (type === 'link') return <Link2 className="w-4 h-4" />;
  return <FileOutput className="w-4 h-4" />;
}

function renderArtifactBody(artifact: ProcessArtifact) {
  if (artifact.artifact_type === 'json' && artifact.data !== undefined) {
    return (
      <pre className="text-[11px] leading-5 whitespace-pre-wrap break-words rounded-md bg-background/70 p-3 overflow-x-auto">
        {JSON.stringify(artifact.data, null, 2)}
      </pre>
    );
  }
  if (artifact.artifact_type === 'link' && artifact.url) {
    return (
      <a href={artifact.url} target="_blank" rel="noreferrer" className="text-sm text-sky-300 underline break-all">
        {artifact.url}
      </a>
    );
  }
  return (
    <div className="text-xs text-foreground/90 whitespace-pre-wrap break-words">
      {artifact.content || '（空产物）'}
    </div>
  );
}

export function ArtifactSidebar({
  selectedRun,
  events,
  artifacts,
}: {
  selectedRun: ProcessRun | null;
  events: ProcessEvent[];
  artifacts: ProcessArtifact[];
}) {
  const runArtifacts = selectedRun
    ? artifacts.filter((item) => item.run_id === selectedRun.run_id)
    : artifacts;
  const runEvents = selectedRun
    ? events.filter((item) => item.run_id === selectedRun.run_id)
    : events.slice(-12);
  const hasContent = Boolean(
    selectedRun || runArtifacts.length > 0 || runEvents.length > 0
  );

  if (!hasContent) {
    return null;
  }

  return (
    <div className="h-full bg-card/60 flex flex-col border-l border-border">
      <div className="px-4 py-3 border-b border-border">
        <h2 className="text-sm font-semibold tracking-wide uppercase text-muted-foreground">结果面板</h2>
        <p className="text-xs text-muted-foreground mt-1">
          {selectedRun ? `当前选中: ${selectedRun.actor_name}` : '选择一个任务查看详细过程与产物'}
        </p>
      </div>
      <ScrollArea className="flex-1 px-4 py-4">
        <div className="space-y-4">
          <Card>
            <CardHeader className="pb-3">
              <CardTitle className="text-sm flex items-center gap-2">
                <FolderSearch className="w-4 h-4" />
                任务摘要
              </CardTitle>
            </CardHeader>
            <CardContent className="pt-0 space-y-2 text-sm">
              {selectedRun ? (
                <>
                  <div className="flex items-center gap-2 flex-wrap">
                    <Badge variant="outline">{actorTypeLabel(selectedRun.actor_type)}</Badge>
                    <Badge variant="outline">{statusLabel(selectedRun.status)}</Badge>
                    {selectedRun.source && <Badge variant="secondary">{selectedRun.source}</Badge>}
                  </div>
                  <div className="font-medium">{selectedRun.title}</div>
                  <div className="text-muted-foreground whitespace-pre-wrap break-words">
                    {selectedRun.summary || '暂时还没有最终摘要。'}
                  </div>
                </>
              ) : (
                <div className="text-muted-foreground text-sm">当前没有选中的任务。</div>
              )}
            </CardContent>
          </Card>

          <Card>
            <CardHeader className="pb-3">
              <CardTitle className="text-sm flex items-center gap-2">
                <MessagesSquare className="w-4 h-4" />
                事件记录
              </CardTitle>
            </CardHeader>
            <CardContent className="pt-0 space-y-2">
              {runEvents.length === 0 && (
                <div className="text-xs text-muted-foreground">暂时还没有结构化事件。</div>
              )}
              {runEvents.map((event, index) => (
                <div key={event.event_id}>
                  <div className="rounded-md border border-border/60 px-3 py-2 bg-background/60">
                    <div className="flex items-center gap-2 text-[10px] uppercase tracking-wide text-muted-foreground mb-1">
                      <span>{eventKindLabel(event.kind)}</span>
                      {event.status && <span>{statusLabel(event.status)}</span>}
                    </div>
                    <div className="text-xs whitespace-pre-wrap break-words">
                      {event.text || '结构化更新'}
                    </div>
                  </div>
                  {index < runEvents.length - 1 && <Separator className="my-2" />}
                </div>
              ))}
            </CardContent>
          </Card>

          <Card>
            <CardHeader className="pb-3">
              <CardTitle className="text-sm flex items-center gap-2">
                <FileOutput className="w-4 h-4" />
                产物列表
              </CardTitle>
            </CardHeader>
            <CardContent className="pt-0 space-y-3">
              {runArtifacts.length === 0 && (
                <div className="text-xs text-muted-foreground">暂时还没有产物。</div>
              )}
              {runArtifacts.map((artifact) => (
                <div key={artifact.artifact_id} className="rounded-lg border border-border/70 bg-background/70 p-3 space-y-2">
                  <div className="flex items-center gap-2">
                    <div className="w-8 h-8 rounded-full bg-muted flex items-center justify-center text-muted-foreground">
                      {artifactIcon(artifact.artifact_type)}
                    </div>
                    <div className="min-w-0">
                      <div className="text-sm font-medium truncate">{artifact.title}</div>
                      <div className="text-[11px] text-muted-foreground">
                        {artifact.actor_id} · {artifact.artifact_type}
                      </div>
                    </div>
                  </div>
                  {renderArtifactBody(artifact)}
                </div>
              ))}
            </CardContent>
          </Card>
        </div>
      </ScrollArea>
    </div>
  );
}