"use client";

import {
  Bot,
  Clapperboard,
  FileOutput,
  Film,
  LayoutPanelTop,
  ScanSearch,
  Sparkles,
} from "lucide-react";
import { Badge } from "@/components/ui/badge";
import { cn } from "@/lib/utils";
import {
  getVideoWorkflowNodeDefinition,
  getVideoWorkflowQuickConnectOutputs,
} from "@/lib/video-workflow/catalog";
import type { CanvasNode, WorkflowNodeData } from "@/types/canvas";

interface WorkflowNodeProps {
  node: CanvasNode;
  isSelected: boolean;
}

function toAlphaColor(color: string | undefined, alpha: number) {
  const normalized = String(color || "").trim();
  if (!normalized.startsWith("#")) return undefined;

  const hex = normalized.slice(1);
  if (hex.length !== 3 && hex.length !== 6) return undefined;

  const full = hex.length === 3 ? hex.split("").map((char) => char + char).join("") : hex;
  const int = Number.parseInt(full, 16);
  if (Number.isNaN(int)) return undefined;

  const red = (int >> 16) & 255;
  const green = (int >> 8) & 255;
  const blue = int & 255;
  return `rgba(${red}, ${green}, ${blue}, ${alpha})`;
}

const GROUP_META = {
  input: {
    label: "输入",
    icon: LayoutPanelTop,
  },
  analysis: {
    label: "分析",
    icon: ScanSearch,
  },
  storyboard: {
    label: "分镜",
    icon: Film,
  },
  generation: {
    label: "生成",
    icon: Sparkles,
  },
  character: {
    label: "角色场景",
    icon: Clapperboard,
  },
  tool: {
    label: "工具",
    icon: Bot,
  },
  output: {
    label: "输出",
    icon: FileOutput,
  },
} as const;

const STATUS_LABELS = {
  pending: "待配置",
  generating: "处理中",
  completed: "已完成",
  failed: "异常",
} as const;

export function WorkflowNode({ node, isSelected }: WorkflowNodeProps) {
  const data = node.data as WorkflowNodeData;
  const definition = getVideoWorkflowNodeDefinition(data.templateType);
  const metadata = (data.metadata || {}) as Record<string, any>;
  const quickConnectOutputs =
    data.templateType && definition
      ? getVideoWorkflowQuickConnectOutputs(definition.type)
      : [];
  const resolvedGroup = (data.group || definition?.group || "tool") as keyof typeof GROUP_META;
  const groupMeta = GROUP_META[resolvedGroup] || GROUP_META.tool;
  const GroupIcon = groupMeta.icon;
  const accentColor = data.accentColor || definition?.accentColor || "#e2e8f0";
  const title = data.title || definition?.label || "工作流节点";
  const description = data.description || definition?.description || "等待补充节点配置。";
  const previewUrl =
    String(metadata.previewMediaUrl || metadata.resultMediaUrl || "").trim();
  const previewKind =
    String(metadata.previewMediaKind || metadata.resultMediaKind || "").trim() === "video"
      ? "video"
      : "image";
  const storyboardShots = Array.isArray(metadata.storyboardShots)
    ? metadata.storyboardShots.slice(0, 4)
    : [];
  const analysisHighlights = Array.isArray(metadata.analysisHighlights)
    ? metadata.analysisHighlights.slice(0, 4)
    : [];
  const compareItems = Array.isArray(metadata.compareItems)
    ? metadata.compareItems.slice(0, 4)
    : [];
  const tableColumns = Array.isArray(metadata.tableColumns)
    ? metadata.tableColumns.slice(0, 4)
    : [];
  const tableRows = Array.isArray(metadata.tableRows)
    ? metadata.tableRows.slice(0, 4)
    : [];
  const characters = Array.isArray(metadata.characters)
    ? metadata.characters.slice(0, 3)
    : [];
  const scenes = Array.isArray(metadata.scenes) ? metadata.scenes.slice(0, 3) : [];
  const characterAssets = Array.isArray(metadata.characterAssets)
    ? metadata.characterAssets.slice(0, 3)
    : [];
  const sceneAssets = Array.isArray(metadata.sceneAssets)
    ? metadata.sceneAssets.slice(0, 3)
    : [];
  const agentPlan = Array.isArray(metadata.agentPlan)
    ? metadata.agentPlan.slice(0, 4)
    : [];
  const deliverables = Array.isArray(metadata.deliverables)
    ? metadata.deliverables.slice(0, 4)
    : [];
  const linkedAgentProjectId = String(metadata.linkedAgentProjectId || "").trim();
  const linkedAgentProjectTitle = String(metadata.linkedAgentProjectTitle || "").trim();
  const importedAgentResultCount = Math.max(Number(metadata.importedAgentResultCount || 0), 0);
  const pendingAgentResultCount = Math.max(Number(metadata.pendingAgentResultCount || 0), 0);
  const agentResultGroups = Array.isArray(metadata.agentResultGroups)
    ? metadata.agentResultGroups.slice(0, 4)
    : [];
  const batchShotCount = Math.max(
    Number(metadata.batchShotCount || 0),
    storyboardShots.length
  );
  const batchResultCount = Number(metadata.batchResultCount || 0);
  const batchFailedCount = Number(metadata.batchFailedCount || 0);
  const batchMode =
    String(metadata.batchMode || "").trim() === "gen-video" ? "视频批量" : "图片批量";
  const accentGlow = toAlphaColor(accentColor, 0.18) || "rgba(59, 130, 246, 0.12)";
  const accentLine = toAlphaColor(accentColor, 0.3) || "rgba(59, 130, 246, 0.2)";
  const sectionClassName =
    "rounded-2xl border border-border/60 bg-background/74 p-3 shadow-[inset_0_1px_0_rgba(255,255,255,0.3)]";
  const mutedKickerClassName =
    "text-[11px] uppercase tracking-[0.18em] text-muted-foreground/80";
  const itemClassName = "rounded-xl border border-border/50 bg-background/88 px-3 py-2";
  const badgeClassName = "border-border/60 bg-background/82 text-foreground/80";

  return (
    <div
      className={cn(
        "relative h-full w-full overflow-hidden rounded-[28px] border border-border/60 bg-background/95 shadow-[0_22px_55px_-30px_rgba(15,23,42,0.38)] backdrop-blur-xl transition-all",
        isSelected &&
          "border-primary/55 ring-2 ring-primary/15 shadow-[0_26px_60px_-28px_rgba(59,130,246,0.28)]"
      )}
    >
      <div
        className="pointer-events-none absolute inset-0"
        style={{
          backgroundImage: `radial-gradient(circle at top left, ${accentGlow} 0%, transparent 42%), linear-gradient(180deg, ${accentLine} 0%, transparent 18%)`,
        }}
      />
      <div className="pointer-events-none absolute inset-x-0 top-0 h-px bg-border/70" />

      <div className="relative flex h-full flex-col gap-4 p-4">
        <div className="flex items-start justify-between gap-3">
          <div className="space-y-2">
            <div className="flex items-center gap-2 text-xs font-medium text-muted-foreground">
              <span className="flex h-8 w-8 items-center justify-center rounded-full border border-border/60 bg-background/90 shadow-sm">
                <GroupIcon className="h-4 w-4" />
              </span>
              <span>{groupMeta.label}</span>
            </div>
            <div>
              <h3 className="text-base font-semibold leading-tight text-foreground">{title}</h3>
              <p className="mt-1 text-sm leading-6 text-muted-foreground">{description}</p>
            </div>
          </div>
          <Badge variant="outline" className={badgeClassName}>
            {STATUS_LABELS[data.status] || STATUS_LABELS.pending}
          </Badge>
        </div>

        <div className={sectionClassName}>
          <div className={mutedKickerClassName}>节点标识</div>
          <div className="mt-1 font-mono text-xs text-foreground/80">{data.templateType}</div>
          <p className="mt-2 text-sm leading-6 text-muted-foreground">
            {data.summary || "把这个节点接在上游素材之后，用来承接处理或输出。"}
          </p>
        </div>

        {batchShotCount > 0 || batchResultCount > 0 ? (
          <div className={sectionClassName}>
            <div className={mutedKickerClassName}>批量执行</div>
            <div className="mt-2 flex flex-wrap gap-2">
              {batchShotCount > 0 ? (
                <Badge variant="outline" className={badgeClassName}>
                  镜头 {batchShotCount}
                </Badge>
              ) : null}
              {batchResultCount > 0 ? (
                <Badge variant="outline" className={badgeClassName}>
                  结果 {batchResultCount}
                </Badge>
              ) : null}
              {batchFailedCount > 0 ? (
                <Badge
                  variant="outline"
                  className="border-amber-200/70 bg-amber-50/80 text-amber-700"
                >
                  失败 {batchFailedCount}
                </Badge>
              ) : null}
              {batchResultCount > 0 ? (
                <Badge variant="outline" className={badgeClassName}>
                  {batchMode}
                </Badge>
              ) : null}
            </div>
          </div>
        ) : null}

        {previewUrl ? (
          <div className="overflow-hidden rounded-2xl border border-border/60 bg-slate-950/95 shadow-[0_16px_40px_-28px_rgba(15,23,42,0.65)]">
            {previewKind === "video" ? (
              <video
                src={previewUrl}
                className="h-36 w-full object-cover"
                controls
                muted
                playsInline
              />
            ) : (
              <img
                src={previewUrl}
                alt={title}
                className="h-36 w-full object-cover"
              />
            )}
          </div>
        ) : null}

        {compareItems.length > 0 ? (
          <div className={sectionClassName}>
            <div className={mutedKickerClassName}>对比结果</div>
            <div className="mt-2 grid grid-cols-2 gap-2">
              {compareItems.map((item, index) => {
                const compareItem = (item || {}) as Record<string, any>;
                const kind =
                  String(compareItem.kind || "").trim() === "video" ? "video" : "image";
                const url = String(compareItem.url || "").trim();
                if (!url) {
                  return null;
                }
                return (
                  <div
                    key={`${data.templateType}-compare-${index}`}
                    className="overflow-hidden rounded-2xl border border-border/60 bg-background/88"
                  >
                    <div className="border-b border-border/60 px-3 py-2">
                      <div className="text-[11px] uppercase tracking-[0.16em] text-muted-foreground">
                        {String(compareItem.label || `对比 ${index + 1}`)}
                      </div>
                      <div className="mt-1 truncate text-xs font-medium text-foreground/90">
                        {String(compareItem.title || `素材 ${index + 1}`)}
                      </div>
                    </div>
                    {kind === "video" ? (
                      <video
                        src={url}
                        className="h-24 w-full object-cover"
                        controls
                        muted
                        playsInline
                      />
                    ) : (
                      <img
                        src={url}
                        alt={String(compareItem.title || `对比素材 ${index + 1}`)}
                        className="h-24 w-full object-cover"
                      />
                    )}
                  </div>
                );
              })}
            </div>
          </div>
        ) : null}

        {storyboardShots.length > 0 ? (
          <div className={sectionClassName}>
            <div className={mutedKickerClassName}>镜头草案</div>
            <div className="mt-2 space-y-2">
              {storyboardShots.map((item, index) => {
                const shot = (item || {}) as Record<string, any>;
                return (
                  <div key={`${data.templateType}-shot-${index}`} className={itemClassName}>
                    <div className="text-xs font-semibold text-foreground/90">
                      {String(shot.title || `镜头 ${index + 1}`)}
                    </div>
                    <div className="mt-1 text-xs leading-5 text-muted-foreground">
                      {String(shot.description || "")}
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        ) : null}

        {tableColumns.length > 0 && tableRows.length > 0 ? (
          <div className={sectionClassName}>
            <div className={mutedKickerClassName}>结构化表格</div>
            <div className="mt-2 flex flex-wrap gap-2">
              {tableColumns.map((item, index) => {
                const column = (item || {}) as Record<string, any>;
                return (
                  <Badge
                    key={`${data.templateType}-column-${index}`}
                    variant="outline"
                    className={badgeClassName}
                  >
                    {String(column.label || column.key || `列 ${index + 1}`)}
                  </Badge>
                );
              })}
            </div>
            <div className="mt-2 space-y-2">
              {tableRows.map((item, index) => {
                const row = (item || {}) as Record<string, any>;
                return (
                  <div key={`${data.templateType}-row-${index}`} className={itemClassName}>
                    {tableColumns.map((columnItem, columnIndex) => {
                      const column = (columnItem || {}) as Record<string, any>;
                      const columnKey = String(column.key || `col-${columnIndex}`).trim();
                      const label = String(column.label || columnKey || `列 ${columnIndex + 1}`).trim();
                      const value = String(row[columnKey] || "").trim();
                      if (!value) {
                        return null;
                      }
                      return (
                        <div
                          key={`${data.templateType}-row-${index}-column-${columnIndex}`}
                          className={columnIndex > 0 ? "mt-2" : ""}
                        >
                          <div className="text-[11px] uppercase tracking-[0.16em] text-muted-foreground">
                            {label}
                          </div>
                          <div className="mt-1 text-xs leading-5 text-foreground/85">
                            {value}
                          </div>
                        </div>
                      );
                    })}
                  </div>
                );
              })}
            </div>
          </div>
        ) : null}

        {analysisHighlights.length > 0 ? (
          <div className={sectionClassName}>
            <div className={mutedKickerClassName}>分析摘要</div>
            <div className="mt-2 space-y-2">
              {analysisHighlights.map((item, index) => (
                <div
                  key={`${data.templateType}-analysis-${index}`}
                  className={cn(itemClassName, "text-xs leading-5 text-muted-foreground")}
                >
                  {String(item || "")}
                </div>
              ))}
            </div>
          </div>
        ) : null}

        {characters.length > 0 ? (
          <div className={sectionClassName}>
            <div className={mutedKickerClassName}>角色线索</div>
            <div className="mt-2 space-y-2">
              {characters.map((item, index) => {
                const character = (item || {}) as Record<string, any>;
                return (
                  <div key={`${data.templateType}-character-${index}`} className={itemClassName}>
                    <div className="text-xs font-semibold text-foreground/90">
                      {String(character.name || character.title || `角色 ${index + 1}`)}
                    </div>
                    <div className="mt-1 text-xs leading-5 text-muted-foreground">
                      {String(character.description || character.prompt || "")}
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        ) : null}

        {scenes.length > 0 ? (
          <div className={sectionClassName}>
            <div className={mutedKickerClassName}>场景线索</div>
            <div className="mt-2 space-y-2">
              {scenes.map((item, index) => {
                const scene = (item || {}) as Record<string, any>;
                return (
                  <div key={`${data.templateType}-scene-${index}`} className={itemClassName}>
                    <div className="text-xs font-semibold text-foreground/90">
                      {String(scene.name || scene.title || `场景 ${index + 1}`)}
                    </div>
                    <div className="mt-1 text-xs leading-5 text-muted-foreground">
                      {String(scene.description || scene.prompt || "")}
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        ) : null}

        {characterAssets.length > 0 || sceneAssets.length > 0 ? (
          <div className={sectionClassName}>
            <div className={mutedKickerClassName}>资产沉淀</div>
            <div className="mt-2 space-y-2">
              {[...characterAssets, ...sceneAssets].slice(0, 4).map((item, index) => {
                const asset = (item || {}) as Record<string, any>;
                return (
                  <div key={`${data.templateType}-asset-${index}`} className={itemClassName}>
                    <div className="text-xs font-semibold text-foreground/90">
                      {String(asset.name || asset.title || `资产 ${index + 1}`)}
                    </div>
                    <div className="mt-1 text-xs leading-5 text-muted-foreground">
                      {String(asset.description || asset.prompt || "")}
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        ) : null}

        {agentPlan.length > 0 || deliverables.length > 0 ? (
          <div className={sectionClassName}>
            <div className={mutedKickerClassName}>代理计划</div>
            <div className="mt-2 space-y-2">
              {agentPlan.map((item, index) => (
                <div
                  key={`${data.templateType}-plan-${index}`}
                  className={cn(itemClassName, "text-xs leading-5 text-muted-foreground")}
                >
                  {String(item || "")}
                </div>
              ))}
              {deliverables.map((item, index) => (
                <div
                  key={`${data.templateType}-deliverable-${index}`}
                  className="rounded-xl border border-dashed border-border/60 bg-background/82 px-3 py-2 text-xs leading-5 text-muted-foreground"
                >
                  交付物: {String(item || "")}
                </div>
              ))}
            </div>
          </div>
        ) : null}

        {linkedAgentProjectId ? (
          <div className={sectionClassName}>
            <div className={mutedKickerClassName}>Agent 工作台</div>
            <div className="mt-2 flex flex-wrap gap-2">
              <Badge variant="outline" className={badgeClassName}>
                已连接
              </Badge>
              {importedAgentResultCount > 0 ? (
                <Badge variant="outline" className={badgeClassName}>
                  已回流 {importedAgentResultCount}
                </Badge>
              ) : null}
              {pendingAgentResultCount > 0 ? (
                <Badge variant="outline" className={badgeClassName}>
                  待回流 {pendingAgentResultCount}
                </Badge>
              ) : null}
            </div>
            <div className="mt-2 text-xs font-medium leading-5 text-foreground/90">
              {linkedAgentProjectTitle || linkedAgentProjectId}
            </div>
          </div>
        ) : null}

        {agentResultGroups.length > 0 ? (
          <div className={sectionClassName}>
            <div className={mutedKickerClassName}>Agent 结果</div>
            <div className="mt-2 space-y-2">
              {agentResultGroups.map((item, index) => {
                const group = (item || {}) as Record<string, any>;
                const label = String(group.label || `结果组 ${index + 1}`).trim();
                const count = Math.max(Number(group.count || 0), 0);
                const importedCount = Math.max(Number(group.importedCount || 0), 0);
                return (
                  <div
                    key={`${data.templateType}-agent-group-${index}`}
                    className={itemClassName}
                  >
                    <div className="flex items-center justify-between gap-3">
                      <div className="text-xs font-semibold text-foreground/90">{label}</div>
                      <div className="text-[11px] text-muted-foreground">
                        {importedCount}/{count}
                      </div>
                    </div>
                    <div className="mt-1 text-xs leading-5 text-muted-foreground">
                      共 {count} 个结果，已回流 {importedCount} 个。
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        ) : null}

        <div className="mt-auto space-y-2">
          <div className={mutedKickerClassName}>下一步推荐</div>
          {quickConnectOutputs.length > 0 ? (
            <div className="flex flex-wrap gap-2">
              {quickConnectOutputs.slice(0, 4).map((item) => (
                <span
                  key={`${data.templateType}-${item.type}`}
                  className="rounded-full border border-border/60 bg-background/90 px-2.5 py-1 text-xs text-foreground/80 shadow-sm"
                >
                  {item.label}
                </span>
              ))}
            </div>
          ) : (
            <div className="rounded-full border border-dashed border-border/70 bg-background/72 px-3 py-1.5 text-xs text-muted-foreground">
              当前节点通常作为流程终点或独立处理节点
            </div>
          )}
        </div>
      </div>
    </div>
  );
}