"use client";

import {
  useEffect,
  useId,
  useMemo,
  useRef,
  useState,
  type CSSProperties,
  type KeyboardEvent,
  type PointerEvent,
} from "react";
import styles from "./timeline.module.css";

export interface TimelineTranscript {
  role: "agent" | "user";
  start_ms: number;
  end_ms: number;
  transcript: string;
}

export interface TimelineAnnotation {
  id: string;
  decision_ms: number;
  can_reply_now: "1" | "0" | "";
  reason?: string;
}

export interface TimelineProps {
  durationMs: number;
  currentMs: number;
  decisionMs: number | null;
  transcripts: TimelineTranscript[];
  annotations: TimelineAnnotation[];
  selectedId: string | null;
  waveform: number[] | null;
  readOnly?: boolean;
  onSeek: (ms: number) => void;
  onDecisionChange: (ms: number) => void;
  onSelectAnnotation: (id: string) => void;
}

const ZOOM_LEVELS = [1, 2, 4, 8];
const TICK_STEPS = [100, 200, 500, 1_000, 2_000, 5_000, 10_000, 15_000, 30_000, 60_000, 120_000, 300_000, 600_000];

function finite(value: number, fallback = 0) {
  return Number.isFinite(value) ? value : fallback;
}

function timeLabel(ms: number, showMilliseconds = false) {
  const bounded = Math.max(0, Math.round(ms));
  const minutes = Math.floor(bounded / 60_000);
  const seconds = Math.floor((bounded % 60_000) / 1_000);
  const fraction = String(bounded % 1_000).padStart(3, "0");
  return `${String(minutes).padStart(2, "0")}:${String(seconds).padStart(2, "0")}${showMilliseconds ? `.${fraction}` : ""}`;
}

function annotationLabel(value: TimelineAnnotation["can_reply_now"], reason?: string) {
  return value === "1" ? "可以接话" : value === "0" ? "继续等待" : reason ? "待仲裁" : "待标注";
}

export default function Timeline({
  durationMs,
  currentMs,
  decisionMs,
  transcripts,
  annotations,
  selectedId,
  waveform,
  readOnly = false,
  onSeek,
  onDecisionChange,
  onSelectAnnotation,
}: TimelineProps) {
  const helpId = useId();
  const rangeId = useId();
  const viewportRef = useRef<HTMLDivElement>(null);
  const canvasRef = useRef<HTMLDivElement>(null);
  const draggingRef = useRef<{ kind: "seek" | "decision"; pointerId: number } | null>(null);
  const zoomAnchorRef = useRef<number | null>(null);
  const [viewportWidth, setViewportWidth] = useState(800);
  const [zoom, setZoom] = useState(1);

  const duration = Math.max(
    1_000,
    finite(durationMs),
    ...transcripts.map((item) => finite(item.end_ms)),
    ...annotations.map((item) => finite(item.decision_ms)),
    finite(decisionMs ?? 0),
  );
  const canvasWidth = Math.max(360, viewportWidth) * zoom;
  const clamp = (value: number) => Math.round(Math.max(0, Math.min(duration, finite(value))));
  const current = clamp(currentMs);
  const decision = decisionMs === null ? null : clamp(decisionMs);
  const position = (ms: number) => (clamp(ms) / duration) * canvasWidth;
  const selectedAnnotation = annotations.find((item) => item.id === selectedId);

  useEffect(() => {
    const viewport = viewportRef.current;
    if (!viewport) return;
    const updateSize = () => setViewportWidth(viewport.clientWidth);
    updateSize();
    const observer = new ResizeObserver(updateSize);
    observer.observe(viewport);
    return () => observer.disconnect();
  }, []);

  useEffect(() => {
    if (zoomAnchorRef.current === null || !viewportRef.current) return;
    viewportRef.current.scrollLeft = zoomAnchorRef.current * canvasWidth - viewportWidth / 2;
    zoomAnchorRef.current = null;
  }, [canvasWidth, viewportWidth]);

  const ticks = useMemo(() => {
    const desiredStep = (duration / canvasWidth) * 90;
    const step = TICK_STEPS.find((item) => item >= desiredStep) ?? Math.ceil(desiredStep / 600_000) * 600_000;
    const result = [];
    for (let time = 0; time <= duration; time += step) result.push({ time, label: timeLabel(time, step < 1_000) });
    return result;
  }, [duration, canvasWidth]);

  const waveformPath = useMemo(() => {
    if (!waveform?.length) return "";
    // Each visible bar is the maximum of a real sample bucket. No generated peaks.
    const barCount = Math.min(waveform.length, Math.ceil(canvasWidth / 3), 3_200);
    const bucketSize = waveform.length / barCount;
    let path = "";
    for (let bar = 0; bar < barCount; bar++) {
      const start = Math.floor(bar * bucketSize);
      const end = Math.min(waveform.length, Math.ceil((bar + 1) * bucketSize));
      let peak = 0;
      for (let index = start; index < end; index++) peak = Math.max(peak, Math.min(1, Math.abs(finite(waveform[index]))));
      const x = ((bar + 0.5) / barCount) * canvasWidth;
      const halfHeight = Math.max(0.75, peak * 28);
      path += `M${x.toFixed(2)},${(38 - halfHeight).toFixed(2)}v${(halfHeight * 2).toFixed(2)}`;
    }
    return path;
  }, [waveform, canvasWidth]);

  function changeZoom(nextZoom: number) {
    const viewport = viewportRef.current;
    if (viewport) zoomAnchorRef.current = (viewport.scrollLeft + viewport.clientWidth / 2) / canvasWidth;
    setZoom(nextZoom);
  }

  function locateDecision() {
    if (decision === null || !viewportRef.current) return;
    viewportRef.current.scrollTo({ left: position(decision) - viewportWidth / 2, behavior: "smooth" });
  }

  function pointerTime(event: PointerEvent<HTMLElement>) {
    const bounds = canvasRef.current?.getBoundingClientRect();
    if (!bounds) return current;
    return clamp(((event.clientX - bounds.left) / bounds.width) * duration);
  }

  function beginDrag(event: PointerEvent<HTMLElement>, kind: "seek" | "decision") {
    if (event.button !== 0 || (kind === "decision" && (decision === null || readOnly))) return;
    event.preventDefault();
    event.stopPropagation();
    event.currentTarget.focus({ preventScroll: true });
    event.currentTarget.setPointerCapture(event.pointerId);
    draggingRef.current = { kind, pointerId: event.pointerId };
    if (kind === "seek") onSeek(pointerTime(event));
  }

  function moveDrag(event: PointerEvent<HTMLElement>) {
    const drag = draggingRef.current;
    if (!drag || drag.pointerId !== event.pointerId) return;
    event.stopPropagation();
    const ms = pointerTime(event);
    if (drag.kind === "seek") onSeek(ms);
    else onDecisionChange(ms);
    // Keep the pointer near the visible edge usable while a zoomed track scrolls.
    const viewport = viewportRef.current;
    if (viewport) {
      const bounds = viewport.getBoundingClientRect();
      if (event.clientX > bounds.right - 24) viewport.scrollLeft += 14;
      else if (event.clientX < bounds.left + 24) viewport.scrollLeft -= 14;
    }
  }

  function endDrag(event: PointerEvent<HTMLElement>) {
    if (draggingRef.current?.pointerId !== event.pointerId) return;
    draggingRef.current = null;
    if (event.currentTarget.hasPointerCapture(event.pointerId)) event.currentTarget.releasePointerCapture(event.pointerId);
  }

  function keyboardMove(event: KeyboardEvent<HTMLElement>, kind: "seek" | "decision") {
    if (kind === "decision" && readOnly) return;
    const base = kind === "seek" ? current : decision;
    if (base === null) return;
    const increment = event.shiftKey ? 1_000 : event.altKey ? 10 : 100;
    let next: number | null = null;
    if (["ArrowLeft", "ArrowDown", "-"].includes(event.key)) next = base - increment;
    if (["ArrowRight", "ArrowUp", "+", "="].includes(event.key)) next = base + increment;
    if (event.key === "Home") next = 0;
    if (event.key === "End") next = duration;
    if (next === null) return;
    event.preventDefault();
    event.stopPropagation();
    if (kind === "seek") onSeek(clamp(next));
    else onDecisionChange(clamp(next));
  }

  const trackStyle = { "--timeline-width": `${canvasWidth}px` } as CSSProperties;

  return (
    <section className={styles.timeline} aria-label="对话时间轴">
      <div className={styles.toolbar}>
        <div className={styles.toolbarTitle}>
          <span className={styles.title}>对话时间轴</span>
          <span className={styles.duration}>{timeLabel(duration)} <span>总时长</span></span>
        </div>
        <div className={styles.tools}>
          <button className={styles.locate} type="button" onClick={locateDecision} disabled={decision === null} title="将当前判断点移到视图中央">
            <span aria-hidden="true">⌖</span> 定位判断点
          </button>
          <div className={styles.zoom} aria-label="时间轴缩放">
            <button type="button" aria-label="缩小时间轴" disabled={zoom === 1} onClick={() => changeZoom(ZOOM_LEVELS[ZOOM_LEVELS.indexOf(zoom) - 1])}>−</button>
            <span aria-live="polite">{zoom}×</span>
            <button type="button" aria-label="放大时间轴" disabled={zoom === 8} onClick={() => changeZoom(ZOOM_LEVELS[ZOOM_LEVELS.indexOf(zoom) + 1])}>+</button>
          </div>
        </div>
      </div>

      <div className={styles.trackLayout}>
        <div className={styles.trackNames} aria-hidden="true">
          <div className={styles.rulerName}>时间</div>
          <div className={styles.waveName}>录音</div>
          <div className={styles.speechName}><span className={styles.agentDot} />机器人</div>
          <div className={styles.speechName}><span className={styles.userDot} />用户</div>
          <div className={styles.markerName}>判断点</div>
        </div>
        <div className={styles.viewport} ref={viewportRef}>
          <div
            className={styles.canvas}
            style={trackStyle}
            ref={canvasRef}
            tabIndex={0}
            role="group"
            aria-label={`播放位置 ${timeLabel(current, true)}：点击或拖动时间轴定位，方向键微调，Home 到开头，End 到结尾`}
            onPointerDown={(event) => beginDrag(event, "seek")}
            onPointerMove={moveDrag}
            onPointerUp={endDrag}
            onPointerCancel={endDrag}
            onLostPointerCapture={() => { draggingRef.current = null; }}
            onKeyDown={(event) => keyboardMove(event, "seek")}
          >
            <div className={styles.ruler} aria-hidden="true">
              {ticks.map((tick) => <span key={tick.time} className={styles.tick} style={{ left: position(tick.time) }}>{tick.label}</span>)}
            </div>

            <div className={styles.waveTrack}>
              {waveformPath ? (
                <svg className={styles.waveform} viewBox={`0 0 ${canvasWidth} 76`} preserveAspectRatio="none" role="img" aria-label="录音真实振幅波形">
                  <path d={waveformPath} fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" />
                </svg>
              ) : (
                <div className={styles.waveEmpty} style={{ width: viewportWidth }}>
                  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M4 10v4m4-7v10m4-13v16m4-13v10m4-7v4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" /></svg>
                  <span>载入录音后显示波形</span>
                </div>
              )}
            </div>

            {(["agent", "user"] as const).map((role) => (
              <div className={styles.speechTrack} key={role} aria-label={role === "agent" ? "机器人发言" : "用户发言"}>
                {transcripts.filter((item) => item.role === role).map((item, index) => {
                  const start = position(item.start_ms);
                  const end = position(item.end_ms);
                  return <span
                    key={`${role}-${item.start_ms}-${index}`}
                    className={`${styles.speechBlock} ${role === "agent" ? styles.agentBlock : styles.userBlock}`}
                    style={{ left: start, width: Math.max(3, end - start) }}
                    title={`${role === "agent" ? "机器人" : "用户"} · ${timeLabel(item.start_ms, true)}—${timeLabel(item.end_ms, true)}\n${item.transcript}`}
                  ><span>{item.transcript}</span></span>;
                })}
              </div>
            ))}

            <div className={styles.annotationTrack} aria-label="已保存的 EOT 标注">
              {annotations.filter((item) => item.id !== selectedId).map((item, index) => (
                <button
                  type="button"
                  key={item.id}
                  className={`${styles.annotation} ${item.can_reply_now === "1" ? styles.positive : item.can_reply_now === "0" ? styles.negative : styles.pending}`}
                  style={{ left: position(item.decision_ms) }}
                  title={`标注 ${index + 1} · ${timeLabel(item.decision_ms, true)} · ${annotationLabel(item.can_reply_now, item.reason)}`}
                  aria-label={`选择 ${timeLabel(item.decision_ms, true)} 的标注，${annotationLabel(item.can_reply_now, item.reason)}`}
                  onPointerDown={(event) => event.stopPropagation()}
                  onClick={(event) => { event.stopPropagation(); onSelectAnnotation(item.id); }}
                  onKeyDown={(event) => event.stopPropagation()}
                ><span className={styles.annotationStem} aria-hidden="true" /><span>{item.can_reply_now === "" ? "·" : item.can_reply_now}</span></button>
              ))}
              {decision !== null && <span className={styles.selectedLabel} style={{ left: position(decision) }}>
                {selectedAnnotation ? annotationLabel(selectedAnnotation.can_reply_now, selectedAnnotation.reason) : "当前判断"}
              </span>}
            </div>

            <div className={styles.playhead} style={{ left: position(current) }} aria-hidden="true"><span /></div>

            {decision !== null && <div className={styles.decisionMarker} style={{ left: position(decision) }}>
              <div className={styles.decisionLine} aria-hidden="true" />
              <button
                type="button"
                className={styles.decisionHandle}
                title={readOnly ? "当前判断时间（查看模式）" : "拖动调整判断时间；方向键微调 100 ms，Shift 微调 1 秒"}
                aria-label={`当前判断点 ${timeLabel(decision, true)}${readOnly ? "，查看模式" : "，拖动或使用方向键调整"}`}
                aria-describedby={helpId}
                aria-disabled={readOnly}
                style={readOnly ? { cursor: "default" } : undefined}
                onPointerDown={(event) => { event.stopPropagation(); if (!readOnly) beginDrag(event, "decision"); }}
                onPointerMove={moveDrag}
                onPointerUp={endDrag}
                onPointerCancel={endDrag}
                onLostPointerCapture={(event) => { event.stopPropagation(); draggingRef.current = null; }}
                onKeyDown={(event) => { event.stopPropagation(); keyboardMove(event, "decision"); }}
              ><span aria-hidden="true" /></button>
            </div>}
          </div>
        </div>
      </div>

      <div className={styles.bottomBar}>
        <div className={styles.timeReadout}><span className={styles.playheadDot} /> 播放 <strong>{timeLabel(current, true)}</strong></div>
        <span id={helpId} className={styles.help}>{readOnly ? "点击定位播放 · 选择标记查看详情" : "点击定位播放 · 拖动橙色标记调整判断点"}</span>
      </div>
      <div className={styles.decisionControls}>
        <label htmlFor={rangeId}><span className={styles.decisionDot} />判断时间</label>
        <input
          id={rangeId}
          type="range"
          min={0}
          max={duration}
          step={1}
          value={decision ?? 0}
          disabled={decision === null || readOnly}
          aria-valuetext={decision === null ? "未选择判断点" : timeLabel(decision, true)}
          onChange={(event) => onDecisionChange(clamp(Number(event.currentTarget.value)))}
        />
        <label className={styles.numberInput}>
          <input
            type="number"
            aria-label="判断时间，单位毫秒"
            min={0}
            max={duration}
            step={1}
            value={decision ?? ""}
            placeholder="—"
            disabled={decision === null || readOnly}
            onChange={(event) => { if (event.currentTarget.value !== "") onDecisionChange(clamp(Number(event.currentTarget.value))); }}
          />
          <span>ms</span>
        </label>
      </div>
    </section>
  );
}