import { useCallback, useEffect, useState } from "react";
import {
  CloseOutlined,
  DeleteOutlined,
  ExclamationCircleOutlined,
  HistoryOutlined,
  LoadingOutlined,
  PlayCircleOutlined,
} from "@ant-design/icons";
import {
  fetchVideoHistory,
  deleteVideoHistory,
  type VideoHistoryItem,
} from "../ecommerceVideoService";

interface EcommerceVideoHistoryPanelProps {
  visible: boolean;
  onClose: () => void;
}

export default function EcommerceVideoHistoryPanel({
  visible,
  onClose,
}: EcommerceVideoHistoryPanelProps) {
  const [items, setItems] = useState<VideoHistoryItem[]>([]);
  const [total, setTotal] = useState(0);
  const [loading, setLoading] = useState(false);
  const [offset, setOffset] = useState(0);
  const [previewMedia, setPreviewMedia] = useState<{
    url: string;
    type: "image" | "video";
  } | null>(null);
  const [confirmDeleteId, setConfirmDeleteId] = useState<number | null>(null);
  const limit = 10;

  const load = useCallback(async (off: number) => {
    setLoading(true);
    try {
      const res = await fetchVideoHistory(limit, off);
      setItems(res.items);
      setTotal(res.total);
      setOffset(off);
    } catch { /* silent */ }
    setLoading(false);
  }, []);

  useEffect(() => {
    if (visible) load(0);
  }, [visible, load]);

  const handleDelete = async (id: number) => {
    try {
      await deleteVideoHistory(id);
      setItems((prev) => prev.filter((i) => i.id !== id));
      setTotal((t) => t - 1);
    } catch { /* silent */ }
    setConfirmDeleteId(null);
  };

  if (!visible) return null;

  const totalPages = Math.ceil(total / limit);
  const currentPage = Math.floor(offset / limit) + 1;

  return (
    <>
      <div className="ecom-video-history-panel">
        <div className="ecom-video-history-panel__header">
          <HistoryOutlined />
          <span>生成记录</span>
          <button className="ecom-video-history-panel__close" onClick={onClose}>
            <CloseOutlined />
          </button>
        </div>

        <div className="ecom-video-history-panel__body">
          {loading && !items.length ? (
            <div className="ecom-video-history-panel__empty">
              <LoadingOutlined style={{ fontSize: 24 }} />
              <span>加载中...</span>
            </div>
          ) : !items.length ? (
            <div className="ecom-video-history-panel__empty">
              <HistoryOutlined style={{ fontSize: 32, opacity: 0.3 }} />
              <span>暂无生成记录</span>
            </div>
          ) : (
            items.map((item) => (
              <div key={item.id} className="ecom-video-history-card">
                <div className="ecom-video-history-card__header">
                  <span className="ecom-video-history-card__title">
                    {item.title || "未命名"}
                  </span>
                  <span className="ecom-video-history-card__date">
                    {new Date(item.createdAt).toLocaleDateString("zh-CN")}
                  </span>
                  <button
                    className="ecom-video-history-card__delete"
                    onClick={() => setConfirmDeleteId(item.id)}
                    title="删除"
                  >
                    <DeleteOutlined />
                  </button>
                </div>
                <div className="ecom-video-history-card__scenes">
                  {item.scenes.map((scene, idx) => (
                    <div key={idx} className="ecom-video-history-card__scene">
                      {scene.imageUrl && (
                        <img
                          src={scene.imageUrl}
                          alt={`分镜${idx + 1}`}
                          onClick={() =>
                            setPreviewMedia({ url: scene.imageUrl!, type: "image" })
                          }
                        />
                      )}
                      {scene.videoUrl && (
                        <div
                          className="ecom-video-history-card__video-thumb"
                          onClick={() =>
                            setPreviewMedia({ url: scene.videoUrl!, type: "video" })
                          }
                        >
                          <PlayCircleOutlined />
                        </div>
                      )}
                    </div>
                  ))}
                </div>
              </div>
            ))
          )}
        </div>

        {totalPages > 1 && (
          <div className="ecom-video-history-panel__pager">
            <button disabled={currentPage <= 1} onClick={() => load(offset - limit)}>
              上一页
            </button>
            <span>{currentPage}/{totalPages}</span>
            <button disabled={currentPage >= totalPages} onClick={() => load(offset + limit)}>
              下一页
            </button>
          </div>
        )}
      </div>

      {confirmDeleteId !== null && (
        <div className="ecom-video-confirm-dialog-backdrop" onClick={() => setConfirmDeleteId(null)}>
          <div className="ecom-video-confirm-dialog" onClick={(e) => e.stopPropagation()}>
            <ExclamationCircleOutlined className="ecom-video-confirm-dialog__icon" />
            <p className="ecom-video-confirm-dialog__text">
              确定要删除这条记录吗？相关的图片和视频文件也将被永久删除，此操作不可恢复。
            </p>
            <div className="ecom-video-confirm-dialog__actions">
              <button onClick={() => setConfirmDeleteId(null)}>取消</button>
              <button className="is-danger" onClick={() => handleDelete(confirmDeleteId)}>
                删除
              </button>
            </div>
          </div>
        </div>
      )}

      {previewMedia && (
        <div
          className="ecom-video-preview-overlay"
          onClick={() => setPreviewMedia(null)}
        >
          <button
            className="ecom-video-preview-overlay__close"
            onClick={() => setPreviewMedia(null)}
          >
            <CloseOutlined />
          </button>
          {previewMedia.type === "image" ? (
            <img src={previewMedia.url} alt="preview" />
          ) : (
            <video src={previewMedia.url} controls autoPlay />
          )}
        </div>
      )}
    </>
  );
}
