import { useMemo, useState } from 'react';
import {
  Check,
  ChevronDown,
  ChevronRight,
  Lock,
  Plus,
  Trash2,
  Unlock,
} from 'lucide-react';
import { toast } from 'sonner';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { DisclosureContent } from '@/components/ui/disclosure';
import { Input } from '@/components/ui/input';
import { Select } from '@/components/ui/select';
import { Textarea } from '@/components/ui/textarea';
import { cn } from '@/lib/utils';
import { useImageWorkspaceStore } from '@/stores/image-workspace';
import type {
  DesignAsset,
  DesignFieldDecision,
  DesignSpecificationValues,
  DesignUserFieldOperation,
  DesignWorkspace,
} from '../../../shared/image-workspace';

type FieldOption = { value: string; label: string };
type ScalarFieldKind = 'text' | 'textarea' | 'select' | 'number' | 'boolean' | 'list' | 'asset';

type ScalarFieldConfig = {
  path: string;
  label: string;
  description?: string;
  placeholder?: string;
  kind?: ScalarFieldKind;
  options?: FieldOption[];
  min?: number;
  max?: number;
};

type ItemFieldConfig = {
  key: string;
  label: string;
  kind?: ScalarFieldKind;
  placeholder?: string;
  options?: FieldOption[];
  min?: number;
  max?: number;
};

type CollectionFieldConfig = {
  path: string;
  label: string;
  description: string;
  itemLabel: string;
  idPrefix: string;
  fields: ItemFieldConfig[];
  createItem: () => Record<string, unknown>;
};

type FormSection = {
  id: string;
  title: string;
  description: string;
  fields: ScalarFieldConfig[];
  collections?: CollectionFieldConfig[];
  medium?: 'image' | 'video';
};

const MEDIA_OPTIONS: FieldOption[] = [
  { value: 'image', label: '图片' },
  { value: 'video', label: '视频' },
];

const CREATION_INTENT_OPTIONS: FieldOption[] = [
  { value: 'create', label: '从零创作' },
  { value: 'edit', label: '编辑已有素材' },
  { value: 'vary', label: '生成变体' },
  { value: 'composite', label: '合成多个素材' },
  { value: 'animate', label: '把画面做成视频' },
  { value: 'extend', label: '扩展已有内容' },
];

const ORIENTATION_OPTIONS: FieldOption[] = [
  { value: 'square', label: '方形' },
  { value: 'portrait', label: '竖版' },
  { value: 'landscape', label: '横版' },
];

const IMAGE_OPERATION_OPTIONS: FieldOption[] = [
  { value: 'new_generation', label: '全新生成' },
  { value: 'source_edit', label: '基于原图编辑' },
  { value: 'regional_edit', label: '局部编辑' },
  { value: 'variation', label: '生成变体' },
  { value: 'composition', label: '素材合成' },
];

const REFERENCE_ROLE_OPTIONS: FieldOption[] = [
  { value: 'subject_identity', label: '主体身份' },
  { value: 'product_structure', label: '产品结构' },
  { value: 'style', label: '视觉风格' },
  { value: 'composition', label: '构图' },
  { value: 'palette', label: '配色' },
  { value: 'texture', label: '材质纹理' },
  { value: 'first_frame', label: '首帧' },
  { value: 'last_frame', label: '尾帧' },
  { value: 'edit_source', label: '编辑源图' },
  { value: 'mask', label: '遮罩' },
  { value: 'logo', label: '品牌标志' },
  { value: 'inspiration', label: '灵感参考' },
];

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

const SUBJECTS: CollectionFieldConfig = {
  path: 'content.subjects',
  label: '主体',
  description: '逐个说明人物、产品或物体，以及需要保持的特征和关系。',
  itemLabel: '主体',
  idPrefix: 'subject',
  fields: [
    { key: 'description', label: '主体描述', kind: 'textarea', placeholder: '例如：一只磨砂银色的便携咖啡机' },
    { key: 'attributes', label: '关键特征', kind: 'list', placeholder: '每行一个特征' },
    { key: 'action', label: '动作', placeholder: '例如：正在萃取咖啡' },
    { key: 'spatial_relationship', label: '空间关系', placeholder: '例如：位于画面中央，前景略偏右' },
  ],
  createItem: () => ({
    id: createItemId('subject'),
    description: '',
    attributes: [],
    action: null,
    spatial_relationship: null,
  }),
};

const EXACT_CONTENT: CollectionFieldConfig = {
  path: 'content.exact_content',
  label: '精确文字与标识',
  description: '记录必须按原文出现的标题、卖点、品牌名或标识。',
  itemLabel: '文字',
  idPrefix: 'copy',
  fields: [
    { key: 'text', label: '原文', kind: 'textarea', placeholder: '输入必须准确呈现的文字' },
    { key: 'role', label: '用途', placeholder: '例如：主标题、角标、品牌名' },
    { key: 'language', label: '语言', placeholder: '例如：简体中文' },
    { key: 'hierarchy', label: '层级', placeholder: '例如：一级标题' },
    { key: 'exact', label: '必须逐字准确', kind: 'boolean' },
  ],
  createItem: () => ({
    id: createItemId('copy'),
    text: '',
    role: null,
    language: null,
    hierarchy: null,
    exact: true,
  }),
};

const LAYOUT_REGIONS: CollectionFieldConfig = {
  path: 'layout.regions',
  label: '画面区域',
  description: '为主体、文字、标志等元素划分明确区域与优先级。',
  itemLabel: '区域',
  idPrefix: 'region',
  fields: [
    { key: 'role', label: '区域用途', placeholder: '例如：主视觉、标题区' },
    { key: 'placement', label: '位置与范围', kind: 'textarea', placeholder: '例如：画面左侧三分之一，保留顶部安全距离' },
    { key: 'priority', label: '优先级', kind: 'number', min: 0, max: 100 },
  ],
  createItem: () => ({ id: createItemId('region'), role: '', placement: '', priority: 0 }),
};

const REFERENCES: CollectionFieldConfig = {
  path: 'references',
  label: '参考素材',
  description: '明确每张素材承担什么角色，以及哪些内容应保留、调整或避免照搬。',
  itemLabel: '参考',
  idPrefix: 'reference',
  fields: [
    { key: 'asset_id', label: '素材', kind: 'asset' },
    { key: 'role', label: '参考角色', kind: 'select', options: REFERENCE_ROLE_OPTIONS },
    { key: 'preserve', label: '必须保留', kind: 'list', placeholder: '每行一项' },
    { key: 'adapt', label: '可以调整', kind: 'list', placeholder: '每行一项' },
    { key: 'do_not_copy', label: '不要照搬', kind: 'list', placeholder: '每行一项' },
    { key: 'reviewed_observations', label: '已确认观察', kind: 'list', placeholder: '每行一项客观观察' },
  ],
  createItem: () => ({
    id: createItemId('reference'),
    asset_id: '',
    asset_revision: null,
    role: 'inspiration',
    preserve: [],
    adapt: [],
    do_not_copy: [],
    reviewed_observations: [],
  }),
};

const VIDEO_SHOTS: CollectionFieldConfig = {
  path: 'video.shots',
  label: '分镜',
  description: '把叙事拆成镜头，明确时间、景别、运镜和主体运动。',
  itemLabel: '镜头',
  idPrefix: 'shot',
  fields: [
    { key: 'story_beat', label: '叙事节点', kind: 'textarea', placeholder: '这一镜发生什么' },
    { key: 'start_milliseconds', label: '开始时间（毫秒）', kind: 'number', min: 0, max: 120000 },
    { key: 'end_milliseconds', label: '结束时间（毫秒）', kind: 'number', min: 1, max: 120000 },
    { key: 'framing', label: '景别', placeholder: '例如：中近景、产品特写' },
    { key: 'camera', label: '运镜', placeholder: '例如：缓慢推进，保持水平' },
    { key: 'subject_motion', label: '主体运动', placeholder: '主体如何运动' },
    { key: 'environment_motion', label: '环境运动', placeholder: '背景、光影或粒子如何变化' },
    { key: 'focus_behavior', label: '焦点变化', placeholder: '例如：焦点从前景转向产品标志' },
    { key: 'transition', label: '转场', placeholder: '例如：动作匹配剪辑' },
  ],
  createItem: () => ({
    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 ACCEPTANCE_CRITERIA: CollectionFieldConfig = {
  path: 'constraints.acceptance_criteria',
  label: '验收标准',
  description: '写成可判断是否完成的条件，生成后据此检查结果。',
  itemLabel: '标准',
  idPrefix: 'criterion',
  fields: [
    { key: 'description', label: '判断条件', kind: 'textarea', placeholder: '例如：产品标志完整清晰，且不被主体遮挡' },
    { key: 'required', label: '必须满足', kind: 'boolean' },
  ],
  createItem: () => ({ id: createItemId('criterion'), description: '', required: true }),
};

const SECTIONS: FormSection[] = [
  {
    id: 'intent',
    title: '目标与用途',
    description: '先确定做什么、给谁看，以及成功的判断标准。',
    fields: [
      { path: 'intent.media', label: '输出媒介', kind: 'select', options: MEDIA_OPTIONS },
      { path: 'intent.creation_intent', label: '创作方式', kind: 'select', options: CREATION_INTENT_OPTIONS },
      { path: 'intent.purpose', label: '使用目的', placeholder: '例如：新品发布主视觉' },
      { path: 'intent.channel', label: '投放渠道', placeholder: '例如：小红书首图、官网横幅' },
      { path: 'intent.audience', label: '目标受众', kind: 'textarea', placeholder: '描述人群、场景与认知背景' },
      { path: 'intent.intended_response', label: '期望反应', kind: 'textarea', placeholder: '希望观众看后产生什么反应' },
      { path: 'intent.communication_goal', label: '沟通目标', kind: 'textarea', placeholder: '这一设计最重要的信息是什么' },
      { path: 'intent.success_definition', label: '成功定义', kind: 'textarea', placeholder: '什么样的结果才算设计成功' },
      { path: 'intent.related_asset_id', label: '关联资产', kind: 'asset' },
    ],
  },
  {
    id: 'content',
    title: '内容与叙事',
    description: '描述主体、行为、环境，以及必须准确出现的内容。',
    fields: [
      { path: 'content.concept', label: '核心概念', kind: 'textarea', placeholder: '用一两句话说明画面的核心想法' },
      { path: 'content.narrative', label: '叙事', kind: 'textarea', placeholder: '观众从画面中读到的故事或因果' },
      { path: 'content.action', label: '主要动作', kind: 'textarea', placeholder: '主体正在做什么' },
      { path: 'content.environment', label: '环境', kind: 'textarea', placeholder: '空间、时间、天气与背景元素' },
      { path: 'content.emotional_tone', label: '情绪基调', placeholder: '例如：克制、轻盈、有期待感' },
    ],
    collections: [SUBJECTS, EXACT_CONTENT],
  },
  {
    id: 'visual',
    title: '视觉语言',
    description: '把风格拆成构图、镜头、光线、色彩、材质和完成度。',
    fields: [
      { path: 'visual.art_direction', label: '艺术方向', kind: 'textarea', placeholder: '描述整体视觉语言，避免只写风格名' },
      { path: 'visual.cultural_cues', label: '文化语境', kind: 'textarea', placeholder: '需要体现或避开的文化线索' },
      { path: 'visual.composition', label: '构图', kind: 'textarea', placeholder: '主体比例、留白、视觉动线和层级' },
      { path: 'visual.viewpoint', label: '视点与镜头', placeholder: '例如：略低机位，50mm 视角' },
      { path: 'visual.lighting', label: '光线', kind: 'textarea', placeholder: '光源方向、软硬、对比和氛围' },
      { path: 'visual.palette', label: '配色', kind: 'textarea', placeholder: '主色、辅色、明度与饱和度关系' },
      { path: 'visual.materials', label: '材质', kind: 'textarea', placeholder: '主体与环境的材质表现' },
      { path: 'visual.finish', label: '成片质感', kind: 'textarea', placeholder: '例如：商业摄影级，细节克制不过锐' },
    ],
  },
  {
    id: 'layout',
    title: '版式与文字',
    description: '约束主体、文案、标志、安全区与裁切后的可用性。',
    fields: [
      { path: 'layout.subject_placement', label: '主体位置', kind: 'textarea' },
      { path: 'layout.text_placement', label: '文字位置', kind: 'textarea' },
      { path: 'layout.logo_placement', label: '标志位置', kind: 'textarea' },
      { path: 'layout.safe_areas', label: '安全区', kind: 'textarea' },
      { path: 'layout.crop_behavior', label: '裁切行为', kind: 'textarea' },
      { path: 'layout.typography', label: '字体与排版', kind: 'textarea' },
      { path: 'layout.exact_rendering', label: '精确呈现要求', kind: 'textarea' },
    ],
    collections: [LAYOUT_REGIONS],
  },
  {
    id: 'references',
    title: '参考素材',
    description: '给素材分配明确角色，避免含糊的“参考一下”。',
    fields: [],
    collections: [REFERENCES],
  },
  {
    id: 'image',
    title: '图片制作',
    description: '图片专用的编辑范围、保留项、背景与透明度要求。',
    medium: 'image',
    fields: [
      { path: 'image.operation_intent', label: '图片操作', kind: 'select', options: IMAGE_OPERATION_OPTIONS },
      { path: 'image.source_asset_id', label: '源图', kind: 'asset' },
      { path: 'image.mask_asset_id', label: '遮罩图', kind: 'asset' },
      { path: 'image.preserve_instructions', label: '必须保留', kind: 'list', placeholder: '每行一项' },
      { path: 'image.change_instructions', label: '需要改变', kind: 'list', placeholder: '每行一项' },
      { path: 'image.background_behavior', label: '背景处理', kind: 'textarea' },
      { path: 'image.transparency_required', label: '需要透明背景', kind: 'boolean' },
      { path: 'image.edge_crop_behavior', label: '边缘与裁切', kind: 'textarea' },
      { path: 'image.variant_relationship', label: '变体关系', kind: 'textarea' },
    ],
  },
  {
    id: 'video',
    title: '视频与分镜',
    description: '视频专用的时长、节奏、镜头、运动与连续性。',
    medium: 'video',
    fields: [
      { path: 'video.total_duration_seconds', label: '总时长（秒）', kind: 'number', min: 1, max: 120 },
      { path: 'video.pacing', label: '整体节奏', kind: 'textarea' },
      { path: 'video.first_frame_asset_id', label: '首帧素材', kind: 'asset' },
      { path: 'video.last_frame_asset_id', label: '尾帧素材', kind: 'asset' },
      { path: 'video.rhythm', label: '节拍与段落', kind: 'textarea' },
      { path: 'video.speed_behavior', label: '速度变化', kind: 'textarea' },
      { path: 'video.stillness', label: '静止策略', kind: 'textarea' },
      { path: 'video.loop_behavior', label: '循环方式', kind: 'textarea' },
      { path: 'video.end_state', label: '结束状态', kind: 'textarea' },
      { path: 'video.continuity', label: '连续性', kind: 'textarea' },
      { path: 'video.audio_intent', label: '声音意图', kind: 'textarea' },
    ],
    collections: [VIDEO_SHOTS],
  },
  {
    id: 'output',
    title: '交付规格',
    description: '画幅、方向、质量、格式和变体数量会进入服务端编译与报价。',
    fields: [
      { path: 'output.aspect_ratio', label: '画幅比例', placeholder: '例如：3:4、16:9、1:1' },
      { path: 'output.orientation', label: '画面方向', kind: 'select', options: ORIENTATION_OPTIONS },
      { path: 'output.quality_intent', label: '质量目标', kind: 'textarea', placeholder: '例如：适合电商主图，产品边缘清晰' },
      { path: 'output.delivery_format', label: '交付格式', placeholder: '例如：PNG、MP4' },
      { path: 'output.variant_count', label: '变体数量', kind: 'number', min: 1, max: 16 },
      { path: 'output.variant_purposes', label: '各变体用途', kind: 'list', placeholder: '每行一种用途' },
      { path: 'output.crop_requirements', label: '裁切要求', kind: 'textarea' },
      { path: 'output.export_requirements', label: '导出要求', kind: 'textarea' },
      { path: 'output.safe_areas', label: '交付安全区', kind: 'textarea' },
    ],
  },
  {
    id: 'constraints',
    title: '约束与验收',
    description: '把必须做到、必须保留、必须避免和可以妥协的部分分开。',
    fields: [
      { path: 'constraints.must_include', label: '必须包含', kind: 'list', placeholder: '每行一项' },
      { path: 'constraints.must_preserve', label: '必须保留', kind: 'list', placeholder: '每行一项' },
      { path: 'constraints.must_avoid', label: '必须避免', kind: 'list', placeholder: '每行一项' },
      { path: 'constraints.brand_constraints', label: '品牌约束', kind: 'list', placeholder: '每行一项' },
      { path: 'constraints.flexible_preferences', label: '弹性偏好', kind: 'list', placeholder: '可以调整但最好满足的偏好' },
    ],
    collections: [ACCEPTANCE_CRITERIA],
  },
];

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 hasValue(value: unknown): boolean {
  return value !== null && value !== undefined && value !== ''
    && (!Array.isArray(value) || value.length > 0);
}

function decisionLabel(decision: DesignFieldDecision | undefined): string {
  if (!decision || decision.resolution === 'open') return '待补充';
  if (decision.resolution === 'proposed') return 'Agent 建议';
  if (decision.resolution === 'delegated') return '交给 Agent';
  if (decision.resolution === 'not_applicable') return '不适用';
  return decision.provenance === 'user' || decision.provenance === 'extracted_user'
    ? '已确认'
    : '已解析';
}

function decisionVariant(
  decision: DesignFieldDecision | undefined,
): 'outline' | 'secondary' | 'warning' | 'success' {
  if (decision?.resolution === 'proposed' || decision?.resolution === 'delegated') return 'warning';
  if (decision?.resolution === 'resolved') return 'success';
  if (decision?.resolution === 'not_applicable') return 'secondary';
  return 'outline';
}

function scalarToDraft(value: unknown, kind: ScalarFieldKind): string {
  if (value === null || value === undefined) return '';
  if (kind === 'list') return Array.isArray(value) ? value.join('\n') : '';
  if (kind === 'boolean') return typeof value === 'boolean' ? String(value) : '';
  return String(value);
}

function draftToValue(value: string, field: ScalarFieldConfig | ItemFieldConfig): unknown {
  const kind = field.kind ?? 'text';
  const trimmed = value.trim();
  if (!trimmed) return null;
  if (kind === 'number') return Number(trimmed);
  if (kind === 'boolean') return trimmed === 'true';
  if (kind === 'list') return value.split('\n').map((item) => item.trim()).filter(Boolean);
  return trimmed;
}

function FieldDecisionActions({
  path,
  value,
  decision,
  disabled,
}: {
  path: string;
  value: unknown;
  decision: DesignFieldDecision | undefined;
  disabled: boolean;
}) {
  const applyFieldOperations = useImageWorkspaceStore((state) => state.applyFieldOperations);
  const run = (operations: DesignUserFieldOperation[]) => {
    void applyFieldOperations(operations).catch((error) => {
      toast.error(error instanceof Error ? error.message : '字段操作失败');
    });
  };
  return (
    <div className="flex items-center gap-1">
      {decision?.resolution === 'proposed' && hasValue(value) && (
        <button
          type="button"
          className="rounded-lg px-2 py-1 text-xs font-medium text-brand hover:bg-brand/[0.08] disabled:opacity-50"
          disabled={disabled}
          onClick={() => run([{ kind: 'set', path, value }])}
        >
          采用
        </button>
      )}
      {hasValue(value) && (
        <button
          type="button"
          className="rounded-lg p-1 text-muted-foreground hover:bg-surface-subtle hover:text-foreground disabled:opacity-50"
          aria-label={decision?.locked ? `解锁 ${path}` : `锁定 ${path}`}
          disabled={disabled}
          onClick={() => run([{ kind: 'set_lock', path, locked: !decision?.locked }])}
        >
          {decision?.locked ? <Lock className="h-3.5 w-3.5" /> : <Unlock className="h-3.5 w-3.5" />}
        </button>
      )}
    </div>
  );
}

function ScalarField({
  config,
  workspace,
  assets,
}: {
  config: ScalarFieldConfig;
  workspace: DesignWorkspace;
  assets: DesignAsset[];
}) {
  const fieldDrafts = useImageWorkspaceStore((state) => state.fieldDrafts);
  const setFieldDraft = useImageWorkspaceStore((state) => state.setFieldDraft);
  const discardFieldDraft = useImageWorkspaceStore((state) => state.discardFieldDraft);
  const applyFieldOperations = useImageWorkspaceStore((state) => state.applyFieldOperations);
  const pending = Object.values(useImageWorkspaceStore((state) => state.pendingOperations))
    .some((operation) => operation.status === 'submitting');
  const canonical = readPath(workspace.form.specification.values, config.path);
  const decision = workspace.form.specification.field_decisions[config.path];
  const dirty = Object.hasOwn(fieldDrafts, config.path);
  const kind = config.kind ?? 'text';
  const draft = dirty
    ? String(fieldDrafts[config.path] ?? '')
    : scalarToDraft(canonical, kind);
  const disabled = Boolean(decision?.locked) || pending;

  const save = () => {
    const value = draftToValue(draft, config);
    const operation: DesignUserFieldOperation = value === null
      ? { kind: 'clear', path: config.path }
      : { kind: 'set', path: config.path, value };
    void applyFieldOperations([operation], [config.path]).catch((error) => {
      toast.error(error instanceof Error ? error.message : '字段保存失败');
    });
  };

  const inputClass = cn(decision?.resolution === 'proposed' && 'border-amber-300 bg-amber-50/45');
  const input = kind === 'textarea' || kind === 'list'
    ? (
      <Textarea
        aria-label={config.label}
        value={draft}
        rows={kind === 'list' ? 4 : 3}
        placeholder={config.placeholder}
        disabled={disabled}
        className={inputClass}
        onChange={(event) => setFieldDraft(config.path, event.currentTarget.value)}
      />
    )
    : kind === 'select' || kind === 'boolean' || kind === 'asset'
      ? (
        <Select
          aria-label={config.label}
          value={draft}
          disabled={disabled}
          className={inputClass}
          onChange={(event) => setFieldDraft(config.path, event.currentTarget.value)}
        >
          <option value="">未设置</option>
          {kind === 'boolean' && (
            <>
              <option value="true">是</option>
              <option value="false">否</option>
            </>
          )}
          {kind === 'select' && config.options?.map((option) => (
            <option key={option.value} value={option.value}>{option.label}</option>
          ))}
          {kind === 'asset' && assets.map((asset) => (
            <option key={asset.assetId} value={asset.assetId}>
              {asset.role === 'uploaded' ? '上传素材' : '生成作品'} · {asset.assetId.slice(0, 8)}
            </option>
          ))}
        </Select>
      )
      : (
        <Input
          aria-label={config.label}
          type={kind === 'number' ? 'number' : 'text'}
          value={draft}
          min={config.min}
          max={config.max}
          placeholder={config.placeholder}
          disabled={disabled}
          className={inputClass}
          onChange={(event) => setFieldDraft(config.path, event.currentTarget.value)}
          onKeyDown={(event) => {
            if (event.key === 'Enter' && dirty && !disabled) save();
          }}
        />
      );

  return (
    <div className={cn('space-y-2', kind === 'textarea' || kind === 'list' ? 'md:col-span-2' : '')}>
      <div className="flex min-h-6 items-center justify-between gap-2">
        <div className="flex min-w-0 items-center gap-2">
          <label className="truncate text-sm font-medium text-foreground">{config.label}</label>
          <Badge variant={decisionVariant(decision)} className="shrink-0 px-2 py-0 text-[10px]">
            {decisionLabel(decision)}
          </Badge>
        </div>
        <FieldDecisionActions
          path={config.path}
          value={canonical}
          decision={decision}
          disabled={pending}
        />
      </div>
      {config.description && <p className="text-xs leading-5 text-muted-foreground">{config.description}</p>}
      {input}
      {dirty && (
        <div className="flex justify-end gap-2">
          <Button type="button" variant="ghost" size="sm" onClick={() => discardFieldDraft(config.path)}>
            撤销
          </Button>
          <Button type="button" size="sm" disabled={disabled} onClick={save}>
            保存
          </Button>
        </div>
      )}
    </div>
  );
}

function normalizeItemFieldValue(value: string, field: ItemFieldConfig): unknown {
  const parsed = draftToValue(value, field);
  if (parsed !== null) return parsed;
  if (field.kind === 'list') return [];
  if (field.kind === 'boolean') return false;
  if (field.kind === 'number') return null;
  return null;
}

function CollectionField({
  config,
  workspace,
  assets,
}: {
  config: CollectionFieldConfig;
  workspace: DesignWorkspace;
  assets: DesignAsset[];
}) {
  const fieldDrafts = useImageWorkspaceStore((state) => state.fieldDrafts);
  const setFieldDraft = useImageWorkspaceStore((state) => state.setFieldDraft);
  const discardFieldDraft = useImageWorkspaceStore((state) => state.discardFieldDraft);
  const applyFieldOperations = useImageWorkspaceStore((state) => state.applyFieldOperations);
  const pending = Object.values(useImageWorkspaceStore((state) => state.pendingOperations))
    .some((operation) => operation.status === 'submitting');
  const canonicalValue = readPath(workspace.form.specification.values, config.path);
  const canonicalItems = Array.isArray(canonicalValue)
    ? canonicalValue as Record<string, unknown>[]
    : [];
  const dirty = Object.hasOwn(fieldDrafts, config.path);
  const items = dirty && Array.isArray(fieldDrafts[config.path])
    ? fieldDrafts[config.path] as Record<string, unknown>[]
    : canonicalItems;
  const decision = workspace.form.specification.field_decisions[config.path];
  const disabled = Boolean(decision?.locked) || pending;

  const updateItems = (next: Record<string, unknown>[]) => setFieldDraft(config.path, next);
  const updateItem = (index: number, key: string, value: unknown) => {
    updateItems(items.map((item, itemIndex) => (
      itemIndex === index ? { ...item, [key]: value } : item
    )));
  };
  const save = () => {
    const operation: DesignUserFieldOperation = items.length === 0
      ? { kind: 'clear', path: config.path }
      : { kind: 'set', path: config.path, value: items };
    void applyFieldOperations([operation], [config.path]).catch((error) => {
      toast.error(error instanceof Error ? error.message : '列表保存失败');
    });
  };

  return (
    <div className="space-y-3 md:col-span-2">
      <div className="flex items-start justify-between gap-3">
        <div>
          <div className="flex items-center gap-2">
            <h4 className="text-sm font-medium text-foreground">{config.label}</h4>
            <Badge variant={decisionVariant(decision)} className="px-2 py-0 text-[10px]">
              {decisionLabel(decision)}
            </Badge>
          </div>
          <p className="mt-1 text-xs leading-5 text-muted-foreground">{config.description}</p>
        </div>
        <div className="flex shrink-0 items-center gap-1">
          <FieldDecisionActions
            path={config.path}
            value={canonicalItems}
            decision={decision}
            disabled={pending}
          />
          <Button
            type="button"
            variant="outline"
            size="sm"
            disabled={disabled}
            onClick={() => updateItems([...items, config.createItem()])}
          >
            <Plus className="mr-1 h-3.5 w-3.5" />
            添加{config.itemLabel}
          </Button>
        </div>
      </div>

      {items.length === 0 ? (
        <button
          type="button"
          disabled={disabled}
          className="w-full rounded-xl border border-dashed border-border px-4 py-5 text-sm text-muted-foreground transition-colors hover:border-brand/35 hover:bg-brand/[0.03] disabled:opacity-50"
          onClick={() => updateItems([config.createItem()])}
        >
          暂无{config.itemLabel}，点击添加
        </button>
      ) : (
        <div className="space-y-3">
          {items.map((item, index) => (
            <div key={String(item.id ?? `${config.idPrefix}-${index}`)} className="rounded-xl bg-surface-subtle/70 p-3">
              <div className="mb-3 flex items-center justify-between">
                <span className="text-xs font-medium text-muted-foreground">
                  {config.itemLabel} {index + 1}
                </span>
                <button
                  type="button"
                  aria-label={`删除${config.itemLabel} ${index + 1}`}
                  disabled={disabled}
                  className="rounded-lg p-1.5 text-muted-foreground hover:bg-background hover:text-destructive disabled:opacity-50"
                  onClick={() => updateItems(items.filter((_, itemIndex) => itemIndex !== index))}
                >
                  <Trash2 className="h-3.5 w-3.5" />
                </button>
              </div>
              <div className="grid gap-3 md:grid-cols-2">
                {config.fields.map((field) => {
                  const kind = field.kind ?? 'text';
                  const current = scalarToDraft(item[field.key], kind);
                  const wide = kind === 'textarea' || kind === 'list';
                  return (
                    <div key={field.key} className={cn('space-y-1.5', wide && 'md:col-span-2')}>
                      <label className="text-xs font-medium text-foreground">{field.label}</label>
                      {wide ? (
                        <Textarea
                          aria-label={`${config.itemLabel} ${index + 1} ${field.label}`}
                          value={current}
                          rows={kind === 'list' ? 3 : 2}
                          placeholder={field.placeholder}
                          disabled={disabled}
                          onChange={(event) => updateItem(
                            index,
                            field.key,
                            normalizeItemFieldValue(event.currentTarget.value, field),
                          )}
                        />
                      ) : kind === 'select' || kind === 'boolean' || kind === 'asset' ? (
                        <Select
                          aria-label={`${config.itemLabel} ${index + 1} ${field.label}`}
                          value={current}
                          disabled={disabled}
                          onChange={(event) => updateItem(
                            index,
                            field.key,
                            normalizeItemFieldValue(event.currentTarget.value, field),
                          )}
                        >
                          <option value="">未设置</option>
                          {kind === 'boolean' && (
                            <>
                              <option value="true">是</option>
                              <option value="false">否</option>
                            </>
                          )}
                          {kind === 'select' && field.options?.map((option) => (
                            <option key={option.value} value={option.value}>{option.label}</option>
                          ))}
                          {kind === 'asset' && assets.map((asset) => (
                            <option key={asset.assetId} value={asset.assetId}>
                              {asset.role === 'uploaded' ? '上传素材' : '生成作品'} · {asset.assetId.slice(0, 8)}
                            </option>
                          ))}
                        </Select>
                      ) : (
                        <Input
                          aria-label={`${config.itemLabel} ${index + 1} ${field.label}`}
                          type={kind === 'number' ? 'number' : 'text'}
                          value={current}
                          min={field.min}
                          max={field.max}
                          placeholder={field.placeholder}
                          disabled={disabled}
                          onChange={(event) => updateItem(
                            index,
                            field.key,
                            normalizeItemFieldValue(event.currentTarget.value, field),
                          )}
                        />
                      )}
                    </div>
                  );
                })}
              </div>
            </div>
          ))}
        </div>
      )}

      {dirty && (
        <div className="flex justify-end gap-2">
          <Button type="button" variant="ghost" size="sm" onClick={() => discardFieldDraft(config.path)}>
            撤销整组修改
          </Button>
          <Button type="button" size="sm" disabled={disabled} onClick={save}>
            保存{config.label}
          </Button>
        </div>
      )}
    </div>
  );
}

function countSectionDecisions(workspace: DesignWorkspace, section: FormSection): [number, number] {
  const paths = [
    ...section.fields.map((field) => field.path),
    ...(section.collections ?? []).map((field) => field.path),
  ];
  const resolved = paths.filter((path) => {
    const resolution = workspace.form.specification.field_decisions[path]?.resolution;
    return resolution === 'resolved' || resolution === 'not_applicable';
  }).length;
  return [resolved, paths.length];
}

export function DesignFormPane({ workspace }: { workspace: DesignWorkspace }) {
  const media = workspace.form.specification.values.intent.media;
  const visibleSections = useMemo(
    () => SECTIONS.filter((section) => !section.medium || !media || section.medium === media),
    [media],
  );
  const [openSections, setOpenSections] = useState<Record<string, boolean>>({
    intent: true,
    content: true,
    visual: true,
    output: true,
  });

  return (
    <div className="space-y-3 pb-8">
      {visibleSections.map((section) => {
        const open = openSections[section.id] === true;
        const [resolved, total] = countSectionDecisions(workspace, section);
        return (
          <section key={section.id} className="rounded-2xl border border-border/70 bg-background">
            <button
              type="button"
              aria-expanded={open}
              className="flex w-full items-center gap-3 rounded-2xl px-4 py-3.5 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand/30"
              onClick={() => setOpenSections((current) => ({ ...current, [section.id]: !open }))}
            >
              {open
                ? <ChevronDown className="h-4 w-4 shrink-0 text-muted-foreground" />
                : <ChevronRight className="h-4 w-4 shrink-0 text-muted-foreground" />}
              <span className="min-w-0 flex-1">
                <span className="block text-sm font-semibold text-foreground">{section.title}</span>
                <span className="mt-0.5 block text-xs leading-5 text-muted-foreground">
                  {section.description}
                </span>
              </span>
              <span className="shrink-0 text-xs tabular-nums text-muted-foreground">
                {resolved}/{total} 已确认
              </span>
            </button>
            <DisclosureContent open={open}>
              <div className="border-t border-border/60 px-4 py-4">
                <div className="grid gap-x-4 gap-y-5 md:grid-cols-2">
                  {section.fields.map((field) => (
                    <ScalarField
                      key={field.path}
                      config={field}
                      workspace={workspace}
                      assets={workspace.assets}
                    />
                  ))}
                  {section.collections?.map((field) => (
                    <CollectionField
                      key={field.path}
                      config={field}
                      workspace={workspace}
                      assets={workspace.assets}
                    />
                  ))}
                </div>
              </div>
            </DisclosureContent>
          </section>
        );
      })}
    </div>
  );
}

export function DesignFormSummary({ workspace }: { workspace: DesignWorkspace }) {
  const decisions = Object.values(workspace.form.specification.field_decisions);
  const resolved = decisions.filter(
    (decision) => decision.resolution === 'resolved' || decision.resolution === 'not_applicable',
  ).length;
  const proposals = decisions.filter((decision) => decision.resolution === 'proposed').length;
  const locks = decisions.filter((decision) => decision.locked).length;
  return (
    <div className="flex flex-wrap items-center gap-x-4 gap-y-2 text-xs text-muted-foreground">
      <span className="inline-flex items-center gap-1.5">
        <Check className="h-3.5 w-3.5 text-brand" />
        {resolved} 项已确认
      </span>
      {proposals > 0 && <span>{proposals} 项待采纳</span>}
      {locks > 0 && <span>{locks} 项已锁定</span>}
      <span>规格版本 {workspace.form.specificationRevision}</span>
    </div>
  );
}