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 {
    let events: [CelestiaTimelineEvent]
    @Binding var currentTimeMs: Double
    let totalDurationMs: Double
    var silentRanges: [SilenceRange] = []

    /// Scale: points per second
    private let pointsPerSecond: CGFloat = 2.5
    /// Minimum timeline width
    private let minimumWidth: CGFloat = 400

    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: 26)

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

                            trackDivider

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

                            trackDivider

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

                        // Playhead Cursor
                        playhead
                            .id("playhead")
                    }
                    .frame(width: timelineWidth)
                }
                .clipShape(RoundedRectangle(cornerRadius: 10))
                .businessBorder(cornerRadius: 10)
                .onChange(of: currentTimeMs) { _, _ in
                    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 {
            Rectangle()
                .fill(Color.primary.opacity(0.12))
                .frame(height: 1)
            ForEach(Array(silentRanges.enumerated()), id: \.offset) { _, range in
                Rectangle()
                    .fill(Color.secondary.opacity(0.16))
                    .frame(width: max(1, xPosition(for: range.end * 1000) - xPosition(for: range.start * 1000)))
                    .offset(x: xPosition(for: range.start * 1000) - timelineWidth / 2)
            }
        }
    }

    // MARK: - Photo Track

    private var photoTrack: some View {
        ZStack(alignment: .leading) {
            Color.clear

            ForEach(photoEvents) { event in
                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)
                    .offset(x: xPosition(for: Double(event.relativeTimeMs)) - 10)
            }
        }
    }

    // MARK: - Note Track

    private var noteTrack: some View {
        ZStack(alignment: .leading) {
            Color.clear

            ForEach(noteEvents) { event in
                let iconName = event.eventType == "MARKER" ? "exclamationmark.triangle" : "doc.text"
                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)
                    .offset(x: xPosition(for: Double(event.relativeTimeMs)) - 10)
            }
        }
    }

    // MARK: - Playhead

    private var playhead: some View {
        let x = xPosition(for: currentTimeMs)
        return Rectangle()
            .fill(Color.primary) // Dynamic primary color for playhead line
            .frame(width: 1.0)
            .offset(x: x)
            .animation(.easeOut(duration: 0.15), value: currentTimeMs)
    }

    // 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: "笔记")
        }
    }

    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)
    }

    // 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 = timeMs / totalDurationMs
        return padding + usableWidth * CGFloat(ratio)
    }

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

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

// MARK: - Preview

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