import { ArrowLeft, Send, Sparkles } from 'lucide-react';
import { useEffect, useRef, useState } from 'react';

import {
  type CreationAgentProgressCopy,
  normalizeCreationAgentProgress,
  resolveCreationAgentProgressHint,
} from '../../services/creation-agent';

export type CreationAgentAnchorView = {
  key: string;
  label: string;
  value: string;
  status: string;
};

export type CreationAgentMessageView = {
  id: string;
  role: string;
  kind?: string;
  text: string;
  createdAt?: string;
};

export type CreationAgentOperationView = {
  operationId?: string;
  type?: string;
  status: string;
  phaseLabel: string;
  phaseDetail?: string;
  progress: number;
  error?: string | null;
};

export type CreationAgentSessionView = {
  sessionId: string;
  title?: string | null;
  assistantSummary?: string | null;
  currentTurn: number;
  progressPercent: number;
  anchors: CreationAgentAnchorView[];
  messages: CreationAgentMessageView[];
  recommendedReplies?: string[];
};

export type CreationAgentTheme = {
  accentTextClass: string;
  accentBgClass: string;
  accentButtonClass: string;
  userBubbleClass: string;
  heroClass: string;
  anchorGridClass?: string;
};

export type CreationAgentQuickAction = {
  key: string;
  label: string;
  minTurn?: number;
  minProgress?: number;
  showWhenComplete?: boolean;
};

type CreationAgentWorkspaceProps = {
  session: CreationAgentSessionView | null;
  theme: CreationAgentTheme;
  loadingText: string;
  composerPlaceholder: string;
  primaryActionLabel: string;
  progressCopy?: CreationAgentProgressCopy;
  activeOperation?: CreationAgentOperationView | null;
  streamingReplyText?: string;
  isStreamingReply?: boolean;
  isBusy?: boolean;
  error?: string | null;
  quickActions?: CreationAgentQuickAction[];
  onBack: () => void;
  onSubmitText: (text: string, quickActionKey?: string) => void;
  onPrimaryAction: () => void;
  onQuickAction?: (action: CreationAgentQuickAction) => void;
};

const AUTO_SCROLL_FOLLOW_THRESHOLD_PX = 96;

function uniqueRecommendedReplies(recommendedReplies: string[] = []) {
  return [...new Set(recommendedReplies.map((reply) => reply.trim()).filter(Boolean))].slice(
    0,
    3,
  );
}

function CreationAgentOperationBanner({
  operation,
}: {
  operation: CreationAgentOperationView | null | undefined;
}) {
  const [visibleOperation, setVisibleOperation] =
    useState<CreationAgentOperationView | null>(operation ?? null);

  useEffect(() => {
    setVisibleOperation(operation ?? null);

    if (operation?.status !== 'completed') {
      return;
    }

    const timeoutId = window.setTimeout(() => {
      setVisibleOperation((current) =>
        current?.operationId === operation.operationId ? null : current,
      );
    }, 1200);

    return () => window.clearTimeout(timeoutId);
  }, [operation]);

  if (!visibleOperation) {
    return null;
  }

  const isFailed = visibleOperation.status === 'failed';
  const isRunning =
    visibleOperation.status === 'running' ||
    visibleOperation.status === 'queued';
  const bannerToneClass = isFailed
    ? 'platform-banner--danger'
    : isRunning
      ? 'platform-banner--info'
      : 'platform-banner--success';
  const progress = normalizeCreationAgentProgress(visibleOperation.progress);
  const progressFillStyle = isFailed
    ? { background: 'linear-gradient(90deg, #fb7185 0%, #f43f5e 100%)' }
    : isRunning
      ? { background: 'var(--platform-button-primary-fill)' }
      : { background: 'linear-gradient(90deg, #86efac 0%, #34d399 100%)' };

  return (
    <div
      className={`platform-remap-surface platform-banner rounded-[1.4rem] px-4 py-4 ${bannerToneClass}`}
    >
      <div className="flex items-center justify-between gap-3">
        <div className="text-sm font-semibold">
          {visibleOperation.phaseLabel}
        </div>
        <div className="text-xs opacity-80">{progress}%</div>
      </div>
      {visibleOperation.phaseDetail ? (
        <div className="mt-1 text-xs opacity-80">
          {visibleOperation.phaseDetail}
        </div>
      ) : null}
      {visibleOperation.error ? (
        <div className="mt-2 text-sm opacity-90">{visibleOperation.error}</div>
      ) : null}
      <div className="platform-progress-track mt-3 h-2 overflow-hidden rounded-full">
        <div
          className="h-full rounded-full transition-[width] duration-300"
          style={{
            width: `${Math.max(8, progress)}%`,
            ...progressFillStyle,
          }}
        />
      </div>
    </div>
  );
}

function CreationAgentMessageBubble({
  message,
  theme,
  recommendedReplies,
  isStreaming = false,
  onRecommendedReply,
}: {
  message: CreationAgentMessageView;
  theme: CreationAgentTheme;
  recommendedReplies?: string[];
  isStreaming?: boolean;
  onRecommendedReply: (text: string) => void;
}) {
  const isUser = message.role === 'user';
  const isSystem = message.role === 'system';
  const visibleRecommendedReplies = isUser || isStreaming
    ? []
    : uniqueRecommendedReplies(recommendedReplies);
  const bubbleToneClass = isUser
    ? theme.userBubbleClass
    : isSystem
      ? 'border border-[var(--platform-warm-border)] bg-[var(--platform-warm-bg)] text-[var(--platform-warm-text)]'
      : 'platform-subpanel text-[var(--platform-text-strong)]';

  return (
    <div className={`flex ${isUser ? 'justify-end' : 'justify-start'}`}>
      <div
        className={`max-w-[90%] rounded-[1.4rem] px-4 py-3 text-sm leading-7 break-words sm:max-w-[82%] ${bubbleToneClass}`}
      >
        {isStreaming ? (
          message.text ? (
            <div className="whitespace-pre-wrap">
              {message.text}
              <span
                className={`ml-1 inline-block h-4 w-1 animate-pulse rounded-full align-[-2px] ${theme.accentBgClass}`}
              />
            </div>
          ) : (
            <div className="flex items-center gap-1.5 py-1">
              <span className="h-2 w-2 animate-pulse rounded-full bg-[var(--platform-text-soft)] [animation-delay:-0.2s]" />
              <span className="h-2 w-2 animate-pulse rounded-full bg-[var(--platform-text-soft)] [animation-delay:-0.1s]" />
              <span className="h-2 w-2 animate-pulse rounded-full bg-[var(--platform-text-soft)]" />
            </div>
          )
        ) : (
          <div className="whitespace-pre-wrap">{message.text}</div>
        )}
        {visibleRecommendedReplies.length > 0 ? (
          <div className="mt-2.5 flex flex-col gap-1.5">
            {visibleRecommendedReplies.map((reply, replyIndex) => (
              <button
                key={`recommended-reply-${replyIndex}-${reply}`}
                type="button"
                onClick={() => onRecommendedReply(reply)}
                className="platform-button platform-button--ghost min-h-0 justify-start rounded-[0.95rem] px-2.5 py-1.5 text-left text-[11px] leading-4.5 whitespace-normal"
              >
                {reply}
              </button>
            ))}
          </div>
        ) : null}
      </div>
    </div>
  );
}

function shouldShowQuickAction(
  action: CreationAgentQuickAction,
  session: CreationAgentSessionView,
  progress: number,
) {
  if (action.showWhenComplete && progress < 100) {
    return false;
  }

  if (typeof action.minTurn === 'number' && session.currentTurn < action.minTurn) {
    return false;
  }

  if (typeof action.minProgress === 'number' && progress < action.minProgress) {
    return false;
  }

  return true;
}

function isMessageListNearBottom(container: HTMLDivElement) {
  return (
    container.scrollHeight - container.scrollTop - container.clientHeight <=
    AUTO_SCROLL_FOLLOW_THRESHOLD_PX
  );
}

function scrollMessageListToBottom(container: HTMLDivElement) {
  if (typeof container.scrollTo === 'function') {
    container.scrollTo({
      top: container.scrollHeight,
      behavior: 'auto',
    });
    return;
  }

  container.scrollTop = container.scrollHeight;
}

export function CreationAgentWorkspace({
  session,
  theme,
  loadingText,
  composerPlaceholder,
  primaryActionLabel,
  progressCopy,
  activeOperation = null,
  streamingReplyText = '',
  isStreamingReply = false,
  isBusy = false,
  error = null,
  quickActions = [],
  onBack,
  onSubmitText,
  onPrimaryAction,
  onQuickAction,
}: CreationAgentWorkspaceProps) {
  const [draftText, setDraftText] = useState('');
  // 统一聊天区只在用户仍停留在底部附近时跟随新内容，避免流式回复持续抢走阅读位置。
  const messageListRef = useRef<HTMLDivElement | null>(null);
  const shouldAutoScrollRef = useRef(true);

  useEffect(() => {
    const container = messageListRef.current;
    if (!container || !shouldAutoScrollRef.current) {
      return;
    }

    scrollMessageListToBottom(container);
  }, [session?.sessionId, session?.messages, streamingReplyText, isStreamingReply]);

  if (!session) {
    return (
      <div className="flex h-full items-center justify-center">
        <div className="platform-subpanel rounded-2xl px-5 py-4 text-sm text-[var(--platform-text-base)]">
          {error || loadingText}
        </div>
      </div>
    );
  }

  const progress = normalizeCreationAgentProgress(session.progressPercent);
  const hasHeroCopy = Boolean(session.title || session.assistantSummary);
  const canShowPrimaryAction = progress >= 100;
  const visibleQuickActions = quickActions.filter((action) =>
    shouldShowQuickAction(action, session, progress),
  );
  const streamingMessageId = `streaming-assistant-${session.sessionId}`;
  const shouldShowStreamingReply = isStreamingReply && streamingReplyText.trim();
  const displayedMessages = shouldShowStreamingReply
    ? [
        ...session.messages,
        {
          id: streamingMessageId,
          role: 'assistant',
          kind: 'chat',
          text: streamingReplyText,
        } satisfies CreationAgentMessageView,
      ]
    : session.messages;
  const lastAssistantMessageIndex = session.messages.reduce(
    (lastIndex, message, index) =>
      message.role === 'assistant' ? index : lastIndex,
    -1,
  );

  const armAutoScrollToBottom = () => {
    shouldAutoScrollRef.current = true;
  };

  const handleMessageListScroll = () => {
    const container = messageListRef.current;
    if (!container) {
      return;
    }

    shouldAutoScrollRef.current = isMessageListNearBottom(container);
  };

  const submitRecommendedReply = (text: string) => {
    armAutoScrollToBottom();
    onSubmitText(text);
  };

  const submit = () => {
    const text = draftText.trim();
    if (!text || isBusy) {
      return;
    }

    armAutoScrollToBottom();
    onSubmitText(text);
    setDraftText('');
  };

  return (
    <div className="mx-auto flex h-full min-h-0 w-full max-w-6xl flex-col gap-3 overflow-hidden px-1 sm:px-0">
      <div className={`relative overflow-hidden rounded-[1.8rem] px-4 py-4 text-white shadow-[0_20px_60px_rgba(15,23,42,0.18)] sm:px-5 ${theme.heroClass}`}>
        <div className="flex items-start justify-between gap-3">
          <button
            type="button"
            aria-label="返回"
            onClick={onBack}
            disabled={isBusy}
            className="inline-flex h-10 w-10 items-center justify-center rounded-full border border-white/16 bg-white/10 text-white/84 disabled:opacity-45"
          >
            <ArrowLeft className="h-4 w-4" />
          </button>
          {canShowPrimaryAction ? (
            <button
              type="button"
              disabled={isBusy}
              onClick={onPrimaryAction}
              className={`inline-flex items-center gap-2 rounded-full px-4 py-2 text-sm font-bold text-slate-950 shadow-lg disabled:cursor-not-allowed disabled:opacity-50 ${theme.accentButtonClass}`}
            >
              <Sparkles className="h-4 w-4" />
              {primaryActionLabel}
            </button>
          ) : null}
        </div>

        {hasHeroCopy ? (
          <div className="mt-6">
            {session.title ? (
              <div className="text-2xl font-black leading-tight sm:text-3xl">
                {session.title}
              </div>
            ) : null}
            {session.assistantSummary ? (
              <div className="mt-2 max-w-2xl text-sm leading-6 text-white/76">
                {session.assistantSummary}
              </div>
            ) : null}
          </div>
        ) : null}

        <div className={hasHeroCopy ? 'mt-4' : 'mt-6'}>
          <div className="mb-2 flex items-center justify-between gap-3">
            <span className="text-xs font-semibold tracking-[0.14em] text-white/72">
              创作进度
            </span>
            <span className="text-sm font-semibold text-white/88">
              {progress}%
            </span>
          </div>
          <div className="h-2 overflow-hidden rounded-full bg-white/12">
            <div
              className={`h-full rounded-full transition-all ${theme.accentBgClass}`}
              style={{ width: `${Math.max(6, progress)}%` }}
            />
          </div>
          <div className="mt-2 text-xs leading-5 text-white/64">
            {resolveCreationAgentProgressHint(progress, progressCopy)}
          </div>
        </div>

        {visibleQuickActions.length > 0 ? (
          <div className="mt-4 flex flex-wrap gap-2">
            {visibleQuickActions.map((action) => (
              <button
                key={action.key}
                type="button"
                disabled={isBusy}
                onClick={() => onQuickAction?.(action)}
                className="rounded-full border border-white/14 bg-white/10 px-3 py-1.5 text-xs font-semibold text-white/78 disabled:cursor-not-allowed disabled:opacity-45"
              >
                {action.label}
              </button>
            ))}
          </div>
        ) : null}
      </div>

      <CreationAgentOperationBanner operation={activeOperation} />

      <div className="min-h-0 flex-1 overflow-hidden rounded-[1.6rem] border border-[var(--platform-subpanel-border)] bg-[var(--platform-subpanel-fill)]">
        <div className="flex h-full min-h-0 flex-col">
          <div
            ref={messageListRef}
            data-testid="creation-agent-message-list"
            onScroll={handleMessageListScroll}
            className="min-h-0 flex-1 space-y-3 overflow-y-auto px-4 py-4"
          >
            {displayedMessages.length === 0 ? (
              <div className="flex h-full items-center justify-center text-sm text-[var(--platform-text-soft)]">
                暂无消息
              </div>
            ) : (
              displayedMessages.map((message, index) => (
                <CreationAgentMessageBubble
                  key={message.id || `message-${index}`}
                  message={message}
                  theme={theme}
                  isStreaming={message.id === streamingMessageId}
                  recommendedReplies={
                    message.id !== streamingMessageId &&
                    index === lastAssistantMessageIndex
                      ? session.recommendedReplies
                      : []
                  }
                  onRecommendedReply={submitRecommendedReply}
                />
              ))
            )}
          </div>

          {error ? (
            <div className="mx-4 mb-3 rounded-[1rem] border border-red-200/70 bg-red-50 px-3 py-2 text-sm text-red-600">
              {error}
            </div>
          ) : null}

          <div className="border-t border-[var(--platform-subpanel-border)] p-3">
            <div className="flex items-end gap-2 rounded-[1.25rem] bg-white/80 p-2">
              <textarea
                value={draftText}
                disabled={isBusy}
                rows={2}
                onChange={(event) => {
                  setDraftText(event.target.value);
                }}
                onKeyDown={(event) => {
                  if (event.key === 'Enter' && !event.shiftKey) {
                    event.preventDefault();
                    submit();
                  }
                }}
                placeholder={composerPlaceholder}
                className="min-h-[3rem] flex-1 resize-none bg-transparent px-2 py-2 text-sm text-[var(--platform-text-strong)] outline-none placeholder:text-[var(--platform-text-soft)]"
              />
              <button
                type="button"
                aria-label="发送"
                disabled={isBusy || !draftText.trim()}
                onClick={submit}
                className={`inline-flex h-11 w-11 items-center justify-center rounded-full text-white disabled:cursor-not-allowed disabled:opacity-40 ${theme.userBubbleClass}`}
              >
                <Send className="h-4 w-4" />
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default CreationAgentWorkspace;