import { useEffect, useId, useMemo, useState, type ReactNode } from 'react';
import {
  Check,
  ChevronRight,
  ImageIcon,
  Loader2,
  Palette,
  Plus,
  SlidersHorizontal,
  Trash2,
  Type,
  Video,
  X,
} from 'lucide-react';
import { toast } from 'sonner';
import { Button } from '@/components/ui/button';
import { Select } from '@/components/ui/select';
import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
} from '@/components/ui/sheet';
import { Textarea } from '@/components/ui/textarea';
import { cn } from '@/lib/utils';
import { useImageWorkspaceStore } from '@/stores/image-workspace';
import type {
  DesignAsset,
  DesignCompilationIssue,
  DesignSpecificationValues,
  DesignUserFieldOperation,
  DesignWorkspace,
} from '../../../shared/image-workspace';
import { YOUTH_DESTINATIONS } from './youth-form-projection';
import { youthCompilationIssueMessage } from './youth-issue-copy';

type FineTuneDrawerProps = {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  workspace: DesignWorkspace;
  quoteBlockers: DesignCompilationIssue[];
};

type Choice = {
  value: string;
  label: string;
  description?: string;
};

const STYLE_CHOICES: Choice[] = [
  { value: '有趣的卡通', label: '有趣的卡通', description: '夸张、轻松、颜色明快' },
  { value: '手绘故事书', label: '手绘故事书', description: '温暖、有笔触、像绘本' },
  { value: '像电影一样', label: '像电影一样', description: '有故事感和戏剧氛围' },
  { value: '梦幻奇想', label: '梦幻奇想', description: '大胆想象、神奇光影' },
  { value: '清爽简洁', label: '清爽简洁', description: '重点清楚、留白舒服' },
  { value: '像真的一样', label: '像真的一样', description: '自然、细节真实' },
];

const VIDEO_PACING: Choice[] = [
  { value: '慢慢展开', label: '慢慢展开' },
  { value: '自然流畅', label: '自然流畅' },
  { value: '很有活力', label: '很有活力' },
];

function useDesktopSheet(): boolean {
  const [desktop, setDesktop] = useState(false);
  useEffect(() => {
    if (typeof window.matchMedia !== 'function') return;
    const query = window.matchMedia('(min-width: 1024px)');
    const update = () => setDesktop(query.matches);
    update();
    query.addEventListener?.('change', update);
    return () => query.removeEventListener?.('change', update);
  }, []);
  return desktop;
}

function readPath(values: DesignSpecificationValues, path: string): unknown {
  let current: unknown = values;
  for (const segment of path.split('.')) {
    if (!current || typeof current !== 'object' || Array.isArray(current)) return null;
    current = (current as Record<string, unknown>)[segment];
  }
  return current;
}

function createItemId(prefix: string): string {
  const random = globalThis.crypto?.randomUUID?.()
    ?? `${Date.now()}-${Math.random().toString(16).slice(2)}`;
  return `${prefix}-${random}`.slice(0, 64);
}

function pendingMutation(): boolean {
  return Object.values(useImageWorkspaceStore.getState().pendingOperations)
    .some((operation) => operation.status === 'submitting');
}

function runOperations(
  operations: DesignUserFieldOperation[],
  clearDraftPaths: string[] = [],
): void {
  void useImageWorkspaceStore.getState().applyFieldOperations(operations, clearDraftPaths)
    .catch(() => {
      toast.error('修改没有保存，请再试一次');
    });
}

function Section({
  icon,
  title,
  description,
  children,
}: {
  icon: ReactNode;
  title: string;
  description: string;
  children: ReactNode;
}) {
  return (
    <section className="rounded-2xl border border-border/70 bg-background p-4 sm:p-5">
      <div className="flex items-start gap-3">
        <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-brand/[0.08] text-brand">
          {icon}
        </div>
        <div>
          <h3 className="text-sm font-semibold text-foreground">{title}</h3>
          <p className="mt-1 text-xs leading-5 text-muted-foreground">{description}</p>
        </div>
      </div>
      <div className="mt-4 space-y-5">{children}</div>
    </section>
  );
}

function ChoiceGrid({
  label,
  value,
  choices,
  disabled,
  onChoose,
  columns = 2,
}: {
  label: string;
  value: string | null;
  choices: readonly Choice[];
  disabled: boolean;
  onChoose: (value: string) => void;
  columns?: 2 | 3;
}) {
  return (
    <fieldset>
      <legend className="mb-2 text-sm font-medium text-foreground">{label}</legend>
      <div className={cn('grid gap-2', columns === 3 ? 'sm:grid-cols-3' : 'grid-cols-2')}>
        {choices.map((choice) => {
          const selected = value === choice.value;
          return (
            <button
              key={choice.value}
              type="button"
              aria-pressed={selected}
              disabled={disabled}
              className={cn(
                'min-h-11 rounded-xl border px-3 py-2.5 text-left transition-colors duration-150',
                'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand/35 focus-visible:ring-offset-2',
                selected
                  ? 'border-brand/45 bg-brand/[0.08] text-foreground'
                  : 'border-border/70 bg-background text-foreground hover:border-brand/30 hover:bg-brand/[0.03]',
              )}
              onClick={() => onChoose(choice.value)}
            >
              <span className="flex items-center justify-between gap-2 text-sm font-medium">
                {choice.label}
                {selected && <Check className="h-4 w-4 shrink-0 text-brand" />}
              </span>
              {choice.description && (
                <span className="mt-1 block text-[11px] leading-4 text-muted-foreground">
                  {choice.description}
                </span>
              )}
            </button>
          );
        })}
      </div>
    </fieldset>
  );
}

function TextField({
  workspace,
  path,
  label,
  placeholder,
  rows = 3,
  list = false,
}: {
  workspace: DesignWorkspace;
  path: string;
  label: string;
  placeholder: string;
  rows?: number;
  list?: boolean;
}) {
  const fieldDrafts = useImageWorkspaceStore((state) => state.fieldDrafts);
  const setFieldDraft = useImageWorkspaceStore((state) => state.setFieldDraft);
  const discardFieldDraft = useImageWorkspaceStore((state) => state.discardFieldDraft);
  const pendingOperations = useImageWorkspaceStore((state) => state.pendingOperations);
  const canonical = readPath(workspace.form.specification.values, path);
  const dirty = Object.hasOwn(fieldDrafts, path);
  const draft = dirty
    ? String(fieldDrafts[path] ?? '')
    : list && Array.isArray(canonical)
      ? canonical.join('\n')
      : typeof canonical === 'string'
        ? canonical
        : '';
  const locked = workspace.form.specification.field_decisions[path]?.locked === true;
  const submitting = Object.values(pendingOperations)
    .some((operation) => operation.status === 'submitting');

  const save = () => {
    const trimmed = draft.trim();
    const value = list
      ? draft.split('\n').map((item) => item.trim()).filter(Boolean)
      : trimmed;
    const operation: DesignUserFieldOperation = value.length === 0
      ? { kind: 'clear', path }
      : { kind: 'set', path, value };
    runOperations([operation], [path]);
  };

  return (
    <div className="space-y-2">
      <label className="text-sm font-medium text-foreground" htmlFor={`fine-${path}`}>
        {label}
      </label>
      <Textarea
        id={`fine-${path}`}
        value={draft}
        rows={rows}
        placeholder={placeholder}
        disabled={locked || submitting}
        onChange={(event) => setFieldDraft(path, event.currentTarget.value)}
      />
      {dirty && (
        <div className="flex justify-end gap-2">
          <Button
            type="button"
            variant="ghost"
            className="min-h-11 rounded-xl"
            onClick={() => discardFieldDraft(path)}
          >
            撤销
          </Button>
          <Button
            type="button"
            className="min-h-11 rounded-xl"
            disabled={locked || submitting}
            onClick={save}
          >
            保存
          </Button>
        </div>
      )}
    </div>
  );
}

function ExactTextEditor({ workspace }: { workspace: DesignWorkspace }) {
  const path = 'content.exact_content';
  const fieldDrafts = useImageWorkspaceStore((state) => state.fieldDrafts);
  const setFieldDraft = useImageWorkspaceStore((state) => state.setFieldDraft);
  const discardFieldDraft = useImageWorkspaceStore((state) => state.discardFieldDraft);
  const canonical = workspace.form.specification.values.content.exact_content;
  const dirty = Object.hasOwn(fieldDrafts, path);
  const draft = dirty
    ? String(fieldDrafts[path] ?? '')
    : canonical.map((item) => item.text).filter(Boolean).join('\n');
  const locked = workspace.form.specification.field_decisions[path]?.locked === true;

  const save = () => {
    const lines = draft.split('\n').map((line) => line.trim()).filter(Boolean);
    const value = lines.map((text, index) => ({
      ...(canonical[index] ?? {}),
      id: canonical[index]?.id ?? createItemId('copy'),
      text,
      role: canonical[index]?.role ?? (index === 0 ? '画面文字' : null),
      language: canonical[index]?.language ?? '简体中文',
      hierarchy: canonical[index]?.hierarchy ?? null,
      exact: true,
    }));
    runOperations(
      value.length > 0 ? [{ kind: 'set', path, value }] : [{ kind: 'clear', path }],
      [path],
    );
  };

  return (
    <div className="space-y-2">
      <label className="text-sm font-medium text-foreground" htmlFor="fine-exact-text">
        画面上要写什么？
      </label>
      <Textarea
        id="fine-exact-text"
        value={draft}
        rows={3}
        placeholder={'每行一句需要准确出现的文字\n例如：周五科学社开放日'}
        disabled={locked || pendingMutation()}
        onChange={(event) => setFieldDraft(path, event.currentTarget.value)}
      />
      <p className="text-[11px] leading-4 text-muted-foreground">这些文字会按原文保留。</p>
      {dirty && (
        <div className="flex justify-end gap-2">
          <Button type="button" variant="ghost" className="min-h-11" onClick={() => discardFieldDraft(path)}>
            撤销
          </Button>
          <Button type="button" className="min-h-11" disabled={locked || pendingMutation()} onClick={save}>
            保存文字
          </Button>
        </div>
      )}
    </div>
  );
}

function AssetSelect({
  label,
  value,
  assets,
  disabled,
  onChange,
}: {
  label: string;
  value: string | null;
  assets: DesignAsset[];
  disabled: boolean;
  onChange: (assetId: string | null) => void;
}) {
  const selectId = useId();
  return (
    <div className="space-y-2">
      <label htmlFor={selectId} className="text-sm font-medium text-foreground">{label}</label>
      <Select
        id={selectId}
        value={value ?? ''}
        disabled={disabled}
        className="min-h-11"
        onChange={(event) => onChange(event.currentTarget.value || null)}
      >
        <option value="">不使用图片</option>
        {assets.filter((asset) => asset.mediaType === 'image').map((asset) => (
          <option key={asset.assetId} value={asset.assetId}>
            {asset.role === 'uploaded' ? '我上传的图片' : '完成的作品'} · {asset.width}×{asset.height}
          </option>
        ))}
      </Select>
    </div>
  );
}

function ReferenceEditor({ workspace }: { workspace: DesignWorkspace }) {
  const path = 'references';
  const fieldDrafts = useImageWorkspaceStore((state) => state.fieldDrafts);
  const setFieldDraft = useImageWorkspaceStore((state) => state.setFieldDraft);
  const discardFieldDraft = useImageWorkspaceStore((state) => state.discardFieldDraft);
  const canonical = workspace.form.specification.values.references;
  const dirty = Object.hasOwn(fieldDrafts, path);
  const references = dirty && Array.isArray(fieldDrafts[path])
    ? fieldDrafts[path] as typeof canonical
    : canonical;
  const available = workspace.assets.filter((asset) => (
    asset.mediaType === 'image'
    && !references.some((reference) => reference.asset_id === asset.assetId)
  ));
  const locked = workspace.form.specification.field_decisions[path]?.locked === true;

  const change = (index: number, key: 'preserve' | 'adapt' | 'do_not_copy', raw: string) => {
    const value = raw.split('\n').map((item) => item.trim()).filter(Boolean);
    setFieldDraft(path, references.map((reference, itemIndex) => (
      itemIndex === index ? { ...reference, [key]: value } : reference
    )));
  };
  const add = (assetId: string) => {
    if (!assetId) return;
    setFieldDraft(path, [...references, {
      id: createItemId('reference'),
      asset_id: assetId,
      asset_revision: null,
      role: 'inspiration',
      preserve: [],
      adapt: [],
      do_not_copy: [],
      reviewed_observations: [],
    }]);
  };
  const save = () => runOperations(
    references.length > 0 ? [{ kind: 'set', path, value: references }] : [{ kind: 'clear', path }],
    [path],
  );

  return (
    <div className="space-y-3">
      {references.map((reference, index) => {
        const asset = workspace.assets.find((item) => item.assetId === reference.asset_id);
        return (
          <article key={reference.id} className="rounded-xl bg-surface-subtle/70 p-3">
            <div className="flex items-center justify-between gap-3">
              <div className="flex min-w-0 items-center gap-2">
                <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-background text-brand">
                  <ImageIcon className="h-4 w-4" />
                </div>
                <div className="min-w-0">
                  <p className="truncate text-sm font-medium text-foreground">参考图 {index + 1}</p>
                  <p className="text-[11px] text-muted-foreground">
                    {asset ? `${asset.width}×${asset.height}` : '图片正在同步'}
                  </p>
                </div>
              </div>
              <button
                type="button"
                aria-label={`移除参考图 ${index + 1}`}
                disabled={locked || pendingMutation()}
                className="flex h-11 w-11 items-center justify-center rounded-xl text-muted-foreground hover:bg-background hover:text-destructive focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand/35 disabled:opacity-50"
                onClick={() => setFieldDraft(path, references.filter((_, itemIndex) => itemIndex !== index))}
              >
                <Trash2 className="h-4 w-4" />
              </button>
            </div>
            <div className="mt-3 grid gap-3">
              <Textarea
                aria-label={`参考图 ${index + 1} 最想保留什么`}
                value={reference.preserve.join('\n')}
                rows={2}
                placeholder="最想保留什么？例如：圆脸和红围巾"
                disabled={locked || pendingMutation()}
                onChange={(event) => change(index, 'preserve', event.currentTarget.value)}
              />
              <div className="grid gap-3 sm:grid-cols-2">
                <Textarea
                  aria-label={`参考图 ${index + 1} 哪里可以改变`}
                  value={reference.adapt.join('\n')}
                  rows={2}
                  placeholder="哪里可以改变？"
                  disabled={locked || pendingMutation()}
                  onChange={(event) => change(index, 'adapt', event.currentTarget.value)}
                />
                <Textarea
                  aria-label={`参考图 ${index + 1} 哪些地方不要照着画`}
                  value={reference.do_not_copy.join('\n')}
                  rows={2}
                  placeholder="哪些地方不要照着画？"
                  disabled={locked || pendingMutation()}
                  onChange={(event) => change(index, 'do_not_copy', event.currentTarget.value)}
                />
              </div>
            </div>
          </article>
        );
      })}

      {available.length > 0 && (
        <div className="flex gap-2">
          <Select
            aria-label="添加参考图"
            className="min-h-11 flex-1"
            value=""
            disabled={locked || pendingMutation()}
            onChange={(event) => add(event.currentTarget.value)}
          >
            <option value="">选择一张图片作为参考</option>
            {available.map((asset) => (
              <option key={asset.assetId} value={asset.assetId}>
                {asset.role === 'uploaded' ? '我上传的图片' : '完成的作品'} · {asset.width}×{asset.height}
              </option>
            ))}
          </Select>
        </div>
      )}

      {workspace.assets.length === 0 && references.length === 0 && (
        <p className="rounded-xl border border-dashed border-border px-3 py-4 text-xs leading-5 text-muted-foreground">
          先在作品区上传一张图片，再告诉 AI 最想保留和想改变的地方。
        </p>
      )}

      {dirty && (
        <div className="flex justify-end gap-2">
          <Button type="button" variant="ghost" className="min-h-11" onClick={() => discardFieldDraft(path)}>
            撤销
          </Button>
          <Button type="button" className="min-h-11" disabled={locked || pendingMutation()} onClick={save}>
            保存参考图
          </Button>
        </div>
      )}
    </div>
  );
}

function StoryboardEditor({ workspace }: { workspace: DesignWorkspace }) {
  const path = 'video.shots';
  const fieldDrafts = useImageWorkspaceStore((state) => state.fieldDrafts);
  const setFieldDraft = useImageWorkspaceStore((state) => state.setFieldDraft);
  const discardFieldDraft = useImageWorkspaceStore((state) => state.discardFieldDraft);
  const canonical = workspace.form.specification.values.video.shots;
  const dirty = Object.hasOwn(fieldDrafts, path);
  const storedDraft = fieldDrafts[path];
  const draft = dirty && Array.isArray(storedDraft)
    ? storedDraft as DesignSpecificationValues['video']['shots']
    : canonical;
  const locked = workspace.form.specification.field_decisions[path]?.locked === true;

  const updateBeat = (index: number, storyBeat: string) => {
    setFieldDraft(path, draft.map((shot, shotIndex) => (
      shotIndex === index ? { ...shot, story_beat: storyBeat } : shot
    )));
  };

  const addShot = () => {
    if (draft.length >= 24) return;
    setFieldDraft(path, [...draft, {
      id: createItemId('shot'),
      start_milliseconds: null,
      end_milliseconds: null,
      story_beat: '',
      framing: null,
      camera: null,
      subject_motion: null,
      environment_motion: null,
      focus_behavior: null,
      transition: null,
    }]);
  };

  const removeShot = (index: number) => {
    setFieldDraft(path, draft.filter((_, shotIndex) => shotIndex !== index));
  };

  const save = () => {
    const shots = draft
      .map((shot) => ({ ...shot, story_beat: shot.story_beat?.trim() || null }))
      .filter((shot) => Boolean(shot.story_beat));
    runOperations(
      shots.length > 0 ? [{ kind: 'set', path, value: shots }] : [{ kind: 'clear', path }],
      [path],
    );
  };

  return (
    <div className="space-y-2">
      <p className="text-sm font-medium text-foreground">
        开始、接着、最后发生什么？
      </p>
      <div className="space-y-2">
        {draft.map((shot, index) => (
          <div key={shot.id} className="flex items-start gap-2 rounded-xl border border-border/70 bg-background p-2.5">
            <div className="min-w-0 flex-1">
              <label htmlFor={`fine-storyboard-${shot.id}`} className="text-xs font-medium text-muted-foreground">
                画面 {index + 1}
              </label>
              <Textarea
                id={`fine-storyboard-${shot.id}`}
                value={shot.story_beat ?? ''}
                rows={2}
                className="mt-1"
                placeholder={index === 0 ? '例如：机器人找到面粉' : '接下来发生什么？'}
                disabled={locked || pendingMutation()}
                onChange={(event) => updateBeat(index, event.currentTarget.value)}
              />
            </div>
            <button
              type="button"
              aria-label={`删除画面 ${index + 1}`}
              className="mt-5 flex h-11 w-11 shrink-0 items-center justify-center rounded-xl text-muted-foreground hover:bg-destructive/[0.08] hover:text-destructive focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand/35"
              disabled={locked || pendingMutation()}
              onClick={() => removeShot(index)}
            >
              <Trash2 className="h-4 w-4" aria-hidden="true" />
            </button>
          </div>
        ))}
      </div>
      <p className="text-xs leading-5 text-muted-foreground">
        清空文字后保存，会删除这个画面。
      </p>
      <Button
        type="button"
        variant="outline"
        className="min-h-11 w-full rounded-xl"
        disabled={locked || pendingMutation() || draft.length >= 24}
        onClick={addShot}
      >
        <Plus className="mr-2 h-4 w-4" aria-hidden="true" />
        {draft.length >= 24 ? '最多 24 个画面' : '添加一个画面'}
      </Button>
      {dirty && (
        <div className="flex justify-end gap-2">
          <Button type="button" variant="ghost" className="min-h-11" onClick={() => discardFieldDraft(path)}>
            撤销
          </Button>
          <Button type="button" className="min-h-11" disabled={locked || pendingMutation()} onClick={save}>
            保存故事
          </Button>
        </div>
      )}
    </div>
  );
}

export function FineTuneDrawer({
  open,
  onOpenChange,
  workspace,
  quoteBlockers,
}: FineTuneDrawerProps) {
  const desktop = useDesktopSheet();
  const pendingOperations = useImageWorkspaceStore((state) => state.pendingOperations);
  const submitting = Object.values(pendingOperations)
    .some((operation) => operation.status === 'submitting');
  const values = workspace.form.specification.values;
  const media = values.intent.media;
  const imageAssets = useMemo(
    () => workspace.assets.filter((asset) => asset.mediaType === 'image'),
    [workspace.assets],
  );
  const blockers = quoteBlockers.filter((issue) => issue.severity === 'blocker');
  const imageEditRelevant = media === 'image' && Boolean(
    values.image.source_asset_id
    || ['edit', 'vary', 'composite', 'extend'].includes(values.intent.creation_intent ?? '')
    || values.image.preserve_instructions.length > 0
    || values.image.change_instructions.length > 0
    || values.image.background_behavior
    || typeof values.image.transparency_required === 'boolean',
  );
  const exactTextRelevant = media === 'image' || values.content.exact_content.length > 0;

  const fieldLocked = (path: string) => (
    workspace.form.specification.field_decisions[path]?.locked === true
  );

  return (
    <Sheet open={open} onOpenChange={onOpenChange}>
      <SheetContent
        side={desktop ? 'right' : 'bottom'}
        className={cn(
          'flex flex-col overflow-hidden p-0',
          desktop
            ? 'h-full w-[min(520px,100vw)] sm:max-w-[520px]'
            : 'max-h-[88vh] rounded-t-3xl',
        )}
      >
        <SheetHeader className="shrink-0 border-b border-border/70 px-5 py-4 text-left">
          <div className="flex items-start justify-between gap-4">
            <div>
              <SheetTitle className="flex items-center gap-2">
                <SlidersHorizontal className="h-5 w-5 text-brand" />
                精细调整
              </SheetTitle>
              <SheetDescription className="mt-1 leading-5">
                只调整这次作品真正用得到的内容，其他细节交给 AI。
              </SheetDescription>
            </div>
            <SheetClose asChild>
              <button
                type="button"
                aria-label="关闭精细调整"
                className="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl text-muted-foreground hover:bg-surface-subtle hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand/35"
              >
                <X className="h-4 w-4" />
              </button>
            </SheetClose>
          </div>
        </SheetHeader>

        <div className="min-h-0 flex-1 overflow-y-auto bg-surface-subtle/35 px-4 py-4 sm:px-5">
          <div className="space-y-4 pb-[max(1rem,env(safe-area-inset-bottom))]">
            {blockers.length > 0 && (
              <section className="rounded-2xl border border-amber-200 bg-amber-50/70 p-4">
                <h3 className="text-sm font-semibold text-amber-950">开始前还需要</h3>
                <ul className="mt-2 space-y-1 text-xs leading-5 text-amber-900">
                  {blockers.map((blocker) => (
                    <li key={`${blocker.code}-${blocker.path ?? ''}`}>
                      {youthCompilationIssueMessage(blocker)}
                    </li>
                  ))}
                </ul>
              </section>
            )}

            <Section
              icon={<Palette className="h-4 w-4" />}
              title="作品的样子"
              description="选择作品类型、使用位置和大致感觉。"
            >
              <ChoiceGrid
                label="想做图片还是视频？"
                value={media}
                choices={[
                  { value: 'image', label: '图片' },
                  { value: 'video', label: '视频' },
                ]}
                disabled={submitting || fieldLocked('intent.media')}
                onChoose={(value) => runOperations([{
                  kind: 'set',
                  path: 'intent.media',
                  value,
                }])}
              />
              <ChoiceGrid
                label="准备用在哪里？"
                value={values.output.aspect_ratio}
                choices={YOUTH_DESTINATIONS.map((destination) => ({
                  value: destination.aspectRatio,
                  label: destination.label,
                }))}
                disabled={submitting
                  || fieldLocked('output.aspect_ratio')
                  || fieldLocked('output.orientation')}
                onChoose={(aspectRatio) => {
                  const destination = YOUTH_DESTINATIONS.find((item) => item.aspectRatio === aspectRatio);
                  if (!destination) return;
                  runOperations([
                    { kind: 'set', path: 'output.aspect_ratio', value: destination.aspectRatio },
                    { kind: 'set', path: 'output.orientation', value: destination.orientation },
                  ]);
                }}
              />
              <ChoiceGrid
                label="想要什么感觉？"
                value={values.visual.art_direction}
                choices={STYLE_CHOICES}
                columns={3}
                disabled={submitting || fieldLocked('visual.art_direction')}
                onChoose={(value) => runOperations([
                  { kind: 'set', path: 'visual.art_direction', value },
                ])}
              />
            </Section>

            {exactTextRelevant && (
              <Section
                icon={<Type className="h-4 w-4" />}
                title="画面上的文字"
                description="只有必须准确出现的文字才需要填写。"
              >
                <ExactTextEditor workspace={workspace} />
              </Section>
            )}

            {(imageAssets.length > 0 || values.references.length > 0) && (
              <Section
                icon={<ImageIcon className="h-4 w-4" />}
                title="参考图片"
                description="说清楚最想保留、可以改变和不要照搬的地方。"
              >
                <ReferenceEditor workspace={workspace} />
                {media === 'image' && (
                  <AssetSelect
                    label="从哪张图开始修改？"
                    value={values.image.source_asset_id}
                    assets={imageAssets}
                    disabled={submitting || fieldLocked('image.source_asset_id')}
                    onChange={(assetId) => runOperations([
                      assetId
                        ? { kind: 'set', path: 'image.source_asset_id', value: assetId }
                        : { kind: 'clear', path: 'image.source_asset_id' },
                    ])}
                  />
                )}
                {media === 'video' && (
                  <AssetSelect
                    label="视频从哪张图开始？"
                    value={values.video.first_frame_asset_id}
                    assets={imageAssets}
                    disabled={submitting || fieldLocked('video.first_frame_asset_id')}
                    onChange={(assetId) => runOperations([
                      assetId
                        ? { kind: 'set', path: 'video.first_frame_asset_id', value: assetId }
                        : { kind: 'clear', path: 'video.first_frame_asset_id' },
                    ])}
                  />
                )}
              </Section>
            )}

            {imageEditRelevant && (
              <Section
                icon={<ImageIcon className="h-4 w-4" />}
                title="图片调整"
                description="需要改原图或处理背景时，再补充这些内容。"
              >
                <TextField
                  workspace={workspace}
                  path="image.preserve_instructions"
                  label="这些地方别变"
                  placeholder="每行一项"
                  list
                />
                <TextField
                  workspace={workspace}
                  path="image.change_instructions"
                  label="想改哪里？"
                  placeholder="每行一项"
                  list
                />
                <TextField
                  workspace={workspace}
                  path="image.background_behavior"
                  label="背景怎么办？"
                  placeholder="例如：换成夜晚的月球基地"
                  rows={2}
                />
                <ChoiceGrid
                  label="需要透明背景吗？"
                  value={values.image.transparency_required === null
                    ? null
                    : String(values.image.transparency_required)}
                  choices={[
                    { value: 'false', label: '保留背景' },
                    { value: 'true', label: '透明背景' },
                  ]}
                  disabled={submitting || fieldLocked('image.transparency_required')}
                  onChoose={(value) => runOperations([{
                    kind: 'set',
                    path: 'image.transparency_required',
                    value: value === 'true',
                  }])}
                />
              </Section>
            )}

            {media === 'video' && (
              <Section
                icon={<Video className="h-4 w-4" />}
                title="视频故事"
                description="只决定时长、快慢和故事顺序，镜头细节交给 AI。"
              >
                <ChoiceGrid
                  label="视频大约多长？"
                  value={values.video.total_duration_seconds === null
                    ? null
                    : String(values.video.total_duration_seconds)}
                  choices={[
                    { value: '5', label: '5 秒' },
                    { value: '10', label: '10 秒' },
                    { value: '15', label: '15 秒' },
                  ]}
                  columns={3}
                  disabled={submitting || fieldLocked('video.total_duration_seconds')}
                  onChoose={(value) => runOperations([{
                    kind: 'set',
                    path: 'video.total_duration_seconds',
                    value: Number(value),
                  }])}
                />
                <ChoiceGrid
                  label="故事怎么展开？"
                  value={values.video.pacing}
                  choices={VIDEO_PACING}
                  columns={3}
                  disabled={submitting || fieldLocked('video.pacing')}
                  onChoose={(value) => runOperations([{
                    kind: 'set',
                    path: 'video.pacing',
                    value,
                  }])}
                />
                <StoryboardEditor workspace={workspace} />
                <TextField
                  workspace={workspace}
                  path="video.end_state"
                  label="最后看到什么？"
                  placeholder="例如：机器人端出一盘星星饼干"
                  rows={2}
                />
              </Section>
            )}

            <details className="group rounded-2xl border border-border/70 bg-background">
              <summary className="flex min-h-11 cursor-pointer list-none items-center gap-3 rounded-2xl px-4 py-3 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand/35">
                <span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-brand/[0.08] text-brand">
                  <SlidersHorizontal className="h-4 w-4" />
                </span>
                <span className="min-w-0 flex-1">
                  <span className="block text-sm font-semibold text-foreground">其他小调整</span>
                  <span className="mt-1 block text-xs leading-5 text-muted-foreground">
                    颜色、画面位置和作品数量。
                  </span>
                </span>
                <ChevronRight className="h-4 w-4 text-muted-foreground transition-transform group-open:rotate-90" />
              </summary>
              <div className="space-y-5 border-t border-border/60 px-4 py-4">
                <TextField
                  workspace={workspace}
                  path="visual.palette"
                  label="喜欢哪些颜色？"
                  placeholder="例如：蓝紫色和一点亮黄色；也可以留空让 AI 搭配"
                  rows={2}
                />
                <TextField
                  workspace={workspace}
                  path="visual.composition"
                  label="画面怎么摆？"
                  placeholder="例如：主角放中间，上方留一点空"
                  rows={2}
                />
                <div className="space-y-2">
                  <label htmlFor="fine-variant-count" className="text-sm font-medium text-foreground">
                    做几个版本？
                  </label>
                  <Select
                    id="fine-variant-count"
                    className="min-h-11"
                    value={String(values.output.variant_count ?? 1)}
                    disabled={submitting || fieldLocked('output.variant_count')}
                    onChange={(event) => runOperations([{
                      kind: 'set',
                      path: 'output.variant_count',
                      value: Number(event.currentTarget.value),
                    }])}
                  >
                    {[1, 2, 3, 4].map((count) => (
                      <option key={count} value={count}>{count} 个版本</option>
                    ))}
                  </Select>
                </div>
              </div>
            </details>

            <SheetClose asChild>
              <Button type="button" variant="outline" className="min-h-11 w-full rounded-xl">
                完成调整
                <ChevronRight className="ml-2 h-4 w-4" />
              </Button>
            </SheetClose>

            {submitting && (
              <div className="flex items-center justify-center gap-2 text-xs text-muted-foreground" role="status">
                <Loader2 className="h-3.5 w-3.5 animate-spin" />
                正在保存你的选择
              </div>
            )}
          </div>
        </div>
      </SheetContent>
    </Sheet>
  );
}