import { Button } from '@/components/ui/button';
import { Form } from '@/components/ui/form';
import { zodResolver } from '@hookform/resolvers/zod';
import React, { useEffect, useRef, useState } from 'react';
import { useForm } from 'react-hook-form';
import { z } from 'zod';
import ClothingCard from './components/ClothingCard';
import {
  api,
  type Body_async_cloud_change_bg_v3_api_v3_cloud_batch_change_bg_post,
  type Body_async_cloud_gen_images_v3_api_v3_cloud_batch_edit_images_post,
  type Body_local_cloud_async_change_bg_api_v2_cloud_batch_change_bg_post,
} from '@/api';
import { type BgPaddingMultiValue } from '@/components/block/BgPaddingMultiSelect';

// 五级联动的 tag schema
const tagSchema = z.object({
  scenes: z.array(z.array(z.string())).optional(),
});

const formSchema = z.object({
  clothing_images: z.array(z.instanceof(File)).min(1, '请上传至少一张服装图片').max(5, '最多上传5个商品'),
  tags: z.array(tagSchema),
  changeBg: z.boolean().optional(),
});

interface TagForm {
  scenes?: string[][];
  paddingList?: BgPaddingMultiValue;
  bgMode?: 'custom' | 'scene';
}

interface FormValues {
  clothing_images: File[];
  tags: TagForm[];
  changeBg?: boolean;
}

const defaultValues: FormValues = {
  clothing_images: [],
  tags: [],
  changeBg: false,
};

const TryOnPage: React.FC = () => {
  const [scenesOptions, setScenesOptions] = useState<any[]>([]);
  const [loading, setLoading] = useState(false);
  const [result, setResult] = useState<any>(null);
  const fileInputRef = useRef<HTMLInputElement>(null);
  const [imagePreviews, setImagePreviews] = useState<string[]>([]);

  // 表单
  const form = useForm<FormValues>({
    resolver: zodResolver(formSchema),
    defaultValues,
  });

  // 拉取标签数据
  useEffect(() => {
    api.TagService.fetchStyleAvailableTagsApiTagStyleTagListGet().then(data => setScenesOptions(data.data || []));
  }, []);

  const tags = form.watch('tags');

  // 图片上传和标签组同步（append 新卡片）
  const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const files = Array.from(e.target.files || []);
    if (!files.length) return;
    const oldFiles = form.getValues('clothing_images');
    if (oldFiles.length + files.length > 5) {
      alert('最多只能上传5个商品');
      if (fileInputRef.current) fileInputRef.current.value = '';
      return;
    }
    // 追加到已有图片和标签
    const oldTags = form.getValues('tags');
    const newFiles = [...oldFiles, ...files];
    const newTags = [...oldTags, ...files.map(() => ({ scenes: [] as string[][] }))];
    form.setValue('clothing_images', newFiles);
    setImagePreviews(newFiles.map(file => URL.createObjectURL(file)));
    form.setValue('tags', newTags);
    // 清空 input 以便连续选择同一图片
    if (fileInputRef.current) fileInputRef.current.value = '';
  };

  // 删除图片及对应标签组
  const handleRemoveImage = (idx: number) => {
    const files = form.getValues('clothing_images');
    const tags = form.getValues('tags');
    const newFiles = files.filter((_, i) => i !== idx);
    const newTags = tags.filter((_, i) => i !== idx);
    form.setValue('clothing_images', newFiles);
    setImagePreviews(newFiles.map(file => URL.createObjectURL(file)));
    form.setValue('tags', newTags);
  };

  // 场景多选
  const handleScenesChange = (idx: number, scenes: string[][]) => {
    const newTags = [...form.getValues('tags')];
    newTags[idx] = { ...newTags[idx], scenes };
    form.setValue('tags', newTags);
  };

  // 自定义上传
  const handlePaddingListChange = (idx: number, paddingList: BgPaddingMultiValue) => {
    const newTags = [...form.getValues('tags')];
    newTags[idx] = { ...newTags[idx], paddingList };
    form.setValue('tags', newTags);
  };

  // 切换背景模式
  const handleBgModeChange = (idx: number, bgMode: 'custom' | 'scene') => {
    const newTags = [...form.getValues('tags')];
    newTags[idx] = { ...newTags[idx], bgMode };
    form.setValue('tags', newTags);
  };

  // 递归查找 prompt
  function findPromptByPath(tree: any[], path: string[]): string {
    let node: any = null;
    let nodes: any[] = tree;
    for (const t of path) {
      node = nodes.find((n: any) => n.title === t);
      if (!node) return '';
      nodes = node.children || [];
    }
    return node && node.prompt ? node.prompt : '';
  }

  // 提交
  const onSubmit = async (values: FormValues) => {
    setLoading(true);
    setResult(null);
    const results: any[] = [];
    console.log(values);
    try {
      for (let i = 0; i < values.clothing_images.length; i++) {
        const tag = values.tags[i];
        const bgMode = tag.bgMode || 'scene';
        if (bgMode === 'custom') {
          // 自定义模式
          const paddingList = tag.paddingList || [];
          for (const padding of paddingList) {
            const formData: Body_async_cloud_change_bg_v3_api_v3_cloud_batch_change_bg_post = {
              clothing_images: [values.clothing_images[i]],
              padding_images: [padding.file],
              bg_prompts: padding.text,
            };
            const res = await api.ImageGenerateService.asyncCloudChangeBgV3ApiV3CloudBatchChangeBgPost({ formData });
            results.push(res);
          }
        } else {
          // 场景模式
          const scenesArr: string[][] = tag.scenes || [];
          for (const path of scenesArr) {
            const scene = {
              title: path.join('/'),
              prompt: findPromptByPath(scenesOptions, path),
            };
            const formData: Body_local_cloud_async_change_bg_api_v2_cloud_batch_change_bg_post = {
              clothing_images: [values.clothing_images[i]],
              scenes_list: JSON.stringify([{ title: scene.title, prompt: scene.prompt }]),
            };
            const res = await api.ImageGenerateService.localCloudAsyncChangeBgApiV2CloudBatchChangeBgPost({ formData });
            results.push(res);
          }
        }
      }
      setResult(results);
    } catch (e: any) {
      setResult({ error: e?.message || '请求失败' });
    } finally {
      setLoading(false);
    }
  };

  const clothing_images = form.watch('clothing_images');

  return (
    <div className='p-6 max-w-4xl mx-auto'>
      <h1 className='text-2xl font-bold mb-6'>换装体验</h1>
      <Form {...form}>
        <form onSubmit={form.handleSubmit(onSubmit)} className='space-y-8'>
          {/* 卡片式图片+表单 */}
          <div className='flex flex-col gap-8'>
            {clothing_images &&
              clothing_images.length > 0 &&
              clothing_images.map((_, idx) => {
                const tag: TagForm = tags[idx] || { scenes: [] };
                const fileName = clothing_images[idx]?.name;
                return (
                  <ClothingCard
                    key={idx}
                    imageUrl={imagePreviews[idx]}
                    onRemove={() => handleRemoveImage(idx)}
                    scenesOptions={scenesOptions}
                    scenes={tag.scenes || []}
                    onScenesChange={scenes => handleScenesChange(idx, scenes)}
                    fileName={fileName}
                    paddingList={tag.paddingList || []}
                    onPaddingListChange={paddingList => handlePaddingListChange(idx, paddingList)}
                    bgMode={tag.bgMode || 'scene'}
                    onChangeBgMode={bgMode => handleBgModeChange(idx, bgMode)}
                  />
                );
              })}
            <Button type='button' onClick={() => fileInputRef.current?.click()} className='w-40 self-center' disabled={clothing_images.length >= 5}>
              添加商品
            </Button>
            <input ref={fileInputRef} type='file' accept='image/*' multiple className='hidden' onChange={handleImageChange} />
          </div>
          <Button type='submit' disabled={loading} className='w-full'>
            {loading ? '提交中...' : '提交换背景'}
          </Button>
        </form>
      </Form>
      {/* 结果展示 */}
      {result && (
        <div className='mt-8'>
          <h2 className='text-lg font-semibold mb-2'>结果</h2>
          <pre className='bg-muted p-4 rounded text-sm overflow-x-auto'>{JSON.stringify(result, null, 2)}</pre>
        </div>
      )}
    </div>
  );
};

export default TryOnPage;