import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:google_fonts/google_fonts.dart';

import '../../core/sacred_tokens.dart';
import '../../providers.dart';

/// Minimal black screen during prayer — absolute zero distraction.
class BlackScreen extends ConsumerWidget {
  const BlackScreen({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final screenData = ref.watch(screenStateProvider);
    final size = MediaQuery.of(context).size;
    final s = size.width / 1920;

    final prayerLabel = screenData.activePrayer
            ?.displayLabel(isFriday: screenData.isFriday) ??
        '';

    return Container(
      color: SacredColors.blackScreen,
      child: Stack(
        children: [
          // Extremely subtle radial tonal shift
          Positioned.fill(
            child: Container(
              decoration: BoxDecoration(
                gradient: RadialGradient(
                  center: Alignment.center,
                  radius: 1.2,
                  colors: [
                    SacredColors.primaryContainer.withValues(alpha: 0.03),
                    SacredColors.blackScreen,
                  ],
                ),
              ),
            ),
          ),

          // Center: prayer name + status (extremely dim)
          Center(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                Opacity(
                  opacity: 0.10,
                  child: Text(
                    prayerLabel.toUpperCase(),
                    style: GoogleFonts.plusJakartaSans(
                      fontSize: 96 * s,
                      fontWeight: FontWeight.w300,
                      color: SacredColors.onSurface,
                      letterSpacing: 20 * s,
                    ),
                  ),
                ),
                SizedBox(height: 16 * s),
                Opacity(
                  opacity: 0.08,
                  child: Text(
                    'SHALAT SEDANG BERLANGSUNG',
                    style: GoogleFonts.plusJakartaSans(
                      fontSize: 14 * s,
                      fontWeight: FontWeight.w500,
                      color: SacredColors.onSurface,
                      letterSpacing: 6 * s,
                    ),
                  ),
                ),
              ],
            ),
          ),

          // Bottom advisory — barely visible
          Positioned(
            bottom: 64 * s,
            left: 0,
            right: 0,
            child: Center(
              child: Opacity(
                opacity: 0.06,
                child: Row(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    Icon(Icons.phonelink_ring,
                        size: 14 * s, color: SacredColors.onSurface),
                    SizedBox(width: 8 * s),
                    Text(
                      'MOHON NONAKTIFKAN ALAT KOMUNIKASI',
                      style: GoogleFonts.manrope(
                        fontSize: 10 * s,
                        fontWeight: FontWeight.w500,
                        color: SacredColors.onSurface,
                        letterSpacing: 3 * s,
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}