/**
 * 成品库 — 产品详情页
 * 路由：/app/products/:id
 * 展示视频播放器 + 完整元数据 + 下载/分享/删除操作
 */
import React, { useRef, useState, useEffect, useCallback } from "react";
import { useParams, useNavigate } from "react-router-dom";
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
import {
  ArrowLeftOutlined,
  DownloadOutlined,
  ShareAltOutlined,
  DeleteOutlined,
  PlayCircleFilled,
  PauseCircleFilled,
  SoundOutlined,
  MutedOutlined,
  ExpandOutlined,
  LoadingOutlined,
  WarningOutlined,
} from "@ant-design/icons";
import {
  getProduct,
  deleteProduct,
  getProductDownloadUrl,
  type ProductItem,
} from "../../api/products";
import { Button } from "../../components/ui";
import "./products.css";

/* ============================================================
 * 工具函数
 * ============================================================ */

/** 格式化时长（秒 → "MM:SS"） */
const formatDuration = (seconds: number): string => {
  if (!seconds || seconds <= 0) return "00:00";
  const m = Math.floor(seconds / 60);
  const s = Math.floor(seconds % 60);
  return `${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}`;
};

/** 格式化文件大小（MB） */
const formatFileSize = (mb: number): string => {
  if (!mb || mb <= 0) return "-";
  if (mb < 1024) return `${mb.toFixed(1)} MB`;
  return `${(mb / 1024).toFixed(2)} GB`;
};

/** 格式化日期 */
const formatDate = (dateStr: string): string => {
  if (!dateStr) return "-";
  const d = new Date(dateStr);
  return d.toLocaleDateString("zh-CN", {
    year: "numeric",
    month: "2-digit",
    day: "2-digit",
    hour: "2-digit",
    minute: "2-digit",
  });
};

/** 状态标签 */
const STATUS_MAP: Record<string, { label: string; color: string }> = {
  completed: { label: "已完成", color: "#10b981" },
  processing: { label: "处理中", color: "#6366f1" },
  pending: { label: "待处理", color: "#f59e0b" },
  failed: { label: "失败", color: "#ef4444" },
};

/* ============================================================
 * 主组件
 * ============================================================ */
const ProductDetail: React.FC = () => {
  const { id } = useParams<{ id: string }>();
  const navigate = useNavigate();
  const queryClient = useQueryClient();

  /* ── 获取产品详情 ── */
  const {
    data: product,
    isLoading,
    isError,
    error,
  } = useQuery<ProductItem, Error>({
    queryKey: ["product", id],
    queryFn: () => getProduct(id!),
    enabled: !!id,
    staleTime: 10_000,
  });

  /* ── 删除 mutation ── */
  const deleteMutation = useMutation({
    mutationFn: () => deleteProduct(id!),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["products"] });
      navigate("/app/products");
    },
  });

  /* ── 视频播放器状态 ── */
  const videoRef = useRef<HTMLVideoElement>(null);
  const progressRef = useRef<HTMLDivElement>(null);
  const hideTimerRef = useRef<ReturnType<typeof setTimeout>>();

  const [isPlaying, setIsPlaying] = useState(false);
  const [currentTime, setCurrentTime] = useState(0);
  const [duration, setDuration] = useState(0);
  const [buffered, setBuffered] = useState(0);
  const [volume, setVolume] = useState(1);
  const [isMuted, setIsMuted] = useState(false);
  const [showControls, setShowControls] = useState(true);
  const [isFullscreen, setIsFullscreen] = useState(false);
  const containerRef = useRef<HTMLDivElement>(null);

  /* ── 自动隐藏控制条 ── */
  const resetHideTimer = useCallback(() => {
    setShowControls(true);
    if (hideTimerRef.current) clearTimeout(hideTimerRef.current);
    if (isPlaying) {
      hideTimerRef.current = setTimeout(() => setShowControls(false), 3000);
    }
  }, [isPlaying]);

  /* ── 播放控制 ── */
  const togglePlay = useCallback(() => {
    const v = videoRef.current;
    if (!v) return;
    if (v.paused) {
      v.play().catch(() => {});
    } else {
      v.pause();
    }
  }, []);

  const handleSeek = useCallback(
    (e: React.MouseEvent<HTMLDivElement>) => {
      const v = videoRef.current;
      const bar = progressRef.current;
      if (!v || !bar || !duration) return;
      const rect = bar.getBoundingClientRect();
      const ratio = Math.max(
        0,
        Math.min(1, (e.clientX - rect.left) / rect.width),
      );
      v.currentTime = ratio * duration;
    },
    [duration],
  );

  const handleVolumeChange = useCallback(
    (e: React.ChangeEvent<HTMLInputElement>) => {
      const v = videoRef.current;
      const val = parseFloat(e.target.value);
      if (v) v.volume = val;
      setVolume(val);
      setIsMuted(val === 0);
    },
    [],
  );

  const toggleMute = useCallback(() => {
    const v = videoRef.current;
    if (!v) return;
    if (isMuted) {
      v.muted = false;
      v.volume = volume || 1;
      setIsMuted(false);
    } else {
      v.muted = true;
      setIsMuted(true);
    }
  }, [isMuted, volume]);

  const toggleFullscreen = useCallback(() => {
    const el = containerRef.current;
    if (!el) return;
    if (!document.fullscreenElement) {
      el.requestFullscreen?.().catch(() => {});
    } else {
      document.exitFullscreen?.().catch(() => {});
    }
  }, []);

  /* ── 视频事件监听 ── */
  useEffect(() => {
    const v = videoRef.current;
    if (!v) return;

    const onPlay = () => setIsPlaying(true);
    const onPause = () => setIsPlaying(false);
    const onTimeUpdate = () => setCurrentTime(v.currentTime);
    const onLoadedMetadata = () => setDuration(v.duration);
    const onProgress = () => {
      if (v.buffered.length > 0) {
        setBuffered(v.buffered.end(v.buffered.length - 1));
      }
    };
    const onEnded = () => setIsPlaying(false);
    const onFSChange = () => setIsFullscreen(!!document.fullscreenElement);

    v.addEventListener("play", onPlay);
    v.addEventListener("pause", onPause);
    v.addEventListener("timeupdate", onTimeUpdate);
    v.addEventListener("loadedmetadata", onLoadedMetadata);
    v.addEventListener("progress", onProgress);
    v.addEventListener("ended", onEnded);
    document.addEventListener("fullscreenchange", onFSChange);

    return () => {
      v.removeEventListener("play", onPlay);
      v.removeEventListener("pause", onPause);
      v.removeEventListener("timeupdate", onTimeUpdate);
      v.removeEventListener("loadedmetadata", onLoadedMetadata);
      v.removeEventListener("progress", onProgress);
      v.removeEventListener("ended", onEnded);
      document.removeEventListener("fullscreenchange", onFSChange);
    };
  }, []);

  /* 播放时自动隐藏/显示控制条 */
  useEffect(() => {
    resetHideTimer();
    return () => {
      if (hideTimerRef.current) clearTimeout(hideTimerRef.current);
    };
  }, [isPlaying, resetHideTimer]);

  /* ── 下载 ── */
  const handleDownload = async () => {
    if (!product || product.status !== "completed") return;
    try {
      const { url } = await getProductDownloadUrl(product.id);
      const a = document.createElement("a");
      a.href = url;
      a.download = "";
      a.click();
    } catch {
      // message.error handled by caller
    }
  };

  /* ── 分享 ── */
  const handleShare = () => {
    if (!product) return;
    const link = `${window.location.origin}/app/products/${product.id}`;
    navigator.clipboard?.writeText(link).then(
      () => {},
      () => {},
    );
  };

  /* ── 删除 ── */
  const handleDelete = () => {
    if (!id) return;
    deleteMutation.mutate();
  };

  /* ── 加载状态 ── */
  if (isLoading) {
    return (
      <div className="xx-page xx-product-detail-page">
        <div className="xx-detail-loading">
          <LoadingOutlined
            style={{ fontSize: 32, color: "var(--primary-color)" }}
            spin
          />
          <p style={{ color: "var(--text-secondary)", marginTop: 16 }}>
            加载中…
          </p>
        </div>
      </div>
    );
  }

  /* ── 错误状态 ── */
  if (isError || !product) {
    return (
      <div className="xx-page xx-product-detail-page">
        <div className="xx-detail-error">
          <WarningOutlined
            style={{ fontSize: 48, color: "var(--error-color)" }}
          />
          <h3>加载失败</h3>
          <p>{error?.message || "无法获取产品信息"}</p>
          <Button
            buttonType="ghost"
            buttonSize="md"
            onClick={() => navigate("/app/products")}
          >
            <ArrowLeftOutlined /> 返回成品库
          </Button>
        </div>
      </div>
    );
  }

  const statusInfo = STATUS_MAP[product.status] || {
    label: product.status,
    color: "#94a3b8",
  };
  const progress = Math.round((currentTime / (duration || 1)) * 100);
  const bufferedPct = Math.round((buffered / (duration || 1)) * 100);

  return (
    <div className="xx-page xx-product-detail-page">
      {/* ── 顶部导航 ── */}
      <div className="xx-detail-header">
        <button
          className="xx-detail-back-btn"
          onClick={() => navigate("/app/products")}
        >
          <ArrowLeftOutlined /> 返回成品库
        </button>
        <div className="xx-detail-actions">
          <Button
            buttonType="ghost"
            buttonSize="sm"
            icon={<DownloadOutlined />}
            onClick={handleDownload}
            disabled={product.status !== "completed"}
          >
            下载
          </Button>
          <Button
            buttonType="ghost"
            buttonSize="sm"
            icon={<ShareAltOutlined />}
            onClick={handleShare}
            disabled={product.status !== "completed"}
          >
            分享
          </Button>
          <Button
            buttonType="danger"
            buttonSize="sm"
            icon={<DeleteOutlined />}
            onClick={handleDelete}
            loading={deleteMutation.isPending}
          >
            删除
          </Button>
        </div>
      </div>

      {/* ── 主体内容 ── */}
      <div className="xx-detail-body">
        {/* 视频播放器 */}
        <div
          ref={containerRef}
          className={`xx-detail-player ${isFullscreen ? "is-fullscreen" : ""}`}
          onMouseMove={resetHideTimer}
          onClick={togglePlay}
        >
          {product.video_url ? (
            <video
              ref={videoRef}
              src={product.video_url}
              poster={product.thumbnail_url || undefined}
              playsInline
              preload="metadata"
            />
          ) : (
            <div className="xx-detail-player-empty">
              {product.thumbnail_url ? (
                <img src={product.thumbnail_url} alt={product.title} />
              ) : (
                <div className="xx-detail-player-placeholder">
                  <PlayCircleFilled
                    style={{ fontSize: 64, color: "var(--text-tertiary)" }}
                  />
                  <p>视频暂不可用</p>
                </div>
              )}
            </div>
          )}

          {/* 控制条 */}
          <div
            className={`xx-detail-player-controls ${showControls || !isPlaying ? "visible" : ""}`}
            onClick={(e) => e.stopPropagation()}
          >
            {/* 进度条 */}
            <div
              className="xx-dp-progress"
              ref={progressRef}
              onClick={handleSeek}
            >
              <div className="xx-dp-progress-track">
                <div
                  className="xx-dp-progress-buffered"
                  style={{ width: `${bufferedPct}%` }}
                />
                <div
                  className="xx-dp-progress-played"
                  style={{ width: `${progress}%` }}
                />
              </div>
            </div>

            <div className="xx-dp-bar">
              {/* 左：播放/暂停 */}
              <button className="xx-dp-btn" onClick={togglePlay}>
                {isPlaying ? <PauseCircleFilled /> : <PlayCircleFilled />}
              </button>

              {/* 时间 */}
              <span className="xx-dp-time">
                {formatDuration(currentTime)} / {formatDuration(duration)}
              </span>

              <div style={{ flex: 1 }} />

              {/* 音量 */}
              <div className="xx-dp-volume">
                <button className="xx-dp-btn" onClick={toggleMute}>
                  {isMuted ? <MutedOutlined /> : <SoundOutlined />}
                </button>
                <input
                  type="range"
                  min={0}
                  max={1}
                  step={0.05}
                  value={isMuted ? 0 : volume}
                  onChange={handleVolumeChange}
                  className="xx-dp-volume-slider"
                />
              </div>

              {/* 全屏 */}
              <button className="xx-dp-btn" onClick={toggleFullscreen}>
                <ExpandOutlined />
              </button>
            </div>
          </div>
        </div>

        {/* 产品信息 */}
        <div className="xx-detail-info">
          <h1 className="xx-detail-title">{product.title}</h1>

          <div className="xx-detail-meta-grid">
            <div className="xx-detail-meta-item">
              <span className="xx-detail-meta-label">状态</span>
              <span
                className="xx-detail-meta-value"
                style={{ color: statusInfo.color }}
              >
                {statusInfo.label}
              </span>
            </div>
            <div className="xx-detail-meta-item">
              <span className="xx-detail-meta-label">时长</span>
              <span className="xx-detail-meta-value">
                {formatDuration(product.duration_seconds ?? 0)}
              </span>
            </div>
            <div className="xx-detail-meta-item">
              <span className="xx-detail-meta-label">分辨率</span>
              <span className="xx-detail-meta-value">
                {product.resolution || "-"}
              </span>
            </div>
            <div className="xx-detail-meta-item">
              <span className="xx-detail-meta-label">文件大小</span>
              <span className="xx-detail-meta-value">
                {formatFileSize(product.file_size ?? 0)}
              </span>
            </div>
            <div className="xx-detail-meta-item">
              <span className="xx-detail-meta-label">查重率</span>
              <span className="xx-detail-meta-value">
                {(product.duplicate_rate ?? 0) > 0
                  ? `${(product.duplicate_rate ?? 0).toFixed(1)}%`
                  : "-"}
              </span>
            </div>
            <div className="xx-detail-meta-item">
              <span className="xx-detail-meta-label">创建时间</span>
              <span className="xx-detail-meta-value">
                {formatDate(product.created_at ?? "")}
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default ProductDetail;
