import React, { useCallback, useEffect, useState } from 'react';
import { useApi } from '@/hooks/useApi';
import { api } from '@/lib/api';
import type { VideoDataPaginationRequest } from '@/api/models/VideoDataPaginationRequest';
import type { PaginationResponse } from '@/api/models/PaginationResponse';
import { Table, TableHeader, TableBody, TableHead, TableRow, TableCell } from '@/components/ui/table';
import { Button } from '@/components/ui/button';
import { Skeleton } from '@/components/ui/skeleton';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog';
import { Checkbox } from '@/components/ui/checkbox';
import { ACTION_PROMPTS } from '@/lib/prompt';
import { toast } from 'sonner';
import { addVideoTasks } from '@/lib/indexeddb';
import type { BatchVideoTaskRequest } from '@/api';

const PAGE_SIZE = 10;

const promptGetter = (list: string[]) => {
  let index = 0;
  return () => {
    index++;
    return list[index % list.length];
  };
};

const TryOnTasksPage: React.FC = () => {
  const [page, setPage] = useState(1);
  const [previewImg, setPreviewImg] = useState<string | null>(null);
  const [dialogOpen, setDialogOpen] = useState(false);
  const [selectedRows, setSelectedRows] = useState<{ id: number; img_url: string; task_id: string }[]>([]);
  const [createDialogOpen, setCreateDialogOpen] = useState(false);
  const [selectedPrompts, setSelectedPrompts] = useState<string[]>([]);
  const [creating, setCreating] = useState(false);

  const r = useCallback(async (params: VideoDataPaginationRequest) => {
    const res = await api.DefaultService.getImageDataListApiImageDataListPost({ requestBody: params });
    return res;
  }, []);

  const { data, loading, error, execute } = useApi<PaginationResponse>(r, null);

  useEffect(() => {
    execute({ page, page_size: PAGE_SIZE });
  }, [page, execute]);

  const handlePrev = () => setPage(p => Math.max(1, p - 1));
  const handleNext = () => setPage(p => p + 1);

  // 判断某行是否被选中
  const isRowSelected = (id: number) => selectedRows.some(row => row.id === id);

  // 当前页所有可选行id
  const currentPageIds = data?.data?.map(item => item.id) || [];
  // 当前页是否全选
  const isAllCurrentPageSelected = currentPageIds.length > 0 && currentPageIds.every(id => isRowSelected(id));

  // 单行选择
  const handleRowSelect = (item: { id: number; img_url?: string; task_id?: string }) => {
    setSelectedRows(prev => {
      if (isRowSelected(item.id)) {
        return prev.filter(row => row.id !== item.id);
      } else {
        return [...prev, { id: item.id, img_url: item.img_url || '', task_id: item.task_id || '' }];
      }
    });
  };
  // 当前页全选/取消
  const handleSelectAllCurrentPage = () => {
    if (isAllCurrentPageSelected) {
      setSelectedRows(prev => prev.filter(row => !currentPageIds.includes(row.id)));
    } else {
      const toAdd = (data?.data || [])
        .filter(item => !isRowSelected(item.id))
        .map(item => ({ id: item.id, img_url: item.img_url || '', task_id: item.task_id || '' }));
      setSelectedRows(prev => [...prev, ...toAdd]);
    }
  };

  // 创建视频任务提交
  const handleCreateTask = async () => {
    if (!selectedRows.length || !selectedPrompts.length) return;
    setCreating(true);
    const getPrompt = promptGetter(selectedPrompts);
    try {
      const tasks: BatchVideoTaskRequest['tasks'] = selectedRows.map(row => ({
        prompt: getPrompt(),
        img_url: row.img_url,
        task_id: row.task_id,
      }));
      const res = (await api.Service.submitVideoTaskApiJmSubmitTaskPost({ requestBody: { tasks } })) as {
        status: boolean;
        data: { success: { task_id: string; img_url: string }[]; failed: string[] };
        msg: string;
      };
      // 只存储成功的任务
      const successList = res?.data?.success || [];
      // 用于 prompt 匹配
      const promptMap = new Map();
      tasks.forEach(t => {
        if (!promptMap.has(t.img_url)) promptMap.set(t.img_url, []);
        promptMap.get(t.img_url).push(t.prompt);
      });
      const localTasks = successList.map((item: any) => {
        // 取出 prompt（如有多 prompt，依次取出）
        let prompt = '';
        if (promptMap.has(item.img_url)) {
          const arr = promptMap.get(item.img_url);
          prompt = arr.shift();
          if (arr.length === 0) promptMap.delete(item.img_url);
        }
        return {
          id: `${item.task_id}`,
          img_url: item.img_url,
          prompt,
          create_time: new Date().toISOString(),
          job_id: item.job_id,
          task_id: item.task_id,
        };
      });
      await addVideoTasks(localTasks);
      toast.success('任务提交成功');
      setCreateDialogOpen(false);
      setSelectedPrompts([]);
      setSelectedRows([]);
    } catch (e: any) {
      toast.error(e?.message || '任务提交失败');
    } finally {
      setCreating(false);
    }
  };

  return (
    <div className='p-6'>
      {/* 创建视频任务弹窗 */}
      <Dialog open={createDialogOpen} onOpenChange={setCreateDialogOpen}>
        <DialogContent style={{ maxWidth: 480 }}>
          <DialogHeader>
            <DialogTitle>选择提示词</DialogTitle>
          </DialogHeader>
          <div className='max-h-60 overflow-y-auto space-y-2 my-4'>
            {ACTION_PROMPTS.map(prompt => (
              <label key={prompt} className='flex items-center gap-2 cursor-pointer'>
                <Checkbox
                  checked={selectedPrompts.includes(prompt)}
                  onCheckedChange={() => {
                    setSelectedPrompts(prev => (prev.includes(prompt) ? prev.filter(p => p !== prompt) : [...prev, prompt]));
                  }}
                />
                <span className='text-sm'>{prompt}</span>
              </label>
            ))}
          </div>
          <DialogFooter>
            <Button variant='outline' onClick={() => setCreateDialogOpen(false)} disabled={creating}>
              取消
            </Button>
            <Button onClick={handleCreateTask} disabled={creating || !selectedPrompts.length || !selectedRows.length}>
              {creating ? '提交中...' : '提交'}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
      {/* 图片预览 Dialog */}
      <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
        <DialogContent style={{ maxHeight: '80vh' }} className='flex items-center justify-center' showCloseButton={false}>
          {previewImg && <img src={previewImg} alt='预览图片' className='object-contain rounded shadow-lg max-h-[calc(80vh-100px)]' />}
        </DialogContent>
      </Dialog>
      <div className='flex justify-between items-center mb-4'>
        <h2 className='text-xl font-bold'>任务列表</h2>
        <Button onClick={() => setCreateDialogOpen(true)} disabled={!selectedRows.length}>
          创建视频任务
        </Button>
      </div>
      {loading ? (
        <Skeleton className='h-40 w-full mb-4' />
      ) : error ? (
        <div className='text-red-500 mb-4'>{error}</div>
      ) : (
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>
                <Checkbox checked={isAllCurrentPageSelected} onCheckedChange={handleSelectAllCurrentPage} />
              </TableHead>
              <TableHead>图片</TableHead>
              <TableHead>ID</TableHead>
              <TableHead>任务ID</TableHead>
              <TableHead>图片状态</TableHead>
              <TableHead>视频状态</TableHead>
              <TableHead>创建时间</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {data?.data?.length ? (
              data.data.map(item => (
                <TableRow key={item.id}>
                  <TableCell>
                    <Checkbox checked={isRowSelected(item.id)} onCheckedChange={() => handleRowSelect(item)} />
                  </TableCell>
                  <TableCell>
                    {item.img_url ? (
                      <img
                        src={item.img_url}
                        alt='img'
                        className='w-16 h-16 object-cover rounded cursor-pointer transition hover:scale-105'
                        onClick={() => {
                          setPreviewImg(item.img_url!);
                          setDialogOpen(true);
                        }}
                      />
                    ) : (
                      <span className='text-gray-400'>无</span>
                    )}
                  </TableCell>
                  <TableCell>{item.id}</TableCell>
                  <TableCell>{item.task_id}</TableCell>
                  <TableCell>{item.img_status || '-'}</TableCell>
                  <TableCell>{item.video_status || '-'}</TableCell>
                  <TableCell>{item.create_time || '-'}</TableCell>
                </TableRow>
              ))
            ) : (
              <TableRow>
                <TableCell colSpan={7} className='text-center text-gray-400'>
                  暂无数据
                </TableCell>
              </TableRow>
            )}
          </TableBody>
        </Table>
      )}
      <div className='flex justify-between items-center mt-4'>
        <Button variant='outline' onClick={handlePrev} disabled={page === 1 || loading}>
          上一页
        </Button>
        <span>第 {page} 页</span>
        <Button variant='outline' onClick={handleNext} disabled={loading || (data?.data && data.data.length < PAGE_SIZE)}>
          下一页
        </Button>
      </div>
    </div>
  );
};

export default TryOnTasksPage;