jamshalat-masjid-screen/lib/features/home/adzan_screen.dart

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';

/// Full-screen Adzan alert with pulsing icon and glowing text.
class AdzanAlertScreen extends ConsumerWidget {
  const AdzanAlertScreen({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final screenData = ref.watch(screenStateProvider);
    final clock = ref.watch(clockProvider).valueOrNull ?? DateTime.now();
    final schedule = ref.watch(todayScheduleProvider);
    final settings = ref.watch(settingsProvider);
    final size = MediaQuery.of(context).size;
    final s = size.width / 1920;

    final prayerLabel = screenData.activePrayer
            ?.displayLabel(isFriday: screenData.isFriday) ??
        '';
    final timeStr =
        '${clock.hour.toString().padLeft(2, '0')}:${clock.minute.toString().padLeft(2, '0')}';
    final secStr = clock.second.toString().padLeft(2, '0');
    final fs = s * ref.watch(textScaleProvider);

    return Container(
      color: SacredColors.background,
      child: Stack(
        children: [
          // Background gradient
          Positioned.fill(
            child: Container(
              decoration: BoxDecoration(
                gradient: RadialGradient(
                  center: Alignment.center,
                  radius: 0.8,
                  colors: [
                    SacredColors.background,
                    SacredColors.background,
                  ],
                ),
              ),
            ),
          ),

          // Ghost mosque icon
          Positioned(
            left: 40 * s,
            top: 0,
            bottom: 0,
            child: Center(
              child: Opacity(
                opacity: 0.03,
                child: Icon(Icons.mosque, size: 500 * s,
                    color: SacredColors.onSurface),
              ),
            ),
          ),

          // ── Header ──
          Positioned(
            top: 0,
            left: 0,
            right: 0,
            child: Container(
              padding: EdgeInsets.symmetric(
                  horizontal: 64 * s, vertical: 24 * s),
              color: SacredColors.background,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        settings.masjidName,
                        style: GoogleFonts.plusJakartaSans(
                          fontSize: 32 * s,
                          fontWeight: FontWeight.w700,
                          color: SacredColors.primary,
                        ),
                      ),
                      Text(
                        settings.masjidAddress,
                        style: GoogleFonts.manrope(
                          fontSize: 14 * fs,
                          fontWeight: FontWeight.w500,
                          color: SacredColors.secondary,
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ),

          // ── Central Alert Content ──
          Center(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                // Pulsing bell icon with glow
                _PulsingIcon(scale: s),

                SizedBox(height: 40 * s),

                // "WAKTU ADZAN [PRAYER]"
                Text(
                  'WAKTU ADZAN $prayerLabel',
                  style: GoogleFonts.plusJakartaSans(
                    fontSize: 80 * s,
                    fontWeight: FontWeight.w800,
                    color: SacredColors.secondary,
                    letterSpacing: -2 * s,
                    shadows: [
                      Shadow(
                        blurRadius: 40 * s,
                        color: SacredColors.secondary.withValues(alpha: 0.4),
                      ),
                    ],
                  ),
                ),

                SizedBox(height: 32 * s),

                // Clock in pill
                Container(
                  padding: EdgeInsets.symmetric(
                      horizontal: 48 * s, vertical: 20 * s),
                  decoration: BoxDecoration(
                    color: SacredColors.surfaceContainerHighest
                        .withValues(alpha: 0.4),
                    borderRadius: BorderRadius.circular(SacredRadii.full),
                    border: Border.all(
                      color: SacredColors.outlineVariant.withValues(alpha: 0.15),
                    ),
                  ),
                  child: Row(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      Text(
                        timeStr,
                        style: GoogleFonts.plusJakartaSans(
                          fontSize: 120 * s,
                          fontWeight: FontWeight.w700,
                          color: SacredColors.primary,
                          letterSpacing: -3 * s,
                          height: 1.0,
                          shadows: [
                            Shadow(
                              blurRadius: 30 * s,
                              color:
                                  SacredColors.primary.withValues(alpha: 0.3),
                            ),
                          ],
                        ),
                      ),
                      SizedBox(width: 12 * s),
                      Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(
                            secStr,
                            style: GoogleFonts.plusJakartaSans(
                              fontSize: 48 * s,
                              fontWeight: FontWeight.w700,
                              color: SacredColors.onSurface
                                  .withValues(alpha: 0.5),
                            ),
                          ),
                          Text(
                            'WIB',
                            style: GoogleFonts.manrope(
                              fontSize: 20 * s,
                              fontWeight: FontWeight.w500,
                              color: SacredColors.primary,
                              letterSpacing: 4 * s,
                            ),
                          ),
                        ],
                      ),
                    ],
                  ),
                ),

                SizedBox(height: 40 * s),

                // Sub-message
                Text(
                  'Telah masuk waktu shalat $prayerLabel.\nSegera persiapkan diri menuju masjid.',
                  textAlign: TextAlign.center,
                  style: GoogleFonts.manrope(
                    fontSize: 24 * fs,
                    fontWeight: FontWeight.w500,
                    color: SacredColors.onSurface.withValues(alpha: 0.8),
                    height: 1.5,
                  ),
                ),
              ],
            ),
          ),

          // ── Footer: Prayer times strip ──
          if (schedule != null)
            Positioned(
              left: 0,
              right: 0,
              bottom: 0,
              child: _buildFooterStrip(s, fs, schedule, screenData),
            ),
        ],
      ),
    );
  }

  Widget _buildFooterStrip(
      double s, double fs, dynamic schedule, dynamic screenData) {
    final prayers = {
      'Subuh': schedule.subuh,
      'Dzuhur': schedule.dzuhur,
      'Ashar': schedule.ashar,
      'Maghrib': schedule.maghrib,
      'Isya': schedule.isya,
    };

    return Container(
      padding: EdgeInsets.symmetric(horizontal: 64 * s, vertical: 28 * s),
      color: SacredColors.surfaceContainerLow.withValues(alpha: 0.8),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: prayers.entries.map((e) {
          final isActive = screenData.activePrayer?.id == e.key.toLowerCase();
          return Column(
            children: [
              Text(
                e.key.toUpperCase(),
                style: GoogleFonts.manrope(
                  fontSize: 12 * fs,
                  fontWeight: FontWeight.w700,
                  color: isActive
                      ? SacredColors.primary
                      : SacredColors.onSurface.withValues(alpha: 0.4),
                  letterSpacing: 2 * s,
                ),
              ),
              SizedBox(height: 4 * s),
              Text(
                e.value,
                style: GoogleFonts.plusJakartaSans(
                  fontSize: isActive ? 32 * fs : 28 * fs,
                  fontWeight: isActive ? FontWeight.w700 : FontWeight.w600,
                  color: isActive
                      ? SacredColors.primary
                      : SacredColors.onSurface,
                ),
              ),
            ],
          );
        }).toList(),
      ),
    );
  }
}

class _PulsingIcon extends StatefulWidget {
  final double scale;
  const _PulsingIcon({required this.scale});

  @override
  State<_PulsingIcon> createState() => _PulsingIconState();
}

class _PulsingIconState extends State<_PulsingIcon>
    with SingleTickerProviderStateMixin {
  late AnimationController _ctrl;

  @override
  void initState() {
    super.initState();
    _ctrl = AnimationController(
      vsync: this,
      duration: const Duration(seconds: 2),
    )..repeat(reverse: true);
  }

  @override
  void dispose() {
    _ctrl.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final s = widget.scale;
    return AnimatedBuilder(
      animation: _ctrl,
      builder: (context, child) {
        return Stack(
          alignment: Alignment.center,
          children: [
            Container(
              width: 200 * s,
              height: 200 * s,
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                color: SacredColors.secondary
                    .withValues(alpha: 0.1 * _ctrl.value),
                boxShadow: [
                  BoxShadow(
                    blurRadius: 60 * s * _ctrl.value,
                    color: SacredColors.secondary.withValues(alpha: 0.1),
                  ),
                ],
              ),
            ),
            Icon(
              Icons.notifications_active,
              size: 120 * s,
              color: SacredColors.secondary,
            ),
          ],
        );
      },
    );
  }
}