waveform_section.dart

import 'dart:async';

import 'package:flutter/material.dart';

import 'package:provider/provider.dart';

import 'package:omi/models/playback_state.dart';
import 'package:omi/providers/sync_provider.dart';
import 'package:omi/utils/l10n_extensions.dart';
import 'package:omi/widgets/waveform_painter.dart';

class WaveformSection extends StatefulWidget {
  final int seconds;
  final List<double>? waveformData;
  final bool isProcessingWaveform;
  final PlaybackState playbackState;
  final bool isPlaying;

  const WaveformSection({
    super.key,
    required this.seconds,
    required this.waveformData,
    required this.isProcessingWaveform,
    required this.playbackState,
    required this.isPlaying,
  });

  @override
  State<WaveformSection> createState() => _WaveformSectionState();
}

class _WaveformSectionState extends State<WaveformSection> {
  Timer? _progressUpdateTimer;
  double _lastProgress = 0.0;

  @override
  void initState() {
    super.initState();
    _startProgressTimer();
  }

  @override
  void dispose() {
    _progressUpdateTimer?.cancel();
    super.dispose();
  }

  void _startProgressTimer() {
    // Use 250ms interval instead of 100ms to reduce CPU usage while maintaining smooth playback
    _progressUpdateTimer = Timer.periodic(const Duration(milliseconds: 250), (timer) {
      if (mounted && widget.isPlaying) {
        final currentProgress = widget.playbackState.playbackProgress;
        if ((currentProgress - _lastProgress).abs() > 0.01) {
          _lastProgress = currentProgress;
          setState(() {});
        }
      }
    });
  }

  void _handleWaveformTap(TapDownDetails details, BoxConstraints constraints, SyncProvider syncProvider) {
    if (widget.playbackState.canPlayOrShare && syncProvider.totalDuration.inMilliseconds > 0 && widget.isPlaying) {
      final localPosition = details.localPosition;
      final containerWidth = constraints.maxWidth;
      final progress = (localPosition.dx / containerWidth).clamp(0.0, 1.0);
      final seekPosition = Duration(milliseconds: (progress * syncProvider.totalDuration.inMilliseconds).round());

      // Perform seek operation asynchronously to avoid blocking UI
      Future.microtask(() => syncProvider.seekToPosition(seekPosition));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.symmetric(horizontal: 24),
      child: Column(
        children: [
          Expanded(child: _buildWaveformVisualization(context)),
          const SizedBox(height: 16),
          _buildTimeIndicators(context),
        ],
      ),
    );
  }

  Widget _buildWaveformVisualization(BuildContext context) {
    if (widget.isProcessingWaveform) {
      return Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const CircularProgressIndicator(color: Colors.white70, strokeWidth: 2),
            const SizedBox(height: 12),
            Text(context.l10n.loadingYourRecording, style: const TextStyle(color: Colors.white70, fontSize: 12)),
          ],
        ),
      );
    }

    return Consumer<SyncProvider>(
      builder: (context, syncProvider, child) {
        return LayoutBuilder(
          builder: (context, constraints) {
            return GestureDetector(
              onTapDown: (details) => _handleWaveformTap(details, constraints, syncProvider),
              child: Container(
                width: double.infinity,
                height: double.infinity,
                child: RepaintBoundary(
                  child: CustomPaint(
                    painter: WaveformPainter(
                      isPlaying: widget.isPlaying,
                      waveformData: widget.waveformData,
                      playbackProgress: _lastProgress,
                    ),
                  ),
                ),
              ),
            );
          },
        );
      },
    );
  }

  Widget _buildTimeIndicators(BuildContext context) {
    final totalDur = Duration(seconds: widget.seconds);

    // Always show 4 time markers like in ss1.jpeg (0:00, 0:01, 0:02, 0:03)
    List<String> timeMarkers = [];
    final intervalSeconds = (totalDur.inSeconds / 3).ceil(); // Divide into 3 intervals for 4 markers

    for (int i = 0; i <= 3; i++) {
      final seconds = i * intervalSeconds;
      if (seconds <= totalDur.inSeconds) {
        timeMarkers.add(_formatTimeMarker(Duration(seconds: seconds)));
      }
    }

    // Ensure we always have exactly 4 markers
    while (timeMarkers.length < 4) {
      timeMarkers.add(_formatTimeMarker(totalDur));
    }

    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 8),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: timeMarkers
            .map(
              (marker) => Text(
                marker,
                style: Theme.of(
                  context,
                ).textTheme.labelMedium!.copyWith(color: Colors.grey.shade500, fontWeight: FontWeight.w400),
              ),
            )
            .toList(),
      ),
    );
  }

  String _formatTimeMarker(Duration duration) {
    final minutes = duration.inMinutes.remainder(60);
    final seconds = duration.inSeconds.remainder(60);
    return '${minutes}:${seconds.toString().padLeft(2, '0')}';
  }
}