xiaoxia-saas/apps/web/src/pages/edit-plans/PlanClipsManager.tsx

/**
 * 剪辑计划片段管理页面
 * 对接后端 PR#389 片段 CRUD API
 * 功能：列表查看、创建、编辑、删除、批量删除、拖拽排序、从素材导入
 */
import { useState, useCallback } from "react"
import { useParams, useNavigate } from "react-router-dom"
import { useQuery, useQueryClient } from "@tanstack/react-query"
import {
  Table,
  Button,
  Space,
  message,
  Popconfirm,
  Modal,
  Form,
  Input,
  InputNumber,
  Select,
  Tag,
  Drawer,
  Empty,
  Card,
} from "antd"
import {
  ArrowLeftOutlined,
  PlusOutlined,
  DeleteOutlined,
  EditOutlined,
  UploadOutlined,
  OrderedListOutlined,
  SaveOutlined,
} from "@ant-design/icons"
import type { ColumnsType } from "antd/es/table"
import {
  getEditPlan,
  getEditPlanClips,
  createEditPlanClip,
  updateEditPlanClip,
  deleteEditPlanClip,
  batchDeleteEditPlanClips,
  reorderEditPlanClips,
  createClipsFromAssets,
  getMediaAssets,
  type EditPlanClip,
  type EditPlanClipStatus,
} from "@/api/editPlans"
import "./plan-clips.css"

/* ──────────── 常量 ──────────── */

const CLIP_TYPE_OPTIONS = [
  { value: "main", label: "主片段" },
  { value: "intro", label: "片头" },
  { value: "outro", label: "片尾" },
  { value: "overlay", label: "叠加层" },
  { value: "background", label: "背景" },
  { value: "b_roll", label: "B-roll" },
]

const STATUS_COLORS: Record<EditPlanClipStatus, string> = {
  pending: "default",
  processing: "processing",
  ready: "success",
  failed: "error",
}

const STATUS_LABELS: Record<EditPlanClipStatus, string> = {
  pending: "待处理",
  processing: "处理中",
  ready: "就绪",
  failed: "失败",
}

const TRANSITION_OPTIONS = [
  { value: "cut", label: "硬切" },
  { value: "fade", label: "淡入淡出" },
  { value: "dissolve", label: "溶解" },
  { value: "zoom", label: "缩放" },
  { value: "slide_left", label: "左滑" },
  { value: "slide_right", label: "右滑" },
  { value: "slide_up", label: "上滑" },
  { value: "slide_down", label: "下滑" },
  { value: "wipe_left", label: "左擦除" },
  { value: "wipe_right", label: "右擦除" },
  { value: "wipe_up", label: "上擦除" },
  { value: "wipe_down", label: "下擦除" },
  { value: "circlecrop", label: "圆形裁切" },
  { value: "rectcrop", label: "矩形裁切" },
]

/* ──────────── 组件 ──────────── */

const PlanClipsManager: React.FC = () => {
  const { planId } = useParams<{ planId: string }>()
  const navigate = useNavigate()
  const queryClient = useQueryClient()

  /* ── 计划信息 ── */
  const { data: plan, isLoading: planLoading } = useQuery({
    queryKey: ["editPlan", planId],
    queryFn: () => getEditPlan(planId!),
    enabled: !!planId,
  })

  /* ── 片段列表 ── */
  const { data: clipsData, isLoading: clipsLoading } = useQuery({
    queryKey: ["editPlanClips", planId],
    queryFn: () => getEditPlanClips(planId!, { limit: 500 }),
    enabled: !!planId,
  })

  const clips = clipsData?.items ?? []

  /* ── 选中的片段（批量操作） ── */
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([])

  /* ── 编辑弹窗 ── */
  const [editModalOpen, setEditModalOpen] = useState(false)
  const [editingClip, setEditingClip] = useState<EditPlanClip | null>(null)
  const [editForm] = Form.useForm()
  const [editLoading, setEditLoading] = useState(false)

  /* ── 素材导入抽屉 ── */
  const [importDrawerOpen, setImportDrawerOpen] = useState(false)
  const [selectedAssetIds, setSelectedAssetIds] = useState<string[]>([])
  const [importLoading, setImportLoading] = useState(false)

  const { data: assets } = useQuery({
    queryKey: ["mediaAssets"],
    queryFn: () => getMediaAssets(),
    enabled: importDrawerOpen,
  })

  /* ── 重新排序模式 ── */
  const [reorderMode, setReorderMode] = useState(false)
  const [reorderItems, setReorderItems] = useState<EditPlanClip[]>([])

  /* ── 列定义 ── */
  const columns: ColumnsType<EditPlanClip> = [
    {
      title: "序号",
      dataIndex: "order",
      width: 70,
      render: (_, __, index) => index + 1,
    },
    {
      title: "类型",
      dataIndex: "clip_type",
      width: 100,
      render: (type: string) => {
        const opt = CLIP_TYPE_OPTIONS.find((o) => o.value === type)
        return <Tag>{opt?.label || type}</Tag>
      },
    },
    {
      title: "素材",
      dataIndex: "asset_id",
      width: 150,
      ellipsis: true,
      render: (assetId: string) =>
        assetId ? (
          <code className="clip-asset-id">{assetId.slice(0, 12)}...</code>
        ) : (
          <span style={{ color: "#999" }}>无素材</span>
        ),
    },
    {
      title: "文本内容",
      dataIndex: "text_content",
      ellipsis: true,
      render: (text: string) => text || <span style={{ color: "#999" }}>-</span>,
    },
    {
      title: "时长",
      dataIndex: "duration",
      width: 90,
      render: (d: number) => `${d?.toFixed(1) || 0}s`,
    },
    {
      title: "转场",
      dataIndex: "transition_effect",
      width: 100,
      render: (effect: string) => {
        const opt = TRANSITION_OPTIONS.find((o) => o.value === effect)
        return opt?.label || effect || "硬切"
      },
    },
    {
      title: "播放速度",
      dataIndex: "playback_speed",
      width: 90,
      render: (s: number) => `${s || 1.0}x`,
    },
    {
      title: "状态",
      dataIndex: "status",
      width: 90,
      render: (status: EditPlanClipStatus) => (
        <Tag color={STATUS_COLORS[status] || "default"}>{STATUS_LABELS[status] || status}</Tag>
      ),
    },
    {
      title: "操作",
      key: "action",
      width: 140,
      fixed: "right",
      render: (_, record) => (
        <Space size="small">
          <Button
            type="link"
            size="small"
            icon={<EditOutlined />}
            onClick={() => handleEditClip(record)}
          >
            编辑
          </Button>
          <Popconfirm
            title="删除片段"
            description="确定删除这个片段吗？"
            onConfirm={() => handleDeleteClip(record.id)}
            okText="确定"
            cancelText="取消"
            okButtonProps={{ danger: true }}
          >
            <Button type="link" size="small" danger icon={<DeleteOutlined />}>
              删除
            </Button>
          </Popconfirm>
        </Space>
      ),
    },
  ]

  /* ── 编辑片段 ── */
  const handleEditClip = useCallback(
    (clip: EditPlanClip) => {
      setEditingClip(clip)
      editForm.setFieldsValue({
        clip_type: clip.clip_type,
        asset_id: clip.asset_id,
        text_content: clip.text_content,
        duration: clip.duration,
        start_time: clip.start_time,
        transition_effect: clip.transition_effect,
        transition_duration: clip.transition_duration,
        playback_speed: clip.playback_speed,
      })
      setEditModalOpen(true)
    },
    [editForm],
  )

  const handleNewClip = useCallback(() => {
    setEditingClip(null)
    editForm.resetFields()
    editForm.setFieldsValue({
      clip_type: "main",
      duration: 5,
      transition_effect: "cut",
      transition_duration: 0,
      playback_speed: 1.0,
    })
    setEditModalOpen(true)
  }, [editForm])

  const handleSaveClip = async () => {
    if (!planId) return
    try {
      const values = await editForm.validateFields()
      setEditLoading(true)

      if (editingClip) {
        // 更新
        await updateEditPlanClip(planId, editingClip.id, values)
        message.success("片段已更新")
      } else {
        // 新建
        const maxOrder = clips.length > 0 ? Math.max(...clips.map((c) => c.order)) : -1
        await createEditPlanClip(planId, {
          ...values,
          order: maxOrder + 1,
        })
        message.success("片段已创建")
      }

      queryClient.invalidateQueries({ queryKey: ["editPlanClips", planId] })
      setEditModalOpen(false)
    } catch (err) {
      console.error(err)
      message.error(editingClip ? "更新失败" : "创建失败")
    } finally {
      setEditLoading(false)
    }
  }

  /* ── 删除片段 ── */
  const handleDeleteClip = async (clipId: string) => {
    if (!planId) return
    try {
      await deleteEditPlanClip(planId, clipId)
      message.success("已删除")
      queryClient.invalidateQueries({ queryKey: ["editPlanClips", planId] })
      setSelectedRowKeys((prev) => prev.filter((k) => k !== clipId))
    } catch {
      message.error("删除失败")
    }
  }

  /* ── 批量删除 ── */
  const handleBatchDelete = async () => {
    if (!planId || selectedRowKeys.length === 0) return
    try {
      await batchDeleteEditPlanClips(
        planId,
        selectedRowKeys.map((k) => String(k)),
      )
      message.success(`已删除 ${selectedRowKeys.length} 个片段`)
      queryClient.invalidateQueries({ queryKey: ["editPlanClips", planId] })
      setSelectedRowKeys([])
    } catch {
      message.error("批量删除失败")
    }
  }

  /* ── 从素材导入 ── */
  const handleImportFromAssets = async () => {
    if (!planId || selectedAssetIds.length === 0) return
    try {
      setImportLoading(true)
      const res = await createClipsFromAssets(planId, selectedAssetIds)
      message.success(`已导入 ${res.created_count} 个片段`)
      queryClient.invalidateQueries({ queryKey: ["editPlanClips", planId] })
      setImportDrawerOpen(false)
      setSelectedAssetIds([])
    } catch {
      message.error("导入失败")
    } finally {
      setImportLoading(false)
    }
  }

  /* ── 排序模式 ── */
  const enterReorderMode = () => {
    setReorderItems([...clips].sort((a, b) => a.order - b.order))
    setReorderMode(true)
  }

  const moveClip = (fromIndex: number, toIndex: number) => {
    if (toIndex < 0 || toIndex >= reorderItems.length) return
    const newItems = [...reorderItems]
    const [moved] = newItems.splice(fromIndex, 1)
    newItems.splice(toIndex, 0, moved)
    setReorderItems(newItems)
  }

  const saveReorder = async () => {
    if (!planId) return
    const items = reorderItems.map((clip, index) => ({
      clip_id: clip.id,
      new_order: index,
    }))
    try {
      await reorderEditPlanClips(planId, items)
      message.success("排序已保存")
      queryClient.invalidateQueries({ queryKey: ["editPlanClips", planId] })
      setReorderMode(false)
    } catch {
      message.error("排序保存失败")
    }
  }

  const cancelReorder = () => {
    setReorderMode(false)
    setReorderItems([])
  }

  /* ── 渲染 ── */
  const displayClips = reorderMode ? reorderItems : [...clips].sort((a, b) => a.order - b.order)

  return (
    <div className="plan-clips-page">
      {/* 顶部 */}
      <div className="plan-clips-header">
        <div className="plan-clips-header-left">
          <Button
            type="text"
            icon={<ArrowLeftOutlined />}
            onClick={() => navigate("/app/edit-plans")}
          >
            返回计划列表
          </Button>
          <div className="plan-clips-title">
            <h2>{plan?.name || "加载中..."}</h2>
            <p>
              {planLoading
                ? "加载中..."
                : `共 ${clipsData?.total || 0} 个片段 · ${plan?.status || ""}`}
            </p>
          </div>
        </div>
        <div className="plan-clips-header-right">
          <Space>
            <Button icon={<UploadOutlined />} onClick={() => setImportDrawerOpen(true)}>
              从素材导入
            </Button>
            {reorderMode ? (
              <>
                <Button onClick={cancelReorder}>取消排序</Button>
                <Button type="primary" icon={<SaveOutlined />} onClick={saveReorder}>
                  保存排序
                </Button>
              </>
            ) : (
              <>
                <Button
                  icon={<OrderedListOutlined />}
                  onClick={enterReorderMode}
                  disabled={clips.length === 0}
                >
                  调整顺序
                </Button>
                <Button type="primary" icon={<PlusOutlined />} onClick={handleNewClip}>
                  添加片段
                </Button>
              </>
            )}
          </Space>
        </div>
      </div>

      {/* 批量操作栏 */}
      {!reorderMode && selectedRowKeys.length > 0 && (
        <div className="plan-clips-batch-bar">
          <span>已选择 {selectedRowKeys.length} 个片段</span>
          <Popconfirm
            title="批量删除"
            description={`确定删除选中的 ${selectedRowKeys.length} 个片段吗？`}
            onConfirm={handleBatchDelete}
            okText="确定"
            cancelText="取消"
            okButtonProps={{ danger: true }}
          >
            <Button danger icon={<DeleteOutlined />}>
              批量删除
            </Button>
          </Popconfirm>
        </div>
      )}

      {/* 排序列表 */}
      {reorderMode && (
        <Card className="plan-clips-reorder-card" title="拖拽调整顺序">
          <div className="plan-clips-reorder-list">
            {reorderItems.map((clip, index) => (
              <div key={clip.id} className="plan-clips-reorder-item">
                <span className="reorder-index">{index + 1}</span>
                <span className="reorder-type">
                  {CLIP_TYPE_OPTIONS.find((o) => o.value === clip.clip_type)?.label ||
                    clip.clip_type}
                </span>
                <span className="reorder-content">
                  {clip.text_content || clip.asset_id || "无内容"}
                </span>
                <span className="reorder-duration">{clip.duration.toFixed(1)}s</span>
                <Space>
                  <Button
                    size="small"
                    onClick={() => moveClip(index, index - 1)}
                    disabled={index === 0}
                  >
                    ↑
                  </Button>
                  <Button
                    size="small"
                    onClick={() => moveClip(index, index + 1)}
                    disabled={index === reorderItems.length - 1}
                  >
                    ↓
                  </Button>
                </Space>
              </div>
            ))}
          </div>
        </Card>
      )}

      {/* 片段列表 */}
      {!reorderMode && (
        <div className="plan-clips-table-wrap">
          <Table
            rowKey="id"
            columns={columns}
            dataSource={displayClips}
            loading={clipsLoading}
            rowSelection={{
              selectedRowKeys,
              onChange: setSelectedRowKeys,
            }}
            pagination={false}
            locale={{
              emptyText: (
                <Empty
                  description="暂无片段，点击上方按钮添加或从素材导入"
                  image={Empty.PRESENTED_IMAGE_SIMPLE}
                />
              ),
            }}
            scroll={{ x: 1000 }}
          />
        </div>
      )}

      {/* 编辑弹窗 */}
      <Modal
        title={editingClip ? "编辑片段" : "添加片段"}
        open={editModalOpen}
        onCancel={() => setEditModalOpen(false)}
        onOk={handleSaveClip}
        confirmLoading={editLoading}
        okText="保存"
        cancelText="取消"
        width={560}
      >
        <Form form={editForm} layout="vertical">
          <Form.Item
            label="片段类型"
            name="clip_type"
            rules={[{ required: true, message: "请选择类型" }]}
          >
            <Select options={CLIP_TYPE_OPTIONS} />
          </Form.Item>
          <Form.Item label="素材 ID" name="asset_id">
            <Input placeholder="关联的素材 ID（可选）" />
          </Form.Item>
          <Form.Item label="文本内容" name="text_content">
            <Input.TextArea rows={3} placeholder="字幕/配音文案等" />
          </Form.Item>
          <div style={{ display: "flex", gap: 16 }}>
            <Form.Item label="起始时间（秒）" name="start_time" style={{ flex: 1 }}>
              <InputNumber min={0} step={0.1} style={{ width: "100%" }} />
            </Form.Item>
            <Form.Item label="时长（秒）" name="duration" style={{ flex: 1 }}>
              <InputNumber min={0} step={0.1} style={{ width: "100%" }} />
            </Form.Item>
          </div>
          <div style={{ display: "flex", gap: 16 }}>
            <Form.Item label="转场效果" name="transition_effect" style={{ flex: 1 }}>
              <Select options={TRANSITION_OPTIONS} />
            </Form.Item>
            <Form.Item label="转场时长" name="transition_duration" style={{ flex: 1 }}>
              <InputNumber min={0} step={0.1} style={{ width: "100%" }} />
            </Form.Item>
          </div>
          <Form.Item label="播放速度" name="playback_speed">
            <InputNumber min={0.1} max={10} step={0.1} style={{ width: "100%" }} />
          </Form.Item>
        </Form>
      </Modal>

      {/* 素材导入抽屉 */}
      <Drawer
        title="从素材库导入"
        open={importDrawerOpen}
        onClose={() => setImportDrawerOpen(false)}
        width={480}
        extra={
          <Button
            type="primary"
            onClick={handleImportFromAssets}
            loading={importLoading}
            disabled={selectedAssetIds.length === 0}
          >
            导入 {selectedAssetIds.length > 0 ? `(${selectedAssetIds.length})` : ""}
          </Button>
        }
      >
        {assets && assets.length > 0 ? (
          <div className="asset-import-list">
            {assets.map((asset) => (
              <div
                key={asset.id}
                className={`asset-import-item ${
                  selectedAssetIds.includes(asset.id) ? "selected" : ""
                }`}
                onClick={() => {
                  setSelectedAssetIds((prev) =>
                    prev.includes(asset.id)
                      ? prev.filter((id) => id !== asset.id)
                      : [...prev, asset.id],
                  )
                }}
              >
                <div className="asset-thumb">
                  {asset.thumbnail_url ? (
                    <img src={asset.thumbnail_url} alt={asset.name} />
                  ) : (
                    <div className="asset-thumb-placeholder">{asset.type}</div>
                  )}
                </div>
                <div className="asset-info">
                  <div className="asset-name" title={asset.name}>
                    {asset.name}
                  </div>
                  <div className="asset-meta">
                    {asset.type}
                    {asset.duration ? ` · ${asset.duration.toFixed(1)}s` : ""}
                  </div>
                </div>
              </div>
            ))}
          </div>
        ) : (
          <Empty description="素材库为空" />
        )}
      </Drawer>
    </div>
  )
}

export default PlanClipsManager