import { useEffect, useRef, type CSSProperties, type ReactNode } from 'react';
import type { GatewayTask, PlatformModel } from '@easyai-ai-gateway/contracts';
import {
  Download,
  Edit3,
  Image as ImageIcon,
  Images,
  Link2,
  LoaderCircle,
  Sparkles,
  Square,
} from 'lucide-react';
import { resolveApiAssetUrl } from '../api';
import { Button, Input, Popover, PopoverContent, PopoverTrigger } from '../components/ui';
import type { PlaygroundMode } from '../types';

export type MediaOutputMode = 'single' | 'group';
export type MediaCountPreset = 1 | 2 | 3 | 4 | 'custom';
export type MediaResolution = string;

const mediaGridGap = 2;
const mediaPreviewMaxHeight = 600;

export interface MediaGenerationSettings {
  aspectRatio: string;
  countPreset: MediaCountPreset;
  customCount: number;
  height: number;
  outputMode: MediaOutputMode;
  resolution: MediaResolution;
  width: number;
}

export interface MediaGenerationRun {
  createdAt: string;
  error?: string;
  localId: string;
  mode: Exclude<PlaygroundMode, 'chat'>;
  modelLabel: string;
  prompt: string;
  settings: MediaGenerationSettings;
  status: GatewayTask['status'] | 'submitting';
  task?: GatewayTask;
}

interface AspectRatioOption {
  label: string;
  value: string;
  visual: 'smart' | 'wide' | 'landscape' | 'square' | 'portrait' | 'tall';
}

interface ResolutionOption {
  label: string;
  modes: Array<Exclude<PlaygroundMode, 'chat'>>;
  value: MediaResolution;
}

export interface MediaModelCapabilities {
  aspectRatios: string[];
  maxCount: number;
  resolutions: MediaResolution[];
  supportsGroup: boolean;
}

const aspectRatioOptions: AspectRatioOption[] = [
  { value: 'auto', label: '智能', visual: 'smart' },
  { value: '8:1', label: '8:1', visual: 'wide' },
  { value: '4:1', label: '4:1', visual: 'wide' },
  { value: '21:9', label: '21:9', visual: 'wide' },
  { value: '16:9', label: '16:9', visual: 'wide' },
  { value: '3:2', label: '3:2', visual: 'landscape' },
  { value: '5:4', label: '5:4', visual: 'landscape' },
  { value: '4:3', label: '4:3', visual: 'landscape' },
  { value: '1:1', label: '1:1', visual: 'square' },
  { value: '4:5', label: '4:5', visual: 'portrait' },
  { value: '3:4', label: '3:4', visual: 'portrait' },
  { value: '2:3', label: '2:3', visual: 'portrait' },
  { value: '9:16', label: '9:16', visual: 'tall' },
  { value: '1:4', label: '1:4', visual: 'tall' },
  { value: '1:8', label: '1:8', visual: 'tall' },
];

const resolutionOptions: ResolutionOption[] = [
  { value: '1K', label: '标准 1K', modes: ['image'] },
  { value: '2K', label: '高清 2K', modes: ['image'] },
  { value: '4K', label: '超清 4K', modes: ['image', 'video'] },
  { value: '480p', label: '标清 480p', modes: ['video'] },
  { value: '720p', label: '高清 720p', modes: ['video'] },
  { value: '1080p', label: '全高清 1080p', modes: ['video'] },
  { value: '2160p', label: '超清 2160p', modes: ['video'] },
];

const countPresetOptions: Array<{ label: string; value: MediaCountPreset }> = [
  { value: 1, label: '1' },
  { value: 2, label: '2' },
  { value: 3, label: '3' },
  { value: 4, label: '4' },
  { value: 'custom', label: '自定义' },
];

export function defaultMediaGenerationSettings(): MediaGenerationSettings {
  return {
    aspectRatio: '1:1',
    countPreset: 1,
    customCount: 6,
    height: 2048,
    outputMode: 'single',
    resolution: '2K',
    width: 2048,
  };
}

export function mediaOutputCount(settings: MediaGenerationSettings) {
  if (settings.outputMode === 'single') return 1;
  const raw = settings.countPreset === 'custom' ? settings.customCount : settings.countPreset;
  return clampNumber(raw, 1, 20);
}

export function mediaRequestPayload(settings: MediaGenerationSettings) {
  const count = mediaOutputCount(settings);
  const size = `${settings.width}x${settings.height}`;
  const highQuality = settings.resolution === '4K' || settings.resolution === '2160p';
  return {
    aspect_ratio: settings.aspectRatio === 'auto' ? undefined : settings.aspectRatio,
    count,
    height: settings.height,
    n: count,
    quality: highQuality ? 'high' : 'medium',
    resolution: settings.resolution,
    size,
    width: settings.width,
  };
}

export function deriveMediaModelCapabilities(
  models: PlatformModel[] | PlatformModel | undefined,
  mode: Exclude<PlaygroundMode, 'chat'>,
  contextKey?: string,
): MediaModelCapabilities {
  const modelList = (Array.isArray(models) ? models : models ? [models] : []).filter(Boolean);
  if (!modelList.length) return defaultMediaModelCapabilities(mode);
  const derived = modelList.map((model) => deriveSingleMediaModelCapabilities(model, mode, contextKey));
  return {
    aspectRatios: intersectOptionValues(derived.map((item) => item.aspectRatios), aspectRatioOptions.map((item) => item.value)),
    maxCount: Math.max(1, Math.min(...derived.map((item) => item.maxCount))),
    resolutions: intersectOptionValues(derived.map((item) => item.resolutions), resolutionOptionsForMode(mode).map((item) => item.value)),
    supportsGroup: derived.every((item) => item.supportsGroup),
  };
}

export function normalizeMediaSettingsForCapabilities(
  settings: MediaGenerationSettings,
  capabilities: MediaModelCapabilities,
  mode: Exclude<PlaygroundMode, 'chat'>,
) {
  const aspectOptions = filterAspectRatioOptions(capabilities);
  const resolutionItems = filterResolutionOptions(capabilities, mode);
  const maxCount = Math.max(1, Math.min(capabilities.maxCount, 20));
  const supportsGroup = capabilities.supportsGroup && maxCount > 1;
  const next: MediaGenerationSettings = {
    ...settings,
    aspectRatio: aspectOptions.some((item) => item.value === settings.aspectRatio) ? settings.aspectRatio : aspectOptions[0]?.value ?? 'auto',
    resolution: resolutionItems.some((item) => item.value === settings.resolution) ? settings.resolution : resolutionItems[0]?.value ?? settings.resolution,
  };

  if (!supportsGroup) {
    next.countPreset = 1;
    next.customCount = 1;
    next.outputMode = 'single';
  } else if (next.outputMode === 'group') {
    if (next.countPreset === 'custom') {
      next.customCount = clampNumber(next.customCount, 2, maxCount);
    } else if (next.countPreset > maxCount) {
      next.countPreset = maxCount <= 4 ? (maxCount as MediaCountPreset) : 'custom';
      next.customCount = maxCount;
    } else if (next.countPreset === 1) {
      next.outputMode = 'single';
    }
  } else {
    next.countPreset = 1;
  }

  return mediaSettingsEqual(settings, next) ? settings : next;
}

export function MediaSettingsPopover(props: {
  capabilities?: MediaModelCapabilities;
  mode: Exclude<PlaygroundMode, 'chat'>;
  settings: MediaGenerationSettings;
  onChange: (settings: MediaGenerationSettings) => void;
}) {
  const capabilities = props.capabilities ?? defaultMediaModelCapabilities(props.mode);
  const aspectOptions = filterAspectRatioOptions(capabilities);
  const resolutionItems = resolutionOptionsForMode(props.mode);
  const enabledResolutions = new Set(filterResolutionOptions(capabilities, props.mode).map((item) => item.value));
  const maxCount = Math.max(1, Math.min(capabilities.maxCount, 20));
  const supportsGroup = capabilities.supportsGroup && maxCount > 1;
  const countOptions = countPresetOptions.filter((item) => item.value === 'custom' ? maxCount > 4 : item.value <= Math.min(4, maxCount));
  const count = mediaOutputCount(props.settings);
  const unit = props.mode === 'video' ? '条' : '张';

  function patch(next: Partial<MediaGenerationSettings>) {
    props.onChange(normalizeMediaSettingsForCapabilities({ ...props.settings, ...next }, capabilities, props.mode));
  }

  function selectCountPreset(value: MediaCountPreset) {
    if (value !== 1 && !supportsGroup) return;
    patch({
      countPreset: value,
      outputMode: value === 1 ? 'single' : 'group',
    });
  }

  return (
    <Popover>
      <PopoverTrigger asChild>
        <button type="button" className="mediaSettingsTrigger">
          <Square size={15} />
          <span>{mediaSettingsSummary(props.settings, props.mode)}</span>
        </button>
      </PopoverTrigger>
      <PopoverContent align="start" className="mediaSettingsPanel" side="top" sideOffset={10}>
        <section className="mediaSettingsSection">
          <span className="mediaSettingsLabel">选择比例</span>
          <div className="mediaAspectGrid">
            {aspectOptions.map((item) => (
              <button
                type="button"
                key={item.value}
                data-active={props.settings.aspectRatio === item.value}
                onClick={() => patch({ aspectRatio: item.value })}
              >
                <span className="mediaAspectIcon" data-visual={item.visual}>
                  {item.visual === 'smart' && <Sparkles size={16} />}
                </span>
                <strong>{item.label}</strong>
              </button>
            ))}
          </div>
        </section>

        <section className="mediaSettingsSection">
          <span className="mediaSettingsLabel">选择分辨率</span>
          <div className="mediaResolutionSegment">
            {resolutionItems.map((item) => (
              <button
                type="button"
                key={item.value}
                data-active={props.settings.resolution === item.value}
                disabled={!enabledResolutions.has(item.value)}
                onClick={() => enabledResolutions.has(item.value) && patch({ resolution: item.value })}
              >
                {item.label}
                {item.value === '4K' && <Sparkles size={15} />}
              </button>
            ))}
          </div>
        </section>

        <section className="mediaSettingsSection">
          <span className="mediaSettingsLabel">尺寸</span>
          <div className="mediaSizeRow">
            <label>
              <span>W</span>
              <Input
                inputMode="numeric"
                min={128}
                size="sm"
                type="number"
                value={props.settings.width}
                onChange={(event) => patch({ width: clampNumber(Number(event.target.value), 128, 8192) })}
              />
            </label>
            <Link2 size={18} />
            <label>
              <span>H</span>
              <Input
                inputMode="numeric"
                min={128}
                size="sm"
                type="number"
                value={props.settings.height}
                onChange={(event) => patch({ height: clampNumber(Number(event.target.value), 128, 8192) })}
              />
            </label>
            <strong>PX</strong>
          </div>
        </section>

        <section className="mediaSettingsSection">
          <span className="mediaSettingsLabel">生成数量</span>
          <div className="mediaOutputModeSegment">
            <button type="button" data-active={props.settings.outputMode === 'single'} onClick={() => patch({ countPreset: 1, outputMode: 'single' })}>
              <ImageIcon size={15} />
              单图
            </button>
            <button type="button" disabled={!supportsGroup} data-active={props.settings.outputMode === 'group'} onClick={() => patch({ countPreset: 2, outputMode: 'group' })}>
              <Images size={15} />
              {supportsGroup ? '组图' : '不支持组图'}
            </button>
          </div>
          {supportsGroup ? (
            <>
              <div className="mediaCountGrid">
                {countOptions.map((item) => (
                  <button
                    type="button"
                    key={String(item.value)}
                    data-active={props.settings.countPreset === item.value}
                    onClick={() => selectCountPreset(item.value)}
                  >
                    {item.value === 'custom' ? item.label : `${item.label}${unit}`}
                  </button>
                ))}
              </div>
              {props.settings.countPreset === 'custom' && props.settings.outputMode === 'group' && (
                <label className="mediaCustomCount">
                  <span>自定义数量</span>
                  <Input
                    inputMode="numeric"
                    min={2}
                    max={maxCount}
                    size="sm"
                    type="number"
                    value={props.settings.customCount}
                    onChange={(event) => patch({ customCount: clampNumber(Number(event.target.value), 2, maxCount) })}
                  />
                </label>
              )}
            </>
          ) : (
            <p className="mediaUnsupportedNote">当前模型不支持组图输出。</p>
          )}
          <p className="mediaSettingsHint">
            <Sparkles size={14} />
            {count} / {unit}
          </p>
        </section>
      </PopoverContent>
    </Popover>
  );
}

export function MediaTaskBoard(props: {
  composer: ReactNode;
  message?: string;
  onEditRun?: (run: MediaGenerationRun) => void;
  onRerun?: (run: MediaGenerationRun) => void;
  runs: MediaGenerationRun[];
}) {
  const timelineRef = useRef<HTMLElement>(null);

  useEffect(() => {
    const timeline = timelineRef.current;
    if (!timeline) return;
    timeline.scrollTo({ behavior: 'smooth', top: timeline.scrollHeight });
  }, [props.runs.length]);

  return (
    <div className="mediaTaskPage">
      <section ref={timelineRef} className="mediaTaskTimeline" aria-label="生成任务列表">
        <h1>今天</h1>
        {props.message && <p className="playgroundError">{props.message}</p>}
        {props.runs.map((run) => (
          <MediaTaskCard
            key={run.localId}
            run={run}
            onEditRun={props.onEditRun}
            onRerun={props.onRerun}
          />
        ))}
      </section>
      <div className="mediaComposerDock">
        {props.composer}
      </div>
    </div>
  );
}

function MediaTaskCard(props: {
  run: MediaGenerationRun;
  onEditRun?: (run: MediaGenerationRun) => void;
  onRerun?: (run: MediaGenerationRun) => void;
}) {
  const items = mediaResultItems(props.run);
  const expectedCount = Math.max(mediaOutputCount(props.run.settings), items.length, 1);
  const columns = expectedCount === 1 ? 1 : expectedCount === 2 ? 2 : Math.min(5, expectedCount);
  const style = {
    '--media-grid-columns': columns,
    '--media-grid-max-width': mediaGridMaxWidth(props.run.settings, columns),
    '--media-result-aspect': cssAspectRatio(props.run.settings),
  } as CSSProperties;
  const status = mediaStatusText(props.run);
  const unit = props.run.mode === 'video' ? '条' : '张';
  const isPending = props.run.status === 'submitting' || props.run.status === 'queued' || props.run.status === 'running';
  const backdropItem = expectedCount === 1 && items[0]?.type === 'image' ? items[0] : undefined;

  return (
    <article className="mediaTaskItem" data-status={props.run.status}>
      <header className="mediaTaskHeader">
        <div>
          <p>
            <span>{props.run.prompt}</span>
            <small>{props.run.mode === 'video' ? '视频' : '图片'} {props.run.modelLabel} {props.run.settings.aspectRatio} {props.run.settings.resolution}</small>
          </p>
          <time dateTime={props.run.createdAt}>{formatRunTime(props.run.createdAt)}</time>
        </div>
        <span className="mediaTaskStatus" data-status={props.run.status}>{status}</span>
      </header>

      <div className="mediaPreviewStage" data-count={expectedCount}>
        {backdropItem && <img aria-hidden="true" className="mediaPreviewBackdrop" src={backdropItem.src} alt="" />}
        <div className="mediaGrid" data-count={expectedCount} style={style}>
          {Array.from({ length: expectedCount }).map((_, index) => (
            <MediaTile
              expectedCount={expectedCount}
              index={index}
              item={items[index]}
              key={`${props.run.localId}-${index}`}
              mode={props.run.mode}
              status={props.run.status}
            />
          ))}
        </div>
      </div>

      {props.run.error && <p className="mediaTaskError">{props.run.error}</p>}
      <footer className="mediaTaskActions">
        {items[0] ? (
          <Button asChild size="sm" variant="secondary">
            <a href={items[0].src} download target="_blank" rel="noreferrer">
              <Download size={14} />
              下载
            </a>
          </Button>
        ) : (
          <Button type="button" size="sm" variant="secondary" disabled>
            <Download size={14} />
            下载
          </Button>
        )}
        <Button type="button" size="sm" variant="secondary" onClick={() => props.onEditRun?.(props.run)}>
          <Edit3 size={14} />
          重新编辑
        </Button>
        <Button type="button" size="sm" variant="secondary" disabled={isPending} onClick={() => props.onRerun?.(props.run)}>
          <Sparkles size={14} />
          再次生成
        </Button>
        <span>
          <Sparkles size={14} />
          {expectedCount} / {unit}
        </span>
      </footer>
    </article>
  );
}

function MediaTile(props: {
  expectedCount: number;
  index: number;
  item?: MediaResultItem;
  mode: Exclude<PlaygroundMode, 'chat'>;
  status: MediaGenerationRun['status'];
}) {
  const isLoading = props.status === 'submitting' || props.status === 'queued' || props.status === 'running';
  const isFailed = props.status === 'failed' || props.status === 'cancelled';
  return (
    <div className="mediaTile" data-count={props.expectedCount} data-empty={!props.item && !isLoading} data-kind={props.mode}>
      {props.item?.type === 'video' && (
        <video controls muted playsInline poster={props.item.poster}>
          <source src={props.item.src} />
        </video>
      )}
      {props.item?.type === 'image' && <img src={props.item.src} alt={`生成结果 ${props.index + 1}`} />}
      {isLoading && !props.item && (
        <div className="mediaLoading">
          <LoaderCircle size={24} />
          <span>{props.mode === 'video' ? '视频生成中' : '图片生成中'}</span>
        </div>
      )}
      {isFailed && !props.item && (
        <div className="mediaEmptyTile">
          <span>生成失败</span>
        </div>
      )}
      {!isLoading && !isFailed && !props.item && (
        <div className="mediaEmptyTile">
          <span>暂无结果</span>
        </div>
      )}
    </div>
  );
}

function mediaResultItems(run: MediaGenerationRun): MediaResultItem[] {
  const data = arrayFromUnknown(run.task?.result?.data);
  return data
    .map((entry) => mediaResultItemFromEntry(entry, run.mode))
    .filter((item): item is MediaResultItem => Boolean(item));
}

function mediaResultItemFromEntry(entry: unknown, mode: Exclude<PlaygroundMode, 'chat'>): MediaResultItem | undefined {
  const record = recordFromUnknown(entry);
  if (!record) return undefined;
  const b64 = stringFromUnknown(record.b64_json);
  if (b64) return { src: `data:image/png;base64,${b64}`, type: 'image' };
  const videoUrl = firstString(record.video_url, nestedString(record.video_url, 'url'), record.videoUrl, record.output_video_url);
  if (videoUrl) return { src: resolveApiAssetUrl(videoUrl), type: 'video' };
  const imageUrl = firstString(record.url, record.image_url, nestedString(record.image_url, 'url'), record.output_url);
  if (!imageUrl) return undefined;
  const normalized = resolveApiAssetUrl(imageUrl);
  const type = mode === 'video' || /\.(mp4|mov|webm|m4v)(\?|#|$)/i.test(normalized) ? 'video' : 'image';
  return { src: normalized, type };
}

function mediaSettingsSummary(settings: MediaGenerationSettings, mode: Exclude<PlaygroundMode, 'chat'>) {
  const count = mediaOutputCount(settings);
  const unit = mode === 'video' ? '条' : '张';
  const resolutionLabel = resolutionOptionsForMode(mode).find((item) => item.value === settings.resolution)?.label ?? settings.resolution;
  const modeLabel = settings.outputMode === 'single' ? '单图' : '组图';
  return `${settings.aspectRatio} | ${resolutionLabel} | ${settings.width}x${settings.height} | ${modeLabel} ${count}${unit}`;
}

function mediaStatusText(run: MediaGenerationRun) {
  if (run.status === 'submitting') return '提交中';
  if (run.status === 'queued') return '排队中';
  if (run.status === 'running') return '生成中';
  if (run.status === 'succeeded') return '已完成';
  if (run.status === 'failed') return '失败';
  if (run.status === 'cancelled') return '已取消';
  return run.status;
}

function formatRunTime(value: string) {
  return new Intl.DateTimeFormat('zh-CN', { hour: '2-digit', minute: '2-digit' }).format(new Date(value));
}

function cssAspectRatio(settings: MediaGenerationSettings) {
  const [aspectWidth, aspectHeight] = settings.aspectRatio.split(':').map((item) => Number(item));
  if (Number.isFinite(aspectWidth) && Number.isFinite(aspectHeight) && aspectWidth > 0 && aspectHeight > 0) {
    return `${aspectWidth} / ${aspectHeight}`;
  }
  return `${settings.width || 1} / ${settings.height || 1}`;
}

function mediaGridMaxWidth(settings: MediaGenerationSettings, columns: number) {
  const ratio = numericAspectRatio(settings);
  const safeColumns = Math.max(1, columns);
  const maxWidth = (mediaPreviewMaxHeight * ratio * safeColumns) + (mediaGridGap * (safeColumns - 1));
  return `${Math.max(120, Math.ceil(maxWidth))}px`;
}

function numericAspectRatio(settings: MediaGenerationSettings) {
  const [aspectWidth, aspectHeight] = settings.aspectRatio.split(':').map((item) => Number(item));
  if (Number.isFinite(aspectWidth) && Number.isFinite(aspectHeight) && aspectWidth > 0 && aspectHeight > 0) {
    return aspectWidth / aspectHeight;
  }
  const width = Number(settings.width);
  const height = Number(settings.height);
  if (Number.isFinite(width) && Number.isFinite(height) && width > 0 && height > 0) {
    return width / height;
  }
  return 1;
}

function deriveSingleMediaModelCapabilities(
  model: PlatformModel,
  mode: Exclude<PlaygroundMode, 'chat'>,
  contextKey?: string,
): MediaModelCapabilities {
  const source = mergeCapabilityRecords(model.capabilities, model.capabilityOverride);
  const typeKeys = capabilityTypeKeys(model, source, mode, contextKey);
  const defaultCapabilities = defaultMediaModelCapabilities(mode);
  const resolutionValues = normalizeResolutionValues(stringListFromCapability(firstCapabilityValue(source, typeKeys, ['output_resolutions']), [contextKey]));
  const allowedAspectValues = normalizeAspectRatioValues(stringListFromCapability(firstCapabilityValue(source, typeKeys, ['aspect_ratio_allowed']), [contextKey]));
  const ratioRange = ratioRangeFromValue(firstCapabilityValue(source, typeKeys, ['aspect_ratio_range']));
  const rangedAspectValues = ratioRange ? aspectRatioOptions
    .filter((item) => item.value === 'auto' || aspectRatioWithinRange(item.value, ratioRange))
    .map((item) => item.value) : [];
  const aspectRatios = allowedAspectValues.length && rangedAspectValues.length
    ? allowedAspectValues.filter((item) => rangedAspectValues.includes(item))
    : allowedAspectValues.length ? allowedAspectValues : rangedAspectValues;
  const maxCountValue = numberFromUnknown(firstCapabilityValue(source, typeKeys, countCapabilityKeys(mode)));
  const explicitGroupSupport = boolFromUnknown(firstCapabilityValue(source, typeKeys, groupCapabilityKeys(mode)));
  const maxCount = explicitGroupSupport === false ? 1 : clampNumber(maxCountValue ?? defaultCapabilities.maxCount, 1, 20);
  const supportsGroup = explicitGroupSupport === false ? false : maxCount > 1;

  return {
    aspectRatios: aspectRatios.length ? aspectRatios : defaultCapabilities.aspectRatios,
    maxCount,
    resolutions: resolutionValues.length ? resolutionValues : defaultCapabilities.resolutions,
    supportsGroup,
  };
}

function defaultMediaModelCapabilities(mode: Exclude<PlaygroundMode, 'chat'>): MediaModelCapabilities {
  return {
    aspectRatios: aspectRatioOptions.map((item) => item.value),
    maxCount: 20,
    resolutions: resolutionOptionsForMode(mode).map((item) => item.value),
    supportsGroup: true,
  };
}

function filterAspectRatioOptions(capabilities: MediaModelCapabilities) {
  const allowed = new Set(capabilities.aspectRatios);
  const items = aspectRatioOptions.filter((item) => allowed.has(item.value));
  return items.length ? items : aspectRatioOptions;
}

function filterResolutionOptions(capabilities: MediaModelCapabilities, mode: Exclude<PlaygroundMode, 'chat'>) {
  const allowed = new Set(capabilities.resolutions);
  const modeOptions = resolutionOptionsForMode(mode);
  const items = modeOptions.filter((item) => allowed.has(item.value));
  return items.length ? items : modeOptions;
}

function resolutionOptionsForMode(mode: Exclude<PlaygroundMode, 'chat'>) {
  return resolutionOptions.filter((item) => item.modes.includes(mode));
}

function intersectOptionValues(values: string[][], fallback: string[]) {
  const nonEmptyValues = values.filter((items) => items.length > 0);
  if (!nonEmptyValues.length) return fallback;
  const intersection = fallback.filter((item) => nonEmptyValues.every((items) => items.includes(item)));
  return intersection.length ? intersection : nonEmptyValues[0];
}

function capabilityTypeKeys(
  model: PlatformModel,
  source: Record<string, unknown>,
  mode: Exclude<PlaygroundMode, 'chat'>,
  contextKey?: string,
) {
  const modeTypeHints = mode === 'image'
    ? ['image_generate', 'image_edit', 'images.generations', 'images.edits', 'image']
    : [contextKey, 'text_to_video', 'image_to_video', 'omni_video', 'video_generate', 'video'];
  return uniqueStrings([
    ...stringListFromCapability(source.originalTypes),
    model.modelType,
    ...modeTypeHints.filter((item): item is string => Boolean(item)),
  ]);
}

function firstCapabilityValue(source: Record<string, unknown>, typeKeys: string[], keys: string[]) {
  for (const key of keys) {
    const value = nestedCapabilityValue(source, typeKeys, key);
    if (hasCapabilityValue(value)) return value;
  }
  return undefined;
}

function nestedCapabilityValue(source: Record<string, unknown>, typeKeys: string[], key: string) {
  for (const type of typeKeys) {
    const config = recordFromUnknown(source[type]);
    if (config && key in config) return config[key];
  }
  if (key in source) return source[key];
  for (const value of Object.values(source)) {
    const config = recordFromUnknown(value);
    if (config && key in config) return config[key];
  }
  return undefined;
}

function groupCapabilityKeys(mode: Exclude<PlaygroundMode, 'chat'>) {
  return mode === 'image'
    ? ['output_multiple_images', 'multiple_images', 'support_multiple_images', 'supports_group']
    : ['output_multiple_videos', 'multiple_videos', 'support_multiple_videos', 'supports_group'];
}

function countCapabilityKeys(mode: Exclude<PlaygroundMode, 'chat'>) {
  return mode === 'image'
    ? ['output_max_images_count', 'max_images', 'max_outputs', 'output_max_count']
    : ['output_max_videos_count', 'max_videos', 'max_outputs', 'output_max_count'];
}

function mergeCapabilityRecords(...records: Array<Record<string, unknown> | undefined>) {
  return records.reduce<Record<string, unknown>>((acc, record) => {
    if (!record) return acc;
    Object.entries(record).forEach(([key, value]) => {
      const current = recordFromUnknown(acc[key]);
      const next = recordFromUnknown(value);
      acc[key] = current && next ? { ...current, ...next } : value;
    });
    return acc;
  }, {});
}

function stringListFromCapability(value: unknown, preferredKeys: Array<string | undefined> = []): string[] {
  if (Array.isArray(value)) return value.map(String).map((item) => item.trim()).filter(Boolean);
  if (typeof value === 'string') return value.split(/[,，\s]+/).map((item) => item.trim()).filter(Boolean);
  const record = recordFromUnknown(value);
  if (!record) return [];
  const preferred = preferredKeys
    .filter((key): key is string => Boolean(key))
    .flatMap((key) => stringListFromCapability(record[key]));
  if (preferred.length) return preferred;
  return Object.values(record).flatMap((item) => stringListFromCapability(item));
}

function normalizeAspectRatioValues(values: string[]) {
  const allowedValues = new Set(aspectRatioOptions.map((item) => item.value));
  return uniqueStrings(values.map((value) => {
    const normalized = value.toLowerCase().replace(/[×x]/g, ':').replace(/\s+/g, '');
    if (['auto', 'smart', 'adaptive', '智能'].includes(normalized)) return 'auto';
    return normalized;
  })).filter((value) => allowedValues.has(value));
}

function normalizeResolutionValues(values: string[]) {
  const allowedValues = new Set(resolutionOptions.map((item) => item.value));
  return uniqueStrings(values.map((value) => {
    const normalized = value.trim().toLowerCase();
    if (normalized.includes('2160')) return '2160p';
    if (normalized.includes('1080')) return '1080p';
    if (normalized.includes('720')) return '720p';
    if (normalized.includes('480')) return '480p';
    if (normalized.includes('4k') || normalized.includes('4096')) return '4K';
    if (normalized.includes('2k') || normalized.includes('2048')) return '2K';
    if (normalized.includes('1k') || normalized.includes('1024')) return '1K';
    return value.trim();
  })).filter((value) => allowedValues.has(value));
}

function ratioRangeFromValue(value: unknown): [number, number] | undefined {
  if (Array.isArray(value) && value.length >= 2) {
    const min = Number(value[0]);
    const max = Number(value[1]);
    if (Number.isFinite(min) && Number.isFinite(max)) return [Math.min(min, max), Math.max(min, max)];
  }
  if (typeof value === 'string') {
    const numbers = value.match(/-?\d+(?:\.\d+)?/g)?.map(Number) ?? [];
    if (numbers.length >= 2 && numbers.every(Number.isFinite)) return [Math.min(numbers[0], numbers[1]), Math.max(numbers[0], numbers[1])];
  }
  const record = recordFromUnknown(value);
  if (!record) return undefined;
  for (const item of Object.values(record)) {
    const nested = ratioRangeFromValue(item);
    if (nested) return nested;
  }
  return undefined;
}

function aspectRatioWithinRange(value: string, range: [number, number]) {
  const [width, height] = value.split(':').map(Number);
  if (!Number.isFinite(width) || !Number.isFinite(height) || height <= 0) return false;
  const ratio = width / height;
  return ratio >= range[0] && ratio <= range[1];
}

function hasCapabilityValue(value: unknown) {
  if (value === undefined || value === null || value === '') return false;
  if (Array.isArray(value)) return value.length > 0;
  return true;
}

function boolFromUnknown(value: unknown) {
  if (value === true || value === 'true') return true;
  if (value === false || value === 'false') return false;
  return undefined;
}

function numberFromUnknown(value: unknown) {
  if (typeof value === 'number' && Number.isFinite(value)) return value;
  if (typeof value === 'string' && value.trim()) {
    const parsed = Number(value);
    if (Number.isFinite(parsed)) return parsed;
  }
  return undefined;
}

function uniqueStrings(values: string[]) {
  return Array.from(new Set(values.map((item) => item.trim()).filter(Boolean)));
}

function mediaSettingsEqual(left: MediaGenerationSettings, right: MediaGenerationSettings) {
  return left.aspectRatio === right.aspectRatio
    && left.countPreset === right.countPreset
    && left.customCount === right.customCount
    && left.height === right.height
    && left.outputMode === right.outputMode
    && left.resolution === right.resolution
    && left.width === right.width;
}

function firstString(...values: unknown[]) {
  return values.map(stringFromUnknown).find(Boolean) ?? '';
}

function nestedString(value: unknown, key: string) {
  return stringFromUnknown(recordFromUnknown(value)?.[key]);
}

function stringFromUnknown(value: unknown) {
  return typeof value === 'string' ? value.trim() : '';
}

function arrayFromUnknown(value: unknown) {
  return Array.isArray(value) ? value : [];
}

function recordFromUnknown(value: unknown): Record<string, unknown> | undefined {
  if (!value || typeof value !== 'object' || Array.isArray(value)) return undefined;
  return value as Record<string, unknown>;
}

function clampNumber(value: number, min: number, max: number) {
  if (!Number.isFinite(value)) return min;
  return Math.min(max, Math.max(min, Math.round(value)));
}

interface MediaResultItem {
  poster?: string;
  src: string;
  type: 'image' | 'video';
}