import { ArrowLeft, ImagePlus, Loader2, Sparkles, X } from 'lucide-react';
import { type ChangeEvent, useEffect, useMemo, useRef, useState } from 'react';

import type { PuzzleAgentActionRequest } from '../../../packages/shared/src/contracts/puzzleAgentActions';
import type {
  CreatePuzzleAgentSessionRequest,
  PuzzleAgentSessionSnapshot,
  SendPuzzleAgentMessageRequest,
} from '../../../packages/shared/src/contracts/puzzleAgentSession';
import { readPuzzleReferenceImageAsDataUrl } from '../../services/puzzleReferenceImage';
import {
  normalizePuzzleImageModel,
  PUZZLE_IMAGE_MODEL_GPT_IMAGE_2,
  type PuzzleImageModelId,
} from './puzzleImageModelOptions';
import { PuzzleImageModelPicker } from './PuzzleImageModelPicker';

type PuzzleAgentWorkspaceProps = {
  session: PuzzleAgentSessionSnapshot | null;
  isBusy?: boolean;
  error?: string | null;
  onBack: () => void;
  onSubmitMessage: (payload: SendPuzzleAgentMessageRequest) => void;
  onExecuteAction: (payload: PuzzleAgentActionRequest) => void;
  onCreateFromForm?: (payload: CreatePuzzleAgentSessionRequest) => void;
  onAutoSaveForm?: (payload: CreatePuzzleAgentSessionRequest) => void;
  initialFormPayload?: CreatePuzzleAgentSessionRequest | null;
};

type PuzzleFormState = {
  workTitle: string;
  workDescription: string;
  pictureDescription: string;
  referenceImageSrc: string;
  referenceImageLabel: string;
  imageModel: PuzzleImageModelId;
};

const EMPTY_FORM_STATE: PuzzleFormState = {
  workTitle: '',
  workDescription: '',
  pictureDescription: '',
  referenceImageSrc: '',
  referenceImageLabel: '',
  imageModel: PUZZLE_IMAGE_MODEL_GPT_IMAGE_2,
};

function resolveInitialFormState(
  session: PuzzleAgentSessionSnapshot | null,
  initialFormPayload: CreatePuzzleAgentSessionRequest | null = null,
): PuzzleFormState {
  const formDraft = session?.draft?.formDraft;
  if (formDraft) {
    return {
      workTitle: formDraft.workTitle ?? '',
      workDescription: formDraft.workDescription ?? '',
      pictureDescription: formDraft.pictureDescription ?? '',
      referenceImageSrc: initialFormPayload?.referenceImageSrc ?? '',
      referenceImageLabel: initialFormPayload?.referenceImageSrc
        ? '已选择参考图'
        : '',
      imageModel: normalizePuzzleImageModel(initialFormPayload?.imageModel),
    };
  }

  if (initialFormPayload) {
    return {
      workTitle:
        initialFormPayload.workTitle ?? initialFormPayload.seedText ?? '',
      workDescription: initialFormPayload.workDescription ?? '',
      pictureDescription: initialFormPayload.pictureDescription ?? '',
      referenceImageSrc: initialFormPayload.referenceImageSrc ?? '',
      referenceImageLabel: initialFormPayload.referenceImageSrc
        ? '已选择参考图'
        : '',
      imageModel: normalizePuzzleImageModel(initialFormPayload.imageModel),
    };
  }

  if (!session) {
    return EMPTY_FORM_STATE;
  }

  return {
    workTitle:
      session.draft?.workTitle ||
      session.draft?.levelName ||
      session.seedText ||
      session.anchorPack.themePromise.value ||
      session.messages.find((message) => message.role === 'user')?.text ||
      '',
    workDescription:
      session.draft?.workDescription ||
      session.anchorPack.themePromise.value ||
      '',
    pictureDescription:
      session.draft?.summary || session.anchorPack.visualSubject.value || '',
    referenceImageSrc: '',
    referenceImageLabel: '',
    imageModel: PUZZLE_IMAGE_MODEL_GPT_IMAGE_2,
  };
}

/**
 * 拼图创作入口已从 Agent 对话改为填表式。
 * 组件名保留为 PuzzleAgentWorkspace 以兼容现有路由与草稿恢复入口。
 */
export function PuzzleAgentWorkspace({
  session,
  isBusy = false,
  error = null,
  onBack,
  onExecuteAction,
  onCreateFromForm,
  onAutoSaveForm,
  initialFormPayload = null,
}: PuzzleAgentWorkspaceProps) {
  const [formState, setFormState] = useState<PuzzleFormState>(() =>
    resolveInitialFormState(session, initialFormPayload),
  );
  const [referenceImageError, setReferenceImageError] = useState<string | null>(
    null,
  );
  const previousSessionIdRef = useRef<string | null>(
    session?.sessionId ?? null,
  );
  const appliedInitialFormKeyRef = useRef<string | null>(null);

  useEffect(() => {
    const currentSessionId = session?.sessionId ?? null;
    if (
      currentSessionId &&
      previousSessionIdRef.current === null &&
      appliedInitialFormKeyRef.current ===
        JSON.stringify(initialFormPayload ?? null)
    ) {
      previousSessionIdRef.current = currentSessionId;
      return;
    }

    previousSessionIdRef.current = currentSessionId;
    const nextInitialFormKey =
      currentSessionId ?? JSON.stringify(initialFormPayload ?? null);
    if (appliedInitialFormKeyRef.current === nextInitialFormKey) {
      return;
    }

    appliedInitialFormKeyRef.current = nextInitialFormKey;
    setFormState(resolveInitialFormState(session, initialFormPayload));
    setReferenceImageError(null);
  }, [initialFormPayload, session?.sessionId]);

  const workTitle = formState.workTitle.trim();
  const workDescription = formState.workDescription.trim();
  const pictureDescription = formState.pictureDescription.trim();
  const canSubmit =
    Boolean(workTitle && workDescription && pictureDescription) && !isBusy;
  const autosavePayload = useMemo(
    () => ({
      seedText: workTitle,
      workTitle,
      workDescription,
      pictureDescription,
      referenceImageSrc: formState.referenceImageSrc || null,
      imageModel: formState.imageModel,
    }),
    [
      formState.referenceImageSrc,
      formState.imageModel,
      pictureDescription,
      workDescription,
      workTitle,
    ],
  );
  const autosaveSignature = JSON.stringify([
    autosavePayload.workTitle,
    autosavePayload.workDescription,
    autosavePayload.pictureDescription,
    autosavePayload.imageModel,
  ]);
  const lastAutosaveSignatureRef = useRef(autosaveSignature);
  const autosaveSessionIdRef = useRef(session?.sessionId ?? null);

  useEffect(() => {
    const currentSessionId = session?.sessionId ?? null;
    if (autosaveSessionIdRef.current === currentSessionId) {
      return;
    }

    autosaveSessionIdRef.current = currentSessionId;
    lastAutosaveSignatureRef.current = autosaveSignature;
  }, [autosaveSignature, session?.sessionId]);

  useEffect(() => {
    if (
      !session ||
      session.stage !== 'collecting_anchors' ||
      !session.draft?.formDraft ||
      !onAutoSaveForm ||
      lastAutosaveSignatureRef.current === autosaveSignature
    ) {
      return;
    }

    const timer = window.setTimeout(() => {
      lastAutosaveSignatureRef.current = autosaveSignature;
      onAutoSaveForm(autosavePayload);
    }, 700);

    return () => window.clearTimeout(timer);
  }, [
    autosavePayload,
    autosaveSignature,
    onAutoSaveForm,
    session?.draft?.formDraft,
    session?.stage,
    session?.sessionId,
  ]);

  const handleReferenceImageChange = async (
    event: ChangeEvent<HTMLInputElement>,
  ) => {
    const file = event.target.files?.[0];
    event.currentTarget.value = '';
    if (!file) {
      return;
    }

    try {
      const dataUrl = await readPuzzleReferenceImageAsDataUrl(file);
      setFormState((current) => ({
        ...current,
        referenceImageSrc: dataUrl,
        referenceImageLabel: file.name.trim() || '本地参考图',
      }));
      setReferenceImageError(null);
    } catch (uploadError) {
      setReferenceImageError(
        uploadError instanceof Error
          ? uploadError.message
          : '参考图读取失败，请重试。',
      );
    }
  };

  const submitForm = () => {
    if (!canSubmit) {
      return;
    }

    const payload = {
      seedText: workTitle,
      workTitle,
      workDescription,
      pictureDescription,
      referenceImageSrc: formState.referenceImageSrc || null,
      imageModel: formState.imageModel,
    };

    if (!session && onCreateFromForm) {
      onCreateFromForm(payload);
      return;
    }

    onExecuteAction({
      action: 'compile_puzzle_draft',
      promptText: pictureDescription,
      workTitle,
      workDescription,
      pictureDescription,
      referenceImageSrc: formState.referenceImageSrc || null,
      imageModel: formState.imageModel,
      candidateCount: 1,
    });
  };

  return (
    <div className="platform-remap-surface mx-auto flex h-full min-h-0 w-full max-w-4xl flex-col">
      <div className="mb-4 flex items-center justify-between gap-3">
        <button
          type="button"
          onClick={onBack}
          disabled={isBusy}
          className={`platform-button platform-button--ghost min-h-0 self-start 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>

      <div className="min-h-0 flex-1 overflow-y-auto pr-1">
        <section className="platform-subpanel rounded-[1.5rem] p-4 sm:p-5">
          <div className="space-y-5">
            <label className="block">
              <span className="text-xs font-bold tracking-[0.18em] text-[var(--platform-text-soft)]">
                作品名称
              </span>
              <input
                value={formState.workTitle}
                disabled={isBusy}
                onChange={(event) =>
                  setFormState((current) => ({
                    ...current,
                    workTitle: event.target.value,
                  }))
                }
                className="mt-2 w-full rounded-[1rem] border border-[var(--platform-subpanel-border)] bg-white/90 px-4 py-3 text-base font-semibold text-[var(--platform-text-strong)] outline-none"
                aria-label="作品名称"
              />
            </label>

            <label className="block">
              <span className="text-xs font-bold tracking-[0.18em] text-[var(--platform-text-soft)]">
                作品描述
              </span>
              <textarea
                value={formState.workDescription}
                disabled={isBusy}
                rows={4}
                onChange={(event) =>
                  setFormState((current) => ({
                    ...current,
                    workDescription: event.target.value,
                  }))
                }
                className="mt-2 w-full resize-none rounded-[1rem] border border-[var(--platform-subpanel-border)] bg-white/90 px-4 py-3 text-sm leading-6 text-[var(--platform-text-strong)] outline-none"
                aria-label="作品描述"
              />
            </label>

            <label className="block">
              <span className="text-xs font-bold tracking-[0.18em] text-[var(--platform-text-soft)]">
                画面描述
              </span>
              <div className="relative mt-2">
                <textarea
                  value={formState.pictureDescription}
                  disabled={isBusy}
                  rows={10}
                  onChange={(event) =>
                    setFormState((current) => ({
                      ...current,
                      pictureDescription: event.target.value,
                    }))
                  }
                  className="w-full resize-none rounded-[1rem] border border-[var(--platform-subpanel-border)] bg-white/90 px-4 py-3 pb-16 text-sm leading-6 text-[var(--platform-text-strong)] outline-none"
                  aria-label="画面描述"
                />
                <PuzzleImageModelPicker
                  value={formState.imageModel}
                  disabled={isBusy}
                  onChange={(imageModel) =>
                    setFormState((current) => ({
                      ...current,
                      imageModel,
                    }))
                  }
                />
                <label
                  className={`absolute bottom-3 right-3 inline-flex h-10 w-10 cursor-pointer items-center justify-center rounded-full border border-amber-300/70 bg-white/96 text-amber-700 shadow-sm transition hover:bg-amber-50 ${isBusy ? 'cursor-not-allowed opacity-55' : ''}`}
                  title={
                    formState.referenceImageSrc ? '更换参考图' : '添加参考图'
                  }
                >
                  <ImagePlus className="h-4 w-4" />
                  <span className="sr-only">
                    {formState.referenceImageSrc ? '更换参考图' : '添加参考图'}
                  </span>
                  <input
                    type="file"
                    accept="image/png,image/jpeg,image/webp"
                    disabled={isBusy}
                    onChange={(event) => {
                      void handleReferenceImageChange(event);
                    }}
                    className="hidden"
                  />
                </label>
              </div>
            </label>

            {formState.referenceImageSrc ? (
              <div className="flex items-center gap-3 rounded-[1rem] border border-[var(--platform-subpanel-border)] bg-white/72 px-3 py-3">
                <div className="h-14 w-14 overflow-hidden rounded-[0.9rem] bg-[var(--platform-subpanel-fill)]">
                  <img
                    src={formState.referenceImageSrc}
                    alt="拼图参考图"
                    className="h-full w-full object-cover"
                  />
                </div>
                <div className="min-w-0 flex-1">
                  <div className="truncate text-sm font-semibold text-[var(--platform-text-strong)]">
                    {formState.referenceImageLabel || '已选择参考图'}
                  </div>
                </div>
                <button
                  type="button"
                  disabled={isBusy}
                  onClick={() => {
                    setFormState((current) => ({
                      ...current,
                      referenceImageSrc: '',
                      referenceImageLabel: '',
                    }));
                    setReferenceImageError(null);
                  }}
                  className="platform-icon-button h-9 w-9"
                  aria-label="移除参考图"
                  title="移除参考图"
                >
                  <X className="h-4 w-4" />
                </button>
              </div>
            ) : null}

            {referenceImageError ? (
              <div className="platform-banner platform-banner--danger rounded-2xl text-sm leading-6">
                {referenceImageError}
              </div>
            ) : null}
            {error ? (
              <div className="platform-banner platform-banner--danger rounded-2xl text-sm leading-6">
                {error}
              </div>
            ) : null}
          </div>
        </section>
      </div>

      <div className="mt-4 flex justify-end pb-[max(0.25rem,env(safe-area-inset-bottom))]">
        <button
          type="button"
          disabled={!canSubmit}
          onClick={submitForm}
          className={`platform-button platform-button--primary ${!canSubmit ? 'cursor-not-allowed opacity-55' : ''}`}
        >
          <span className="inline-flex items-center gap-2">
            {isBusy ? <Loader2 className="h-4 w-4 animate-spin" /> : null}
            <Sparkles className="h-4 w-4" />
            <span>生成草稿</span>
            <span className="rounded-full bg-white/24 px-2 py-0.5 text-[11px] font-bold">
              消耗2光点
            </span>
          </span>
        </button>
      </div>
    </div>
  );
}

export default PuzzleAgentWorkspace;