import React, { useEffect, useMemo, useRef } from 'react';
import { Bot, CheckCircle2, Database, FileCheck2, Sparkles, UserRound } from 'lucide-react';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import { useTheme } from '../../contexts/ThemeContext';
import ExpertMatchCards from './ExpertMatchCards';
import StreamErrorNotice from './StreamErrorNotice';
import {
  ActorCardItem,
  BehaviorCardItem,
  InlineCollapsible,
  NarrativeCardItem,
  ParentGroupHeader,
  PurposeCardItem,
  STAGE_ICONS,
  StageHeader,
  ThinkingBlock,
} from './SixStepCards';
import type {
  ActorCard,
  BehaviorDriverCard,
  InfoStageData,
  NarrativeCard,
  PurposeCard,
  SixStepMessage,
} from './types';

export interface ExpertMatchHandlers {
  onSelectExpert: (messageId: string, expertId: string) => void;
  onRefetchExpert: (messageId: string) => void;
  onCreateExpert: (messageId: string) => void;
  onConfirmExpert: (messageId: string) => void;
}

interface SixStepConversationProps {
  messages: SixStepMessage[];
  isGenerating: boolean;
  activeMessageId?: string | null;
  expertHandlers?: ExpertMatchHandlers;
}

interface AvatarProps {
  role: 'user' | 'assistant';
  active?: boolean;
}

const Avatar: React.FC<AvatarProps> = ({ role, active }) => {
  const { theme } = useTheme();
  const isDark = theme === 'dark';
  const Icon = role === 'assistant' ? Bot : UserRound;
  return (
    <div className={`relative w-9 h-9 rounded-2xl flex items-center justify-center shrink-0 shadow-sm overflow-hidden ${
      role === 'assistant'
        ? isDark
          ? 'bg-gradient-to-br from-cyan-500 via-blue-600 to-violet-600 text-white'
          : 'bg-gradient-to-br from-red-400 via-rose-500 to-orange-400 text-white'
        : isDark
          ? 'bg-gradient-to-br from-slate-500 via-slate-700 to-slate-900 text-white'
          : 'bg-gradient-to-br from-sky-400 via-indigo-500 to-violet-500 text-white'
    } ${active ? 'sixstep-pulse' : ''}`}>
      <Icon className="w-5 h-5" />
      {role === 'assistant' && active && (
        <Sparkles className="absolute -right-0.5 -top-0.5 w-3.5 h-3.5 text-yellow-200" />
      )}
    </div>
  );
};

const InfoStage: React.FC<{ data: InfoStageData; running: boolean }> = ({ data, running }) => {
  const { theme } = useTheme();
  const isDark = theme === 'dark';
  return (
    <InlineCollapsible
      defaultOpen={false}
      title={
        <div className="flex items-center gap-3">
          <div className={`w-9 h-9 rounded-2xl flex items-center justify-center shrink-0 ${
            isDark
              ? `bg-blue-500/15 text-blue-200 ${running ? 'sixstep-pulse' : ''}`
              : `bg-blue-50 text-blue-500 ${running ? 'sixstep-pulse' : ''}`
          }`}>
            <Database className="w-5 h-5" />
          </div>
          <div className="flex-1 min-w-0">
            <div className={`text-sm font-semibold flex items-center gap-2 ${isDark ? 'text-white' : 'text-gray-900'}`}>
              <span>信息准备</span>
              {data.complete && (
                <span className={`text-[10px] font-medium px-1.5 py-0.5 rounded-full ${
                  isDark ? 'bg-emerald-500/20 text-emerald-300' : 'bg-emerald-50 text-emerald-600'
                }`}>已完成</span>
              )}
              {running && (
                <span className={`text-[10px] font-medium px-1.5 py-0.5 rounded-full ${
                  isDark ? 'bg-blue-500/20 text-blue-200' : 'bg-blue-50 text-blue-600'
                }`}>收集中</span>
              )}
            </div>
            <div className={`text-xs mt-0.5 ${
              running
                ? isDark ? 'sixstep-shimmer-text' : 'sixstep-shimmer-text-light'
                : isDark ? 'text-slate-400' : 'text-gray-500'
            }`}>
              {running ? '正在收集热搜与上下文信息...' : '已整合信息准备素材'}
            </div>
          </div>
        </div>
      }
    >
      {data.content ? (
        <div className={`prose prose-sm max-w-none text-sm leading-relaxed ${
          isDark ? 'prose-invert text-slate-300' : 'text-gray-700'
        }`}>
          <ReactMarkdown remarkPlugins={[remarkGfm]}>{data.content}</ReactMarkdown>
        </div>
      ) : (
        <div className={`text-xs ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>
          {running ? '正在获取信息...' : '无内容'}
        </div>
      )}
    </InlineCollapsible>
  );
};

const MarkdownMessage: React.FC<{ content: string; isDark: boolean }> = ({ content, isDark }) => (
  <div className={`rounded-2xl border px-5 py-4 ${
    isDark
      ? 'border-slate-700/50 bg-slate-800/30'
      : 'border-gray-100 bg-white'
  }`}>
    <div className={`prose prose-sm max-w-none leading-relaxed ${isDark ? 'prose-invert' : ''}`}>
      <ReactMarkdown remarkPlugins={[remarkGfm]}>{content}</ReactMarkdown>
    </div>
  </div>
);

const PurposeStage: React.FC<{ data: NonNullable<SixStepMessage['stages']>['purpose']; running: boolean }> = ({ data, running }) => {
  if (!data) return null;
  const Icon = STAGE_ICONS.purpose;
  const cards = data.cards ?? [];
  return (
    <InlineCollapsible
      defaultOpen
      title={
        <StageHeader
          title="目的生成"
          desc={running ? '正在推演核心目的...' : '已识别核心目的方向'}
          count={cards.length}
          loading={running}
          done={data.complete}
          icon={Icon}
          accent="purpose"
        />
      }
    >
      <div className="space-y-3">
        <ThinkingBlock text={data.thinking} loading={running && !data.thinking} />
        <InlineCollapsible
          variant="subtle"
          defaultOpen
          title={
            <div className="flex items-center gap-2">
              <span className="text-xs font-medium">目的卡片列表</span>
              <span className="text-[10px] opacity-70">{cards.length} 张</span>
            </div>
          }
        >
          {cards.length === 0 ? (
            <div className="text-xs opacity-60">等待生成目的卡片...</div>
          ) : (
            <div className="space-y-2">
              {cards.map((card) => (
                <PurposeCardItem key={card.id} card={card} />
              ))}
            </div>
          )}
        </InlineCollapsible>
      </div>
    </InlineCollapsible>
  );
};

const ActorStage: React.FC<{
  data: NonNullable<SixStepMessage['stages']>['actor'];
  purposes: PurposeCard[];
  running: boolean;
}> = ({ data, purposes, running }) => {
  if (!data) return null;
  const Icon = STAGE_ICONS.actor;
  const cards = data.cards ?? [];

  const groups = useMemo(() => {
    const map = new Map<string, ActorCard[]>();
    cards.forEach((card) => {
      const list = map.get(card.purposeId) ?? [];
      list.push(card);
      map.set(card.purposeId, list);
    });
    return purposes
      .map((purpose) => ({ purpose, items: map.get(purpose.id) ?? [] }))
      .filter((g) => g.items.length > 0);
  }, [cards, purposes]);

  return (
    <InlineCollapsible
      defaultOpen
      title={
        <StageHeader
          title="行为体生成"
          desc={running ? '正在匹配行为体角色...' : '已生成行为体清单'}
          count={cards.length}
          loading={running}
          done={data.complete}
          icon={Icon}
          accent="actor"
        />
      }
    >
      <div className="space-y-3">
        <ThinkingBlock text={data.thinking} loading={running && !data.thinking} />
        <InlineCollapsible
          variant="subtle"
          defaultOpen
          title={
            <div className="flex items-center gap-2">
              <span className="text-xs font-medium">行为体卡片列表</span>
              <span className="text-[10px] opacity-70">{cards.length} 张</span>
            </div>
          }
        >
          {groups.length === 0 ? (
            <div className="text-xs opacity-60">等待生成行为体卡片...</div>
          ) : (
            <div className="space-y-4">
              {groups.map((group) => (
                <div key={group.purpose.id} className="space-y-2 sixstep-fade-up">
                  <ParentGroupHeader label="所属目的" parentTitle={group.purpose.title} count={group.items.length} variant="actor" />
                  <div className="space-y-2 pl-2 border-l-2 border-dashed border-slate-400/20">
                    {group.items.map((card) => (
                      <ActorCardItem key={card.id} card={card} />
                    ))}
                  </div>
                </div>
              ))}
            </div>
          )}
        </InlineCollapsible>
      </div>
    </InlineCollapsible>
  );
};

const BehaviorStage: React.FC<{
  data: NonNullable<SixStepMessage['stages']>['behavior'];
  actors: ActorCard[];
  running: boolean;
}> = ({ data, actors, running }) => {
  if (!data) return null;
  const Icon = STAGE_ICONS.behavior;
  const cards = data.cards ?? [];

  const groups = useMemo(() => {
    const map = new Map<string, BehaviorDriverCard[]>();
    cards.forEach((card) => {
      const list = map.get(card.actorId) ?? [];
      list.push(card);
      map.set(card.actorId, list);
    });
    return actors
      .map((actor) => ({ actor, items: map.get(actor.id) ?? [] }))
      .filter((g) => g.items.length > 0);
  }, [cards, actors]);

  return (
    <InlineCollapsible
      defaultOpen
      title={
        <StageHeader
          title="预期行为与驱动因素生成"
          desc={running ? '正在推演行为及驱动因素...' : '已生成预期行为与驱动因素'}
          count={cards.length}
          loading={running}
          done={data.complete}
          icon={Icon}
          accent="behavior"
        />
      }
    >
      <div className="space-y-3">
        <ThinkingBlock text={data.thinking} loading={running && !data.thinking} />
        <InlineCollapsible
          variant="subtle"
          defaultOpen
          title={
            <div className="flex items-center gap-2">
              <span className="text-xs font-medium">预期行为与驱动因素卡片列表</span>
              <span className="text-[10px] opacity-70">{cards.length} 张</span>
            </div>
          }
        >
          {groups.length === 0 ? (
            <div className="text-xs opacity-60">等待生成预期行为与驱动因素卡片...</div>
          ) : (
            <div className="space-y-4">
              {groups.map((group) => (
                <div key={group.actor.id} className="space-y-2 sixstep-fade-up">
                  <ParentGroupHeader label="所属行为体" parentTitle={group.actor.title} count={group.items.length} variant="behavior" />
                  <div className="grid grid-cols-1 lg:grid-cols-2 gap-2 pl-2 border-l-2 border-dashed border-slate-400/20">
                    {group.items.map((card) => (
                      <BehaviorCardItem key={card.id} card={card} />
                    ))}
                  </div>
                </div>
              ))}
            </div>
          )}
        </InlineCollapsible>
      </div>
    </InlineCollapsible>
  );
};

const NarrativeStage: React.FC<{
  data: NonNullable<SixStepMessage['stages']>['narrative'];
  behaviors: BehaviorDriverCard[];
  running: boolean;
}> = ({ data, behaviors, running }) => {
  if (!data) return null;
  const Icon = STAGE_ICONS.narrative;
  const cards = data.cards ?? [];

  const groups = useMemo(() => {
    const map = new Map<string, NarrativeCard[]>();
    cards.forEach((card) => {
      const list = map.get(card.driverId) ?? [];
      list.push(card);
      map.set(card.driverId, list);
    });
    return behaviors
      .map((behavior) => ({ behavior, items: map.get(behavior.id) ?? [] }))
      .filter((g) => g.items.length > 0);
  }, [cards, behaviors]);

  return (
    <InlineCollapsible
      defaultOpen
      title={
        <StageHeader
          title="叙事生成"
          desc={running ? '正在构建叙事框架...' : '已生成叙事卡片'}
          count={cards.length}
          loading={running}
          done={data.complete}
          icon={Icon}
          accent="narrative"
        />
      }
    >
      <div className="space-y-3">
        <ThinkingBlock text={data.thinking} loading={running && !data.thinking} />
        <InlineCollapsible
          variant="subtle"
          defaultOpen
          title={
            <div className="flex items-center gap-2">
              <span className="text-xs font-medium">叙事卡片列表</span>
              <span className="text-[10px] opacity-70">{cards.length} 张</span>
            </div>
          }
        >
          {groups.length === 0 ? (
            <div className="text-xs opacity-60">等待生成叙事卡片...</div>
          ) : (
            <div className="space-y-4">
              {groups.map((group) => (
                <div key={group.behavior.id} className="space-y-2 sixstep-fade-up">
                  <ParentGroupHeader
                    label="所属驱动因素"
                    parentTitle={group.behavior.driver}
                    count={group.items.length}
                    variant="narrative"
                  />
                  <div className="space-y-2 pl-2 border-l-2 border-dashed border-slate-400/20">
                    {group.items.map((card) => (
                      <NarrativeCardItem key={card.id} card={card} />
                    ))}
                  </div>
                </div>
              ))}
            </div>
          )}
        </InlineCollapsible>
      </div>
    </InlineCollapsible>
  );
};

const FinalAnswer: React.FC<{ text: string; running: boolean }> = ({ text, running }) => {
  const { theme } = useTheme();
  const isDark = theme === 'dark';
  if (!text && !running) return null;
  return (
    <div className={`rounded-2xl border p-4 ${
      isDark
        ? 'border-slate-600/40 bg-slate-700/40 shadow-lg shadow-black/10'
        : 'border-red-100 bg-white shadow-sm'
    }`}>
      <div className="flex items-center gap-2 mb-2">
        <FileCheck2 className={`w-4 h-4 ${isDark ? 'text-emerald-300' : 'text-emerald-600'}`} />
        <span className={`text-sm font-semibold ${isDark ? 'text-white' : 'text-gray-900'}`}>最终结果</span>
        {running && (
          <span className={`text-[11px] ${isDark ? 'sixstep-shimmer-text' : 'sixstep-shimmer-text-light'}`}>
            正在汇总输出
          </span>
        )}
      </div>
      <pre className={`whitespace-pre-wrap text-sm leading-relaxed font-sans ${isDark ? 'text-slate-200' : 'text-gray-700'}`}>
        {text || '准备汇总输出...'}
      </pre>
    </div>
  );
};

const SelectedSummaryPill: React.FC<{ message: SixStepMessage }> = ({ message }) => {
  const { theme } = useTheme();
  const isDark = theme === 'dark';
  if (!message.selectedExpert) return null;
  const mcps = message.selectedMcps ?? [];
  const labelMap: Record<string, string> = {
    purpose: '目的',
    actor: '行为体',
    behavior_factor: '预期行为和驱动因素',
    narrative: '叙事',
  };
  return (
    <div className={`flex flex-wrap items-center gap-2 rounded-2xl border px-3 py-2 ${
      isDark ? 'border-cyan-400/30 bg-cyan-500/10 text-cyan-100' : 'border-red-200 bg-red-50/70 text-red-700'
    }`}>
      <CheckCircle2 className="w-4 h-4" />
      <span className="text-xs font-semibold">已选专家</span>
      <span className={`text-xs font-medium px-2 py-0.5 rounded-full ${
        isDark ? 'bg-slate-900/40 text-cyan-100' : 'bg-white text-red-600 shadow-sm'
      }`}>
        {message.selectedExpert.name}
      </span>
      {mcps.length > 0 && (
        <>
          <span className={`text-[11px] ${isDark ? 'text-slate-300' : 'text-gray-500'}`}>·</span>
          <span className={`text-[11px] ${isDark ? 'text-slate-300' : 'text-gray-600'}`}>
            执行步骤：{mcps.map((k) => labelMap[k] || k).join(' → ')}
          </span>
        </>
      )}
    </div>
  );
};

interface AssistantMessageProps {
  message: SixStepMessage;
  active: boolean;
  expertHandlers?: ExpertMatchHandlers;
}

const AssistantMessage: React.FC<AssistantMessageProps> = ({ message, active, expertHandlers }) => {
  const { theme } = useTheme();
  const isDark = theme === 'dark';

  const isMarkdown = message.outputFormat === 'markdown';
  const isFollowUp = message.phase === 'follow-up';
  const stages = message.stages ?? {};
  const purposes = stages.purpose?.cards ?? [];
  const actors = stages.actor?.cards ?? [];
  const behaviors = stages.behavior?.cards ?? [];

  const isInfoRunning = message.mainStepStatus?.info === 'running';
  const isPurposeRunning = message.subStepStatus?.purpose === 'running';
  const isActorRunning = message.subStepStatus?.actor === 'running';
  const isBehaviorRunning = message.subStepStatus?.behavior === 'running';
  const isNarrativeRunning = message.subStepStatus?.narrative === 'running';
  const isFinalRunning = message.mainStepStatus?.final === 'running';
  const generating =
    isInfoRunning ||
    message.mainStepStatus?.sixstep === 'running' ||
    isFinalRunning;
  // follow-up 在等待第一个 delta 时显示加载态
  const followUpGenerating = isFollowUp && active && !message.markdownContent;

  const noStageYet = !stages.info && !stages.purpose && !stages.actor && !stages.behavior && !stages.narrative;

  const expertMatch = message.expertMatch;
  const inExpertPhase = message.phase === 'expert-match' && !!expertMatch;
  const expertConfirmed = expertMatch?.status === 'confirmed' || !!message.selectedExpert;
  const expertActive = active && inExpertPhase && !expertConfirmed;

  // Only render info/stages/finalAnswer when we're in an analysis phase.
  // Expert-match, clarifying, and follow-up phases show their own dedicated UI instead.
  const showAnalysisContent =
    !inExpertPhase &&
    message.phase !== 'clarifying' &&
    message.phase !== 'follow-up';

  return (
    <div className="flex gap-3">
      <Avatar role="assistant" active={generating || expertActive || followUpGenerating} />
      <div className={`flex-1 min-w-0 max-w-full rounded-2xl px-4 py-3 border ${
        isDark
          ? 'bg-slate-800/40 border-slate-700/50'
          : 'bg-transparent border-transparent shadow-none px-0 py-0'
      }`}>
        <div className="space-y-3">
          {/* Expert match phase: show expert cards before stages */}
          {inExpertPhase && expertMatch && (
            <ExpertMatchCards
              data={expertMatch}
              locked={expertConfirmed || !active}
              onSelectExpert={(id) => expertHandlers?.onSelectExpert(message.id, id)}
              onRefetch={() => expertHandlers?.onRefetchExpert(message.id)}
              onCreateExpert={() => expertHandlers?.onCreateExpert(message.id)}
              onConfirm={() => expertHandlers?.onConfirmExpert(message.id)}
            />
          )}
          {inExpertPhase && (message.errors?.length ?? 0) > 0 && (
            <StreamErrorNotice errors={message.errors!} />
          )}

          {/* Selected expert / MCP summary once moved to generate phase */}
          {message.selectedExpert && message.phase !== 'expert-match' && (
            <SelectedSummaryPill message={message} />
          )}

          {showAnalysisContent && (
            <>
              {/* Info preparing placeholder when no stage data yet */}
              {isInfoRunning && noStageYet && (
                <div className={`rounded-2xl border px-4 py-3 ${
                  isDark ? 'border-slate-700/60 bg-slate-900/40 text-slate-300' : 'border-blue-100 bg-white text-gray-600'
                }`}>
                  <div className="flex items-center gap-2 text-xs">
                    <Database className={`w-4 h-4 ${isDark ? 'text-blue-300' : 'text-blue-500'}`} />
                    <span className={isDark ? 'sixstep-shimmer-text' : 'sixstep-shimmer-text-light'}>
                      正在调用信息准备，收集热搜与上下文...
                    </span>
                  </div>
                </div>
              )}

              {/* Info prepare result (collapsible) */}
              {stages.info && <InfoStage data={stages.info} running={isInfoRunning} />}

              {(isMarkdown || isFollowUp) ? (
                /* ---- Markdown / Follow-up mode ---- */
                <>
                  {(message.markdownContent || generating || followUpGenerating) && (
                    message.markdownContent ? (
                      <MarkdownMessage content={message.markdownContent} isDark={isDark} />
                    ) : (
                      <div className={`rounded-2xl border px-4 py-3 ${
                        isDark ? 'border-slate-700/60 bg-slate-900/40' : 'border-gray-100 bg-white'
                      }`}>
                        <div className="flex items-center gap-2 text-xs">
                          <Sparkles className={`w-4 h-4 ${isDark ? 'text-cyan-300' : 'text-red-500'}`} />
                          <span className={isDark ? 'sixstep-shimmer-text' : 'sixstep-shimmer-text-light'}>
                            {isFollowUp ? '正在回答你的问题...' : '正在生成推演内容...'}
                          </span>
                        </div>
                      </div>
                    )
                  )}
                  {(message.errors?.length ?? 0) > 0 && (
                    <StreamErrorNotice errors={message.errors!} />
                  )}
                </>
              ) : (
                /* ---- Structured mode ---- */
                <>
                  {stages.purpose && <PurposeStage data={stages.purpose} running={isPurposeRunning} />}
                  {stages.actor && <ActorStage data={stages.actor} purposes={purposes} running={isActorRunning} />}
                  {stages.behavior && <BehaviorStage data={stages.behavior} actors={actors} running={isBehaviorRunning} />}
                  {stages.narrative && (
                    <NarrativeStage data={stages.narrative} behaviors={behaviors} running={isNarrativeRunning} />
                  )}
                  {(message.finalAnswer || isFinalRunning) && (
                    <FinalAnswer text={message.finalAnswer ?? ''} running={isFinalRunning} />
                  )}
                  {(message.errors?.length ?? 0) > 0 && (
                    <StreamErrorNotice errors={message.errors!} />
                  )}
                </>
              )}
            </>
          )}
        </div>
      </div>
    </div>
  );
};

const UserMessage: React.FC<{ message: SixStepMessage }> = ({ message }) => {
  const { theme } = useTheme();
  const isDark = theme === 'dark';
  return (
    <div className="flex gap-3 justify-end">
      <div className={`max-w-[72%] rounded-2xl px-4 py-3 shadow-sm ${
        isDark ? 'bg-blue-600/70 text-white' : 'bg-gradient-to-r from-red-500 to-rose-500 text-white'
      }`}>
        <p className="whitespace-pre-wrap leading-relaxed text-sm">{message.content}</p>
      </div>
      <Avatar role="user" />
    </div>
  );
};

const SixStepConversation: React.FC<SixStepConversationProps> = ({ messages, isGenerating, activeMessageId, expertHandlers }) => {
  const { theme } = useTheme();
  const isDark = theme === 'dark';
  const scrollRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const el = scrollRef.current;
    if (!el) return;
    el.scrollTop = el.scrollHeight;
  }, [messages, isGenerating]);

  if (messages.length === 0) {
    return (
      <div className={`h-full flex flex-col items-center justify-center px-6 text-center ${
        isDark ? 'text-slate-400' : 'text-gray-500'
      }`}>
        <div className={`w-20 h-20 rounded-3xl mb-5 flex items-center justify-center ${
          isDark ? 'bg-slate-700/40 text-cyan-300' : 'bg-gradient-to-br from-red-50 to-orange-50 text-red-500'
        }`}>
          <Sparkles className="w-10 h-10 opacity-80" />
        </div>
        <p className={`text-lg font-medium ${isDark ? 'text-white' : 'text-gray-800'}`}>开始 6 步法推演</p>
        <p className="text-sm mt-2 max-w-md">
          输入问题或场景描述，模型会按照"信息准备 → 6 步法推演 → 最终结果"的流程逐步生成结构化输出。
        </p>
      </div>
    );
  }

  return (
    <div ref={scrollRef} className="h-full overflow-y-auto px-5 py-5 space-y-5">
      {messages.map((msg) => (
        <div key={msg.id}>
          {msg.role === 'user' ? (
            <UserMessage message={msg} />
          ) : (
            <AssistantMessage
              message={msg}
              active={msg.id === activeMessageId}
              expertHandlers={expertHandlers}
            />
          )}
        </div>
      ))}
    </div>
  );
};

export default SixStepConversation;