import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { Button, Modal, Slider, Spin, Typography } from 'antd';
import { PauseCircleFilled, PlayCircleFilled } from '@ant-design/icons';

const { Text } = Typography;

const MIN_TRIM_SECONDS = 2;
const MAX_TRIM_SECONDS = 15;
const DEFAULT_TRIM_SECONDS = 7;
const FRAME_WIDTH = 160;
const FRAME_HEIGHT = 90;

type VideoTrimPickerProps = {
  open: boolean;
  videoUrl: string;
  title?: string;
  loading?: boolean;
  minDuration?: number;
  maxDuration?: number;
  onCancel: () => void;
  onConfirm: (range: { startSecond: number; endSecond: number; durationSecond: number }) => void | Promise<void>;
};

type FrameItem = {
  second: number;
  captureSecond?: number;
  image: string;
  status: 'loading' | 'success' | 'failed';
  fallback?: boolean;
};

function pad2(value: number): string {
  return String(value).padStart(2, '0');
}

function toIntegerSecond(value: number): number {
  if (!Number.isFinite(value)) return 0;
  return Math.max(0, Math.round(value));
}

function formatTime(secondValue: number): string {
  const total = toIntegerSecond(secondValue);
  const minutes = Math.floor(total / 60);
  const seconds = total % 60;
  return `${pad2(minutes)}:${pad2(seconds)}`;
}

function clamp(value: number, min: number, max: number): number {
  return Math.min(Math.max(value, min), max);
}

function sameRange(a: [number, number], b: [number, number]): boolean {
  return a[0] === b[0] && a[1] === b[1];
}

function waitForEvent(target: EventTarget, eventName: string, timeout = 8000): Promise<void> {
  return new Promise((resolve, reject) => {
    let timer: number | undefined;

    const cleanup = () => {
      if (timer) window.clearTimeout(timer);
      target.removeEventListener(eventName, onOk);
      target.removeEventListener('error', onError);
    };

    const onOk = () => {
      cleanup();
      resolve();
    };

    const onError = () => {
      cleanup();
      reject(new Error(`视频${eventName}失败`));
    };

    target.addEventListener(eventName, onOk, { once: true });
    target.addEventListener('error', onError, { once: true });
    timer = window.setTimeout(() => {
      cleanup();
      reject(new Error(`视频${eventName}超时`));
    }, timeout);
  });
}

function waitNextFrame(): Promise<void> {
  return new Promise((resolve) => {
    window.requestAnimationFrame(() => {
      window.requestAnimationFrame(() => resolve());
    });
  });
}

async function seekVideo(video: HTMLVideoElement, targetSecond: number): Promise<void> {
  const safeTarget = Math.max(0, targetSecond);
  if (Math.abs(video.currentTime - safeTarget) > 0.01) {
    const seeked = waitForEvent(video, 'seeked');
    video.currentTime = safeTarget;
    await seeked;
  }
  await waitNextFrame();
}

function isMostlyBlackFrame(ctx: CanvasRenderingContext2D, width: number, height: number): boolean {
  let data: Uint8ClampedArray;
  try {
    data = ctx.getImageData(0, 0, width, height).data;
  } catch {
    return false;
  }

  let sampled = 0;
  let dark = 0;
  const pixelStride = 8;
  for (let y = 0; y < height; y += pixelStride) {
    for (let x = 0; x < width; x += pixelStride) {
      const index = (y * width + x) * 4;
      const r = data[index];
      const g = data[index + 1];
      const b = data[index + 2];
      const a = data[index + 3];
      if (a < 20) continue;
      const luma = 0.299 * r + 0.587 * g + 0.114 * b;
      sampled += 1;
      if (luma < 18) dark += 1;
    }
  }

  return sampled > 0 && dark / sampled >= 0.85;
}

async function captureOneFrame(
  video: HTMLVideoElement,
  ctx: CanvasRenderingContext2D,
  canvas: HTMLCanvasElement,
  displaySecond: number,
  realDuration: number,
): Promise<FrameItem> {
  const lastSafeSecond = Math.max(0, realDuration - 0.05);
  const candidates = Array.from(
    new Set(
      [displaySecond, displaySecond + 0.2, displaySecond + 0.5, displaySecond + 1, displaySecond + 2]
        .map((value) => Math.min(value, lastSafeSecond))
        .filter((value) => value >= 0 && value <= lastSafeSecond),
    ),
  );

  for (const captureSecond of candidates) {
    try {
      await seekVideo(video, captureSecond);
      ctx.clearRect(0, 0, FRAME_WIDTH, FRAME_HEIGHT);
      ctx.drawImage(video, 0, 0, FRAME_WIDTH, FRAME_HEIGHT);

      if (isMostlyBlackFrame(ctx, FRAME_WIDTH, FRAME_HEIGHT)) {
        continue;
      }

      return {
        second: displaySecond,
        captureSecond,
        image: canvas.toDataURL('image/jpeg', 0.76),
        status: 'success',
        fallback: Math.abs(captureSecond - displaySecond) > 0.01,
      };
    } catch {
      // 当前候选时间失败时继续尝试后面的候选时间。
    }
  }

  return {
    second: displaySecond,
    image: '',
    status: 'failed',
  };
}

function normalizeRange(
  rawRange: [number, number],
  prevRange: [number, number],
  integerDuration: number,
  minDuration: number,
  maxDuration: number,
): [number, number] {
  if (!integerDuration || integerDuration <= 0) {
    return [0, 0];
  }

  const maxSelectableDuration = Math.min(maxDuration, integerDuration);
  const minSelectableDuration = Math.min(minDuration, maxSelectableDuration);

  let [start, end] = rawRange;
  start = toIntegerSecond(clamp(start, 0, integerDuration));
  end = toIntegerSecond(clamp(end, 0, integerDuration));

  if (end < start) {
    [start, end] = [end, start];
  }

  const movedStart = Math.abs(start - prevRange[0]) >= Math.abs(end - prevRange[1]);
  let selectedDuration = end - start;

  if (selectedDuration < minSelectableDuration) {
    if (movedStart) {
      start = toIntegerSecond(clamp(end - minSelectableDuration, 0, Math.max(0, integerDuration - minSelectableDuration)));
      end = start + minSelectableDuration;
    } else {
      end = toIntegerSecond(clamp(start + minSelectableDuration, minSelectableDuration, integerDuration));
      start = end - minSelectableDuration;
    }
  }

  selectedDuration = end - start;
  if (selectedDuration > maxSelectableDuration) {
    if (movedStart) {
      start = toIntegerSecond(clamp(end - maxSelectableDuration, 0, Math.max(0, integerDuration - maxSelectableDuration)));
    } else {
      end = toIntegerSecond(clamp(start + maxSelectableDuration, maxSelectableDuration, integerDuration));
    }
  }

  start = toIntegerSecond(clamp(start, 0, integerDuration));
  end = toIntegerSecond(clamp(end, start, integerDuration));

  return [start, end];
}

function buildInitialRange(integerDuration: number, minDuration: number, maxDuration: number): [number, number] {
  if (!integerDuration || integerDuration <= 0) return [0, minDuration];
  const initialEnd = Math.min(integerDuration, Math.max(minDuration, Math.min(DEFAULT_TRIM_SECONDS, maxDuration)));
  return [0, initialEnd];
}

const VideoTrimPicker: React.FC<VideoTrimPickerProps> = ({
  open,
  videoUrl,
  title = '手动拆镜',
  loading = false,
  minDuration = MIN_TRIM_SECONDS,
  maxDuration = MAX_TRIM_SECONDS,
  onCancel,
  onConfirm,
}) => {
  const videoRef = useRef<HTMLVideoElement | null>(null);
  const abortRef = useRef(false);
  const rangeRef = useRef<[number, number]>([0, minDuration]);
  const currentTimeRef = useRef(0);
  const frameContainerRef = useRef<HTMLDivElement>(null);

  const [duration, setDuration] = useState(0);
  const [currentTime, setCurrentTime] = useState(0);
  const [range, setRangeState] = useState<[number, number]>([0, minDuration]);
  const [frames, setFrames] = useState<FrameItem[]>([]);
  const [frameLoading, setFrameLoading] = useState(false);
  const [playing, setPlaying] = useState(false);
  const [localError, setLocalError] = useState('');

  const integerDuration = useMemo(() => Math.max(0, Math.floor(duration || 0)), [duration]);
  const selectedDuration = useMemo(() => Math.max(0, range[1] - range[0]), [range]);
  const disabledByDuration = integerDuration > 0 && integerDuration < minDuration;

  const setRange = useCallback((next: [number, number] | ((prev: [number, number]) => [number, number])) => {
    setRangeState((prev) => {
      const resolved = typeof next === 'function' ? next(prev) : next;
      if (sameRange(prev, resolved)) return prev;
      rangeRef.current = resolved;
      return resolved;
    });
  }, []);

  const setDisplayedTime = useCallback((second: number) => {
    const next = toIntegerSecond(second);
    if (currentTimeRef.current === next) return;
    currentTimeRef.current = next;
    setCurrentTime(next);
  }, []);

  const seekPreview = useCallback((second: number) => {
    const video = videoRef.current;
    if (!video || !integerDuration) return;
    const next = toIntegerSecond(clamp(second, 0, integerDuration));
    try {
      video.currentTime = next;
    } catch {
      // ignore seek error
    }
    setDisplayedTime(next);
  }, [integerDuration, setDisplayedTime]);

  useEffect(() => {
    if (!open) {
      abortRef.current = true;
      setPlaying(false);
      setFrames([]);
      setFrameLoading(false);
      setDuration(0);
      setDisplayedTime(0);
      setLocalError('');
      setRange([0, minDuration]);
      if (videoRef.current) {
        videoRef.current.pause();
      }
      return;
    }

    abortRef.current = false;
    setPlaying(false);
    setFrameLoading(true);
    setFrames([]);
    setDuration(0);
    setDisplayedTime(0);
    setLocalError('');
    setRange([0, minDuration]);

    const extractor = document.createElement('video');
    extractor.crossOrigin = 'anonymous';
    extractor.muted = true;
    extractor.playsInline = true;
    extractor.preload = 'auto';
    extractor.src = videoUrl;

    const buildFrames = async () => {
      try {
        await waitForEvent(extractor, 'loadedmetadata');
        await waitForEvent(extractor, 'loadeddata').catch(() => undefined);
        if (abortRef.current) return;

        const realDuration = Number.isFinite(extractor.duration) ? extractor.duration : 0;
        const nextIntegerDuration = Math.max(0, Math.floor(realDuration));
        setDuration(realDuration);
        setRange(buildInitialRange(nextIntegerDuration, minDuration, maxDuration));

        if (!realDuration || nextIntegerDuration <= 0) {
          setLocalError('视频时长异常，无法抽取帧');
          return;
        }

        const canvas = document.createElement('canvas');
        canvas.width = FRAME_WIDTH;
        canvas.height = FRAME_HEIGHT;
        const ctx = canvas.getContext('2d', { willReadFrequently: true });
        if (!ctx) {
          setLocalError('当前浏览器不支持 Canvas 抽帧');
          return;
        }

        const initialFrames: FrameItem[] = Array.from({ length: nextIntegerDuration }, (_, index) => ({
          second: index,
          image: '',
          status: 'loading',
        }));
        setFrames(initialFrames);

        const collected = [...initialFrames];
        for (let second = 0; second < nextIntegerDuration; second += 1) {
          if (abortRef.current) return;
          const frame = await captureOneFrame(extractor, ctx, canvas, second, realDuration);
          if (abortRef.current) return;
          collected[second] = frame;
          setFrames([...collected]);
        }
      } catch (error: any) {
        if (!abortRef.current) {
          setLocalError(error?.message || '视频帧抽取失败，请确认视频资源允许跨域访问');
        }
      } finally {
        if (!abortRef.current) {
          setFrameLoading(false);
        }
      }
    };

    buildFrames();

    return () => {
      abortRef.current = true;
      extractor.pause();
      extractor.removeAttribute('src');
      extractor.load();
    };
  }, [open, videoUrl, minDuration, maxDuration, setDisplayedTime, setRange]);

  const handleRangeChange = useCallback((value: number[]) => {
    if (!integerDuration) return;
    setLocalError('');
    const nextRange = [Number(value[0]), Number(value[1])] as [number, number];
    const clamped = [
      Math.max(0, Math.min(integerDuration, nextRange[0])),
      Math.max(nextRange[0], Math.min(integerDuration, nextRange[1])),
    ] as [number, number];
    setRange(clamped);
  }, [integerDuration, setRange]);

  const handleRangeChangeComplete = useCallback(() => {
    seekPreview(rangeRef.current[0]);
  }, [seekPreview]);

  const handleFrameClick = useCallback((second: number) => {
    if (!integerDuration || disabledByDuration) return;
    const keepDuration = clamp(selectedDuration || Math.min(DEFAULT_TRIM_SECONDS, maxDuration), minDuration, Math.min(maxDuration, integerDuration));
    let start = clamp(second, 0, Math.max(0, integerDuration - keepDuration));
    start = toIntegerSecond(start);
    const next: [number, number] = [start, start + keepDuration];
    setRange(next);
    seekPreview(next[0]);
  }, [disabledByDuration, integerDuration, maxDuration, minDuration, seekPreview, selectedDuration, setRange]);

  const handlePlaySelected = async () => {
    const video = videoRef.current;
    if (!video || !integerDuration) return;

    if (playing) {
      video.pause();
      setPlaying(false);
      return;
    }

    if (video.currentTime < range[0] || video.currentTime >= range[1]) {
      video.currentTime = range[0];
      setDisplayedTime(range[0]);
    }

    try {
      await video.play();
      setPlaying(true);
      setLocalError('');
    } catch {
      setLocalError('视频播放失败，请检查视频地址');
    }
  };

  const handleTimeUpdate = () => {
    const video = videoRef.current;
    if (!video) return;

    const current = toIntegerSecond(video.currentTime || 0);
    setDisplayedTime(current);
    if (playing && video.currentTime >= rangeRef.current[1]) {
      video.pause();
      video.currentTime = rangeRef.current[1];
      setDisplayedTime(rangeRef.current[1]);
      setPlaying(false);
    }
  };

  const handleConfirm = async () => {
    if (!integerDuration || integerDuration <= 0) {
      setLocalError('请等待视频加载完成');
      return;
    }
    if (disabledByDuration) {
      setLocalError(`视频总时长不足 ${minDuration} 秒，无法手动拆镜`);
      return;
    }
    if (selectedDuration < minDuration) {
      setLocalError(`拆镜片段不能低于 ${minDuration} 秒`);
      return;
    }
    if (selectedDuration > maxDuration) {
      setLocalError(`拆镜片段不能超过 ${maxDuration} 秒`);
      return;
    }

    setLocalError('');
    await onConfirm({
      startSecond: range[0],
      endSecond: range[1],
      durationSecond: selectedDuration,
    });
  };

  return (
    <Modal
      title={title}
      open={open}
      onCancel={onCancel}
      width={Math.min(window.innerWidth - 40, 1400)}
      destroyOnHidden
      footer={[
        <Button key="cancel" onClick={onCancel} disabled={loading} style={{ borderRadius: 8, border: '1px solid rgba(99, 102, 241, 0.2)', color: '#6366f1' }}>
          取消
        </Button>,
        <Button key="confirm" type="primary" onClick={handleConfirm} loading={loading} disabled={loading || disabledByDuration || !integerDuration} style={{ borderRadius: 8, background: 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)', border: 'none', boxShadow: '0 4px 12px rgba(99, 102, 241, 0.3)' }}>
          确认拆镜
        </Button>,
      ]}
    >
      <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
        <style>{`
          .ant-slider-handle::after {
            height: 80px !important;
            width: 10px !important;
            border-radius: 10px !important;
            top: 95% !important;
            transform: translateY(-50%) !important;
          }
          .ant-slider-handle {
            height: 80px !important;
            margin-top: -37px !important;
          }
        `}</style>
        <div style={{ display: 'flex', justifyContent: 'center', background: '#fff', borderRadius: 16, overflow: 'hidden' }}>
          <video
            ref={videoRef}
            src={videoUrl}
            crossOrigin="anonymous"
            preload="metadata"
            playsInline
            onLoadedMetadata={(event) => {
              const realDuration = Number.isFinite(event.currentTarget.duration) ? event.currentTarget.duration : 0;
              if (!realDuration) return;
              const nextIntegerDuration = Math.max(0, Math.floor(realDuration));
              setDuration((prev) => (Math.floor(prev || 0) === nextIntegerDuration ? prev : realDuration));
              setRange((prev) => {
                if (prev[1] > minDuration || prev[0] !== 0) return prev;
                return buildInitialRange(nextIntegerDuration, minDuration, maxDuration);
              });
            }}
            onTimeUpdate={handleTimeUpdate}
            onPause={() => setPlaying(false)}
            style={{  maxHeight: 320, objectFit: 'contain', background: '#111' }}
          />
        </div>

        <div
          style={{
            borderRadius: 20,
            background: '#f0f5ff',
            padding: '20px 24px',
          }}
        >
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 16, marginBottom: 18 }}>
            <Button
              type="text"
              icon={playing ? <PauseCircleFilled /> : <PlayCircleFilled />}
              onClick={handlePlaySelected}
              disabled={!integerDuration || disabledByDuration}
              style={{ fontSize: 20, color: '#1e293b', padding: 0 }}
            />
            <span style={{ fontSize: 18, color: '#1e293b', fontFamily: 'monospace' }}>
              {formatTime(currentTime)} / {formatTime(integerDuration)}
            </span>
          </div>

          <div
            ref={frameContainerRef}
            style={{
              overflowX: 'auto',
              overflowY: 'hidden',
              scrollbarWidth: 'none',
              msOverflowStyle: 'none',
              padding: '0 6px',
            }}
          >
            <style>{`
              div::-webkit-scrollbar {
                display: none;
              }
            `}</style>
            <div
              style={{
                margin: 'auto',
                display: 'flex',
                flexDirection: 'column',
                width: frames.length > 0 ? `${frames.length * 80 + Math.max(0, frames.length - 1) * 1}px` : '100%',
              }}
            >
              <div
                style={{
                  display: 'flex',
                  height: 86,
                  borderRadius: 12,
                  background: '#fff',
                  gap: 1,
                  position: 'relative',
                }}
              >
                {frameLoading && frames.length === 0 ? (
                  <div style={{ flex: '1 1 auto', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    <Spin size="small" />
                    <Text style={{ marginLeft: 8, color: '#64748b' }}>正在抽取每秒帧...</Text>
                  </div>
                ) : frames.length > 0 ? (
                  frames.map((frame) => {
                    const isSelected = frame.second >= range[0] && frame.second < range[1];
                    return (
                      <button
                        key={frame.second}
                        type="button"
                        onClick={() => handleFrameClick(frame.second)}
                        title={`${frame.second}s${frame.fallback ? `，实际取帧 ${frame.captureSecond?.toFixed(1)}s` : ''}`}
                        style={{
                          minWidth: 80,
                          flex: '0 0 80px',
                          height: 86,
                          borderTop: isSelected ? '5px solid #6366f1' : 'none',
                          borderBottom: isSelected ? '5px solid #6366f1' : 'none',
                          padding: 0,
                          background: 'transparent',
                          overflow: 'hidden',
                          cursor: disabledByDuration ? 'not-allowed' : 'pointer',
                          position: 'relative',
                        }}
                      >
                      {frame.status === 'success' && frame.image ? (
                        <img src={frame.image} alt={`${frame.second}s`} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
                      ) : frame.status === 'loading' ? (
                        <div style={{ width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                          <Spin size="small" />
                        </div>
                      ) : (
                        <div style={{ width: '100%', height: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', color: '#64748b', fontSize: 12, background: '#fff' }}>
                          <span>{frame.second}s</span>
                          <span style={{ fontSize: 11 }}>无有效帧</span>
                        </div>
                      )}
                      <span
                        style={{
                          position: 'absolute',
                          left: 0,
                          bottom: 3,
                          color: '#ffffffff',
                          fontSize: 16,
                          textShadow: '0 1px 3px rgba(0,0,0,.7)',
                        }}
                      >
                        {frame.second}s
                      </span>
                    </button>
                    );
                  })
                ) : (
                  <div style={{ flex: '1 1 auto', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#64748b' }}>
                    暂无帧预览，请确认视频是否加载完成
                  </div>
                )}

                <div
                  style={{
                    position: 'absolute',
                    top: -10,
                    left: 0,
                    right: 0,
                    bottom: 0,
                  }}
                >
                  <Slider
                    range
                    min={0}
                    max={integerDuration || maxDuration}
                    step={1}
                    value={range}
                    onChange={handleRangeChange}
                    onChangeComplete={handleRangeChangeComplete}
                    tooltip={{ formatter: (value) => `${toIntegerSecond(Number(value || 0))}s` }}
                    disabled={!integerDuration || disabledByDuration}
                    styles={{
                      track: {
                        background: '#6969dd63',
                        height: 86,
                        borderRadius: 12,
                        margin: '0 ',
                      },
                      rail: {
                        height: 86,
                        borderRadius: 12,
                      },
                      handle: {
                        width: 20,
                        height: 86,
                        marginTop: 0,
                        borderRadius: '50%',
                      },
                    }}
                  />
                </div>
              </div>
            </div>
          </div>

          <div style={{ marginTop: 16, textAlign: 'center', color: '#64748b', fontSize: 14 }}>
            已选取 {selectedDuration}s
          </div>

          {localError && (
            <div style={{ marginTop: 12, padding: '10px 14px', borderRadius: 8, background: 'rgba(239, 68, 68, 0.08)', border: '1px solid rgba(239, 68, 68, 0.15)', color: '#ef4444', fontSize: 13, textAlign: 'center' }}>
              {localError}
            </div>
          )}
        </div>
      </div>
    </Modal>
  );
};

export default VideoTrimPicker;