import { ArrowLeft, CheckCircle2, Puzzle } from 'lucide-react';
import { useEffect, useMemo, useState } from 'react';

import type {
  CreativeAgentInputPart,
  CreativeAgentSessionSnapshot,
  CreativeAgentSseEvent,
} from '../../../packages/shared/src/contracts/creativeAgent';
import type {
  PuzzleCreativeTemplateProtocol,
  PuzzleCreativeTemplateSelection,
} from '../../../packages/shared/src/contracts/puzzleCreativeTemplate';
import { CreativeAgentInputComposer } from './CreativeAgentInputComposer';
import { CreativeAgentProcessPanel } from './CreativeAgentProcessPanel';
import { CreativeAgentStageTimeline } from './CreativeAgentStageTimeline';
import { CreativeAgentTemplateConfirmPanel } from './CreativeAgentTemplateConfirmPanel';
import {
  buildCreativeAgentProcessItems,
  buildPuzzleTemplateSelectionFromProtocol,
  createCreativeAgentClientMessageId,
  CREATIVE_AGENT_STAGE_LABEL,
} from './creativeAgentViewModel';

type CreativeAgentWorkspaceProps = {
  session: CreativeAgentSessionSnapshot | null;
  isBusy: boolean;
  isStreaming: boolean;
  error: string | null;
  eventLog: CreativeAgentSseEvent[];
  onBack: () => void;
  onSubmitMessage: (payload: {
    clientMessageId: string;
    content: CreativeAgentInputPart[];
  }) => void;
  onConfirmTemplate: (selection: PuzzleCreativeTemplateSelection) => void;
  onCancelTemplate?: () => void;
  onOpenTarget: () => void;
};

type CreativeAgentTemplateCatalogPanelProps = {
  templates: PuzzleCreativeTemplateProtocol[];
  isBusy: boolean;
  onSelect: (template: PuzzleCreativeTemplateProtocol) => void;
};

function CreativeAgentTemplateCatalogPanel({
  templates,
  isBusy,
  onSelect,
}: CreativeAgentTemplateCatalogPanelProps) {
  if (templates.length === 0) {
    return null;
  }

  return (
    <section className="platform-subpanel rounded-[1.35rem] p-4">
      <div className="grid gap-3 sm:grid-cols-3">
        {templates.map((template) => (
          <button
            key={template.templateId}
            type="button"
            disabled={isBusy}
            onClick={() => onSelect(template)}
            className="group min-h-[10.5rem] rounded-[1.15rem] border border-[var(--platform-subpanel-border)] bg-white/68 p-3 text-left transition hover:-translate-y-0.5 hover:bg-white/88 disabled:opacity-55"
          >
            <div className="overflow-hidden rounded-[0.95rem] border border-white/70 bg-[radial-gradient(circle_at_28%_20%,rgba(255,255,255,0.92),transparent_32%),linear-gradient(135deg,rgba(255,194,123,0.86),rgba(255,93,132,0.82)_52%,rgba(92,186,255,0.78))]">
              <div className="flex aspect-[16/9] items-center justify-center">
                {template.previewImageSrc ? (
                  <img
                    src={template.previewImageSrc}
                    alt={template.title}
                    className="h-full w-full object-cover"
                  />
                ) : (
                  <span className="inline-flex h-10 w-10 items-center justify-center rounded-full bg-white/84 text-[var(--platform-text-strong)] shadow-sm">
                    <Puzzle className="h-4 w-4" />
                  </span>
                )}
              </div>
            </div>
            <div className="mt-3 text-sm font-black text-[var(--platform-text-strong)]">
              {template.title}
            </div>
            <div className="mt-1 line-clamp-2 text-xs leading-5 text-[var(--platform-text-base)]">
              {template.summary}
            </div>
            <div className="mt-3 text-xs font-bold text-[var(--platform-text-soft)]">
              {`${template.defaultLevelCount} 关 · ${template.costRange.minPoints}-${template.costRange.maxPoints} 泥点`}
            </div>
          </button>
        ))}
      </div>
    </section>
  );
}

export function CreativeAgentWorkspace({
  session,
  isBusy,
  isStreaming,
  error,
  eventLog,
  onBack,
  onSubmitMessage,
  onConfirmTemplate,
  onCancelTemplate,
  onOpenTarget,
}: CreativeAgentWorkspaceProps) {
  const stage = session?.stage ?? 'idle';
  const messages = session?.messages ?? [];
  const selection = session?.puzzleTemplateSelection ?? null;
  const templateCatalog = session?.puzzleTemplateCatalog ?? [];
  const targetBinding = session?.targetBinding ?? null;
  const [pendingSelection, setPendingSelection] =
    useState<PuzzleCreativeTemplateSelection | null>(null);
  useEffect(() => {
    // 中文注释：会话切换时清掉本地待确认模板，避免上一轮选择残留到新会话。
    setPendingSelection(null);
  }, [session?.sessionId]);
  const processItems = useMemo(
    () => buildCreativeAgentProcessItems(eventLog, session),
    [eventLog, session],
  );
  const visibleSelection = targetBinding ? null : (selection ?? pendingSelection);
  const shouldShowTemplateCatalog =
    !targetBinding &&
    !selection &&
    templateCatalog.length > 0 &&
    stage === 'waiting_template_confirmation';

  return (
    <div className="platform-remap-surface mx-auto flex h-full min-h-0 w-full flex-col xl:max-w-[min(100%,88rem)] xl:px-1">
      <div className="mb-3 flex items-center justify-between gap-3">
        <button
          type="button"
          onClick={onBack}
          disabled={isBusy}
          className={`platform-button platform-button--ghost min-h-0 px-3 py-1.5 text-[11px] ${isBusy ? 'opacity-45' : ''}`}
        >
          <span className="inline-flex items-center gap-1.5">
            <ArrowLeft className="h-3.5 w-3.5" />
            返回
          </span>
        </button>
        <div className="platform-pill platform-pill--cool px-3 text-[11px]">
          {CREATIVE_AGENT_STAGE_LABEL[stage]}
        </div>
      </div>

      <div className="min-h-0 flex-1 overflow-y-auto pr-1">
        <div className="space-y-4 pb-4">
          <section className="platform-surface platform-surface--hero relative overflow-hidden rounded-[1.6rem] px-4 py-5 sm:px-5">
            <div className="absolute inset-0 bg-[var(--platform-hero-overlay-strong)]" />
            <div className="relative z-10 flex items-end justify-between gap-4">
              <div className="min-w-0">
                <div className="text-2xl font-black leading-tight text-white sm:text-3xl">
                  智能创作
                </div>
                <div className="mt-2 max-w-xl text-sm font-semibold leading-6 text-zinc-100/86">
                  当前生成拼图草稿
                </div>
              </div>
              <span className="hidden h-12 w-12 shrink-0 items-center justify-center rounded-full bg-white/18 text-white sm:inline-flex">
                <Puzzle className="h-5 w-5" />
              </span>
            </div>
          </section>

          <CreativeAgentStageTimeline stage={stage} />

          {targetBinding ? (
            <section className="platform-subpanel flex flex-col gap-3 rounded-[1.35rem] p-4 sm:flex-row sm:items-center sm:justify-between">
              <div className="flex items-center gap-3">
                <span className="inline-flex h-10 w-10 items-center justify-center rounded-full bg-[var(--platform-success-bg)] text-[var(--platform-success-text)]">
                  <CheckCircle2 className="h-5 w-5" />
                </span>
                <div>
                  <div className="text-base font-black text-[var(--platform-text-strong)]">
                    拼图草稿已就绪
                  </div>
                  <div className="mt-1 text-sm text-[var(--platform-text-base)]">
                    {targetBinding.targetStage === 'puzzle-result'
                      ? '可以进入结果页继续编辑'
                      : '可以进入拼图工作区继续处理'}
                  </div>
                </div>
              </div>
              <button
                type="button"
                disabled={isBusy}
                onClick={onOpenTarget}
                className="platform-button platform-button--primary"
              >
                打开草稿
              </button>
            </section>
          ) : null}

          {messages.length > 0 ? (
            <div className="space-y-2">
              {messages.map((message) => (
                <div
                  key={message.id}
                  className={`max-w-[86%] rounded-[1.15rem] px-4 py-3 text-sm leading-6 ${
                    message.role === 'user'
                      ? 'ml-auto bg-[var(--platform-button-primary-solid)] text-[var(--platform-button-primary-text)]'
                      : 'platform-subpanel text-[var(--platform-text-base)]'
                  }`}
                >
                  {message.text}
                </div>
              ))}
            </div>
          ) : (
            <div className="platform-subpanel rounded-[1.35rem] p-4 text-sm font-semibold text-[var(--platform-text-base)]">
              发一句想法，或加一张参考图。
            </div>
          )}

          <CreativeAgentProcessPanel
            items={processItems}
            isStreaming={isStreaming}
          />

          {shouldShowTemplateCatalog ? (
            <CreativeAgentTemplateCatalogPanel
              templates={templateCatalog}
              isBusy={isBusy || isStreaming}
              onSelect={(template) => {
                setPendingSelection(
                  buildPuzzleTemplateSelectionFromProtocol(template),
                );
              }}
            />
          ) : null}

          {session?.puzzleImageGenerationPlan ? (
            <div className="platform-subpanel rounded-[1.35rem] p-4">
              <div className="text-xs font-bold tracking-[0.18em] text-[var(--platform-text-soft)]">
                关卡计划
              </div>
              <div className="mt-3 grid gap-2 sm:grid-cols-2">
                {session.puzzleImageGenerationPlan.levels.map((level) => (
                  <div
                    key={level.levelId}
                    className="rounded-[1rem] border border-[var(--platform-subpanel-border)] bg-white/58 px-3 py-3"
                  >
                    <div className="text-sm font-black text-[var(--platform-text-strong)]">
                      {level.levelName}
                    </div>
                    <div className="mt-1 line-clamp-2 text-xs leading-5 text-[var(--platform-text-base)]">
                      {level.pictureDescription}
                    </div>
                  </div>
                ))}
              </div>
            </div>
          ) : null}

          {error ? (
            <div className="platform-banner platform-banner--danger rounded-[1.25rem] text-sm leading-6">
              {error}
            </div>
          ) : null}
        </div>
      </div>

      <div className="pb-[max(0.25rem,env(safe-area-inset-bottom))]">
        <CreativeAgentInputComposer
          isBusy={isBusy || isStreaming}
          onSubmit={({ text, image }) => {
            const content: CreativeAgentInputPart[] = [];
            if (text) {
              content.push({
                type: 'input_text',
                text,
              });
            }
            if (image) {
              content.push({
                type: 'input_image',
                imageUrl: image.imageUrl,
                thumbnailUrl: image.thumbnailUrl,
                assetId: null,
              });
            }
            onSubmitMessage({
              clientMessageId: createCreativeAgentClientMessageId(),
              content,
            });
          }}
        />
      </div>

      {visibleSelection && visibleSelection.requiresUserConfirmation ? (
        <CreativeAgentTemplateConfirmPanel
          selection={visibleSelection}
          isBusy={isBusy || isStreaming}
          onConfirm={(nextSelection) => {
            setPendingSelection(null);
            onConfirmTemplate(nextSelection);
          }}
          onCancel={() => {
            setPendingSelection(null);
            onCancelTemplate?.();
          }}
        />
      ) : null}
    </div>
  );
}

export default CreativeAgentWorkspace;