import 'dart:io';

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:path/path.dart' as p;

import '../services/media_player.dart';
import 'theme.dart';

/// 182: 소리만 있는 파일 (mp3 등) 을 틀 때 영상 자리에 보일 것 - 예전에는 검은 화면뿐이었다.
/// 제목 (파일 이름) · 앨범 그림 (파일 안에 있으면) · 재생 위치
class AudioNowPlaying extends StatelessWidget {
  final String file;
  final ValueListenable<PlayerState> state;

  /// 앨범 그림 파일 (없으면 null) - 파일마다 한 번만 꺼낸다
  final Future<String?> cover;
  const AudioNowPlaying({super.key, required this.file, required this.state, required this.cover});

  static String _t(Duration d) {
    final h = d.inHours, m = d.inMinutes % 60, s = (d.inSeconds % 60).toString().padLeft(2, '0');
    return h > 0 ? '$h:${m.toString().padLeft(2, '0')}:$s' : '$m:$s';
  }

  @override
  Widget build(BuildContext context) => Container(
        color: Colors.black,
        alignment: Alignment.center,
        padding: const EdgeInsets.all(24),
        child: Column(mainAxisSize: MainAxisSize.min, children: [
          Flexible(
            child: FutureBuilder<String?>(
              future: cover,
              builder: (_, s) => ConstrainedBox(
                constraints: const BoxConstraints(maxWidth: 320, maxHeight: 320),
                child: s.data != null
                    ? Image.file(File(s.data!), fit: BoxFit.contain, errorBuilder: (_, _, _) => const _Note())
                    : const _Note(),
              ),
            ),
          ),
          const SizedBox(height: 16),
          Text(p.basenameWithoutExtension(file),
              textAlign: TextAlign.center,
              maxLines: 2,
              overflow: TextOverflow.ellipsis,
              style: const TextStyle(color: Colors.white, fontSize: 18, fontWeight: FontWeight.w600)),
          const SizedBox(height: 8),
          ValueListenableBuilder<PlayerState>(
            valueListenable: state,
            builder: (_, s, _) => Text(
              '${_t(s.position)} / ${_t(s.duration)}',
              // 검은 바탕 위 - 밝은 화면에서도 어두운 화면의 흐린 글자색
              style: TextStyle(color: JjPalette.dark.textDim, fontSize: 14, fontFeatures: [FontFeature.tabularFigures()]),
            ),
          ),
        ]),
      );
}

class _Note extends StatelessWidget {
  const _Note();

  @override
  Widget build(BuildContext context) => AspectRatio(
        aspectRatio: 1,
        child: DecoratedBox(
          decoration: BoxDecoration(color: Color(0xFF1E1E1E), borderRadius: BorderRadius.all(Radius.circular(12))),
          child: Center(child: Icon(Icons.music_note, size: 96, color: JjPalette.dark.textDim)),
        ),
      );
}