ios-celestia-trace/CelestiaTrace/Views/Detail/MultiTrackTimeline.swift

import SwiftUI

// MARK: - MultiTrackTimeline
/// A three-track horizontal timeline visualization showing:
/// - Track 1: Audio availability and silence markers
/// - Track 2: Photo markers (camera outlines at event positions)
/// - Track 3: Note/marker outline icons at event positions
/// Includes a time ruler and a central playhead cursor.
/// Fully redesigned with a minimalist business line-drawn style.
struct MultiTrackTimeline: View {
    enum EditableTrack {
        case photo
        case note
    }

    private struct PhotoEventGroup: Identifiable {
        let relativeTimeMs: Int64
        let events: [CelestiaTimelineEvent]

        var id: UUID { events[0].id }
    }

    let events: [CelestiaTimelineEvent]
    @Binding var currentTimeMs: Double
    let totalDurationMs: Double
    var waveformSamples: [Float] = []
    var silentRanges: [SilenceRange] = []
    var onEmptyTrackTap: ((EditableTrack, Double) -> Void)?
    var onEventTap: ((CelestiaTimelineEvent) -> Void)?

    @State private var playheadDragStartTimeMs: Double?

    /// Scale: points per second
    private let pointsPerSecond: CGFloat = 2.5
    /// Minimum timeline width
    private let minimumWidth: CGFloat = 400
    /// Matches the live-recording waveform height.
    private let audioTrackHeight: CGFloat = 90
    private let eventTrackHeight: CGFloat = 34

    private var timelineWidth: CGFloat {
        max(minimumWidth, CGFloat(totalDurationMs / 1000.0) * pointsPerSecond + 60)
    }

    var body: some View {
        VStack(spacing: 0) {
            ScrollViewReader { scrollProxy in
                ScrollView(.horizontal, showsIndicators: false) {
                    ZStack(alignment: .topLeading) {
                        // Background
                        RoundedRectangle(cornerRadius: 10)
                            .fill(Color.cardBackground.opacity(0.15))

                        VStack(spacing: 0) {
                            // Time Ruler
                            timeRuler
                                .frame(height: 28)

                            // Track 1: Audio Waveform
                            audioTrack
                                .frame(height: audioTrackHeight)

                            trackDivider

                            // Track 2: Photo Markers
                            photoTrack
                                .frame(height: eventTrackHeight)

                            trackDivider

                            // Track 3: Note Markers
                            noteTrack
                                .frame(height: eventTrackHeight)
                        }

                        // Playhead Cursor
                        playhead
                            .id("playhead")

                        // Event hit targets stay above the draggable playhead so
                        // overlapping photo and note markers remain tappable.
                        eventHitTargets
                    }
                    .frame(width: timelineWidth)
                }
                .clipShape(RoundedRectangle(cornerRadius: 10))
                .businessBorder(cornerRadius: 10)
                .onChange(of: currentTimeMs) { _, _ in
                    guard playheadDragStartTimeMs == nil else { return }
                    withAnimation(.easeOut(duration: 0.2)) {
                        scrollProxy.scrollTo("playhead", anchor: .center)
                    }
                }
            }

            // Track labels
            trackLabels
                .padding(.top, 8)
        }
    }

    // MARK: - Time Ruler

    private var timeRuler: some View {
        Canvas { context, size in
            let totalSeconds = totalDurationMs / 1000.0
            let markerInterval: Double = totalSeconds > 300 ? 60 : (totalSeconds > 60 ? 10 : 5)

            var t: Double = 0
            while t <= totalSeconds {
                let x = xPosition(for: t * 1000)

                // Tick mark
                let tickPath = Path { path in
                    path.move(to: CGPoint(x: x, y: size.height - 6))
                    path.addLine(to: CGPoint(x: x, y: size.height))
                }
                context.stroke(tickPath, with: .color(Color.primary.opacity(0.2)), lineWidth: 1)

                // Time label
                let minutes = Int(t) / 60
                let seconds = Int(t) % 60
                let label = String(format: "%d:%02d", minutes, seconds)

                let text = Text(label)
                    .font(.system(size: 8, weight: .regular, design: .monospaced))
                    .foregroundStyle(Color.secondary.opacity(0.8))

                context.draw(
                    context.resolve(text),
                    at: CGPoint(x: x, y: size.height - 14),
                    anchor: .center
                )

                t += markerInterval
            }
        }
    }

    // MARK: - Audio Track

    private var audioTrack: some View {
        ZStack(alignment: .leading) {
            Canvas { context, size in
                let centerY = size.height / 2
                let barWidth: CGFloat = 1
                let barSpacing: CGFloat = 2
                let barSlot = barWidth + barSpacing
                let startX = xPosition(for: 0)
                let endX = xPosition(for: totalDurationMs)
                let waveformWidth = max(0, endX - startX)
                let barCount = max(0, Int(waveformWidth / barSlot))

                for range in silentRanges {
                    let rangeStart = max(startX, xPosition(for: range.start * 1000))
                    let rangeEnd = min(endX, xPosition(for: range.end * 1000))
                    guard rangeEnd > rangeStart else { continue }
                    context.fill(
                        Path(CGRect(
                            x: rangeStart,
                            y: 0,
                            width: rangeEnd - rangeStart,
                            height: size.height
                        )),
                        with: .color(Color.secondary.opacity(0.10))
                    )
                }

                let centerLine = Path { path in
                    path.move(to: CGPoint(x: startX, y: centerY))
                    path.addLine(to: CGPoint(x: endX, y: centerY))
                }
                context.stroke(
                    centerLine,
                    with: .color(Color.primary.opacity(0.1)),
                    lineWidth: 1
                )

                guard barCount > 0, !waveformSamples.isEmpty else { return }

                for index in 0..<barCount {
                    let sampleStart = index * waveformSamples.count / barCount
                    let sampleEnd = max(
                        sampleStart + 1,
                        (index + 1) * waveformSamples.count / barCount
                    )
                    let upperBound = min(sampleEnd, waveformSamples.count)
                    guard sampleStart < upperBound else { continue }

                    let amplitude = waveformSamples[sampleStart..<upperBound].max() ?? 0
                    let barHeight = max(CGFloat(max(amplitude, 0)) * size.height * 0.75, 1)
                    let rect = CGRect(
                        x: startX + CGFloat(index) * barSlot,
                        y: centerY - barHeight / 2,
                        width: barWidth,
                        height: barHeight
                    )
                    context.fill(
                        Path(rect),
                        with: .color(Color.primary.opacity(0.85))
                    )
                }
            }

            trackLeadingIcon(systemName: "waveform", accessibilityLabel: "音频轨道")

            ForEach(continuationEvents) { event in
                Button {
                    onEventTap?(event)
                } label: {
                    ZStack {
                        Rectangle()
                            .fill(Color.primary.opacity(0.35))
                            .frame(width: 1, height: audioTrackHeight)

                        Image(systemName: "record.circle")
                            .font(.system(size: 11, weight: .medium))
                            .foregroundStyle(Color.primary)
                            .frame(width: 20, height: 20)
                            .background(Color.cardBackground.opacity(0.9))
                            .businessBorder(cornerRadius: 10)
                    }
                    .frame(width: 20, height: audioTrackHeight)
                }
                .buttonStyle(.plain)
                .offset(x: xPosition(for: Double(event.relativeTimeMs)) - 10)
                .accessibilityLabel("查看 \(event.relativeTimeFormatted) 的续录信息")
            }
        }
    }

    // MARK: - Photo Track

    private var photoTrack: some View {
        ZStack(alignment: .leading) {
            emptyTrackTapTarget(for: .photo)

            trackLeadingIcon(systemName: "camera", accessibilityLabel: "图片轨道")

            ForEach(photoEventGroups) { group in
                Button {
                    onEventTap?(group.events[0])
                } label: {
                    ZStack(alignment: .topTrailing) {
                        Image(systemName: "camera")
                            .font(.system(size: 9))
                            .foregroundStyle(Color.primary.opacity(0.8))
                            .frame(width: 20, height: 20)
                            .background(Color.cardBackground.opacity(0.6))
                            .businessBorder(cornerRadius: 10)

                        if group.events.count > 1 {
                            Text("\(group.events.count)")
                                .font(.system(size: 7, weight: .bold, design: .rounded))
                                .foregroundStyle(Color.spaceBlack)
                                .frame(minWidth: 13, minHeight: 13)
                                .background(Color.primary, in: Circle())
                                .offset(x: 5, y: -5)
                        }
                    }
                }
                .buttonStyle(.plain)
                .offset(x: xPosition(for: Double(group.relativeTimeMs)) - 10)
                .accessibilityLabel(
                    "查看 \(group.events[0].relativeTimeFormatted) 的 \(group.events.count) 张图片"
                )
            }
        }
    }

    // MARK: - Note Track

    private var noteTrack: some View {
        ZStack(alignment: .leading) {
            emptyTrackTapTarget(for: .note)

            trackLeadingIcon(systemName: "doc.text", accessibilityLabel: "笔记轨道")

            ForEach(noteEvents) { event in
                let iconName = event.eventType == "MARKER" ? "exclamationmark.triangle" : "doc.text"
                Button {
                    onEventTap?(event)
                } label: {
                    Image(systemName: iconName)
                        .font(.system(size: 9))
                        .foregroundStyle(Color.primary.opacity(0.8))
                        .frame(width: 20, height: 20)
                        .background(Color.cardBackground.opacity(0.6))
                        .businessBorder(cornerRadius: 10)
                }
                .buttonStyle(.plain)
                .offset(x: xPosition(for: Double(event.relativeTimeMs)) - 10)
                .accessibilityLabel("查看 \(event.relativeTimeFormatted) 的笔记")
            }
        }
    }

    // MARK: - Playhead

    private var eventHitTargets: some View {
        ZStack(alignment: .topLeading) {
            ForEach(photoEventGroups) { group in
                Button {
                    onEventTap?(group.events[0])
                } label: {
                    Color.clear
                        .contentShape(Rectangle())
                        .frame(width: 28, height: eventTrackHeight)
                }
                .buttonStyle(.plain)
                .offset(
                    x: xPosition(for: Double(group.relativeTimeMs)) - 14,
                    y: 28 + audioTrackHeight + 1
                )
                .accessibilityHidden(true)
            }

            ForEach(noteEvents) { event in
                Button {
                    onEventTap?(event)
                } label: {
                    Color.clear
                        .contentShape(Rectangle())
                        .frame(width: 28, height: eventTrackHeight)
                }
                .buttonStyle(.plain)
                .offset(
                    x: xPosition(for: Double(event.relativeTimeMs)) - 14,
                    y: 28 + audioTrackHeight + 1 + eventTrackHeight + 1
                )
                .accessibilityHidden(true)
            }
        }
        .frame(
            width: timelineWidth,
            height: 28 + audioTrackHeight + 2 + eventTrackHeight * 2,
            alignment: .topLeading
        )
    }

    private var playhead: some View {
        let x = xPosition(for: currentTimeMs)
        return ZStack {
            Color.clear
                .contentShape(Rectangle())

            Rectangle()
                .fill(Color.primary)
                .frame(width: 1)
        }
            .frame(width: 28)
            .offset(x: x - 14)
            .animation(
                playheadDragStartTimeMs == nil ? .easeOut(duration: 0.15) : nil,
                value: currentTimeMs
            )
            .highPriorityGesture(playheadDragGesture)
            .accessibilityLabel("当前播放位置")
            .accessibilityValue(formattedTime(currentTimeMs))
            .accessibilityAdjustableAction { direction in
                let stepMs = 1_000.0
                switch direction {
                case .increment:
                    currentTimeMs = min(totalDurationMs, currentTimeMs + stepMs)
                case .decrement:
                    currentTimeMs = max(0, currentTimeMs - stepMs)
                @unknown default:
                    break
                }
            }
    }

    private var playheadDragGesture: some Gesture {
        DragGesture(minimumDistance: 0, coordinateSpace: .global)
            .onChanged { value in
                let startTime = playheadDragStartTimeMs ?? currentTimeMs
                if playheadDragStartTimeMs == nil {
                    playheadDragStartTimeMs = startTime
                }

                let startX = xPosition(for: startTime)
                currentTimeMs = timeMs(forXPosition: startX + value.translation.width)
            }
            .onEnded { _ in
                playheadDragStartTimeMs = nil
            }
    }

    // MARK: - Track Divider

    private var trackDivider: some View {
        Rectangle()
            .fill(Color.lineBorder)
            .frame(height: 1)
    }

    // MARK: - Track Labels

    private var trackLabels: some View {
        HStack(spacing: 24) {
            trackLabel(icon: "waveform", text: "音频")
            trackLabel(icon: "camera", text: "图片")
            trackLabel(icon: "doc.text", text: "笔记")
            if !continuationEvents.isEmpty {
                trackLabel(icon: "record.circle", text: "续录")
            }
        }
    }

    private func trackLabel(icon: String, text: String) -> some View {
        HStack(spacing: 4) {
            Image(systemName: icon)
                .font(.system(size: 9, weight: .light))
            Text(text)
                .font(.system(size: 9, weight: .regular))
        }
        .foregroundStyle(Color.secondary)
    }

    private func trackLeadingIcon(
        systemName: String,
        accessibilityLabel: String
    ) -> some View {
        Image(systemName: systemName)
            .font(.system(size: 10, weight: .regular))
            .foregroundStyle(Color.secondary.opacity(0.85))
            .frame(width: 24)
            .accessibilityLabel(accessibilityLabel)
    }

    private func emptyTrackTapTarget(for track: EditableTrack) -> some View {
        Color.clear
            .contentShape(Rectangle())
            .gesture(
                SpatialTapGesture()
                    .onEnded { value in
                        let timeMs = timeMs(forXPosition: value.location.x)
                        onEmptyTrackTap?(track, timeMs)
                    }
            )
    }

    // MARK: - Helpers

    private func xPosition(for timeMs: Double) -> CGFloat {
        guard totalDurationMs > 0 else { return 30 }
        let padding: CGFloat = 30
        let usableWidth = timelineWidth - padding * 2
        let ratio = min(max(timeMs / totalDurationMs, 0), 1)
        return padding + usableWidth * CGFloat(ratio)
    }

    private func timeMs(forXPosition x: CGFloat) -> Double {
        guard totalDurationMs > 0 else { return 0 }
        let padding: CGFloat = 30
        let usableWidth = timelineWidth - padding * 2
        guard usableWidth > 0 else { return 0 }
        let ratio = min(max((x - padding) / usableWidth, 0), 1)
        return Double(ratio) * totalDurationMs
    }

    private func formattedTime(_ timeMs: Double) -> String {
        let totalSeconds = max(0, Int(timeMs / 1_000))
        return String(format: "%d:%02d", totalSeconds / 60, totalSeconds % 60)
    }

    private var photoEvents: [CelestiaTimelineEvent] {
        events.filter { $0.eventType == "PHOTO" }
    }

    private var photoEventGroups: [PhotoEventGroup] {
        Dictionary(grouping: photoEvents, by: \.relativeTimeMs)
            .map { relativeTimeMs, events in
                PhotoEventGroup(
                    relativeTimeMs: relativeTimeMs,
                    events: events.sorted {
                        if $0.createdAt == $1.createdAt {
                            return $0.id.uuidString < $1.id.uuidString
                        }
                        return $0.createdAt < $1.createdAt
                    }
                )
            }
            .sorted { $0.relativeTimeMs < $1.relativeTimeMs }
    }

    private var noteEvents: [CelestiaTimelineEvent] {
        events.filter {
            $0.eventType == "NOTE"
                || ($0.eventType == "MARKER" && !$0.isContinuationMarker)
        }
    }

    private var continuationEvents: [CelestiaTimelineEvent] {
        events.filter(\.isContinuationMarker)
    }
}

// MARK: - Preview

#Preview {
    VStack {
        MultiTrackTimeline(
            events: [],
            currentTimeMs: .constant(30000),
            totalDurationMs: 120000,
            waveformSamples: [0.1, 0.3, 0.8, 0.4, 0.2]
        )
        .frame(height: 140)
        .padding()
    }
    .background(Color.spaceBlack)
}