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

/// FORMAT HELPER: Duration → "MM:SS"
String _fmtCountdown(Duration d) {
  final m = d.inMinutes.toString().padLeft(2, '0');
  final s = (d.inSeconds % 60).toString().padLeft(2, '0');
  return '$m:$s';
}

/// Iqomah countdown screen — and Friday Khutbah info override.
class IqomahScreen extends ConsumerWidget {
  const IqomahScreen({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final screenData = ref.watch(screenStateProvider);
    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 countdown = screenData.iqomahRemaining ?? Duration.zero;
    final isFridayDzuhur =
        screenData.isFriday && screenData.activePrayer?.id == 'dzuhur';

    return Container(
      color: SacredColors.background,
      child: Stack(
        children: [
          // Subtle radial glow
          Positioned.fill(
            child: Container(
              decoration: BoxDecoration(
                gradient: RadialGradient(
                  center: Alignment.center,
                  radius: 0.7,
                  colors: [
                    SacredColors.primary.withValues(alpha: 0.08),
                    SacredColors.background,
                  ],
                ),
              ),
            ),
          ),

          // ── Content ──
          Padding(
            padding: EdgeInsets.all(64 * s),
            child: Column(
              children: [
                // Header
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          settings.masjidName.toUpperCase(),
                          style: GoogleFonts.plusJakartaSans(
                            fontSize: 36 * s,
                            fontWeight: FontWeight.w800,
                            color: SacredColors.primary,
                            letterSpacing: -1 * s,
                          ),
                        ),
                        Text(
                          settings.masjidAddress,
                          style: GoogleFonts.manrope(
                            fontSize: 12 * s,
                            color: SacredColors.onSurface.withValues(alpha: 0.6),
                            letterSpacing: 4 * s,
                          ),
                        ),
                      ],
                    ),
                  ],
                ),

                // ── Center: Countdown ──
                Expanded(
                  child: Center(
                    child: Column(
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        // Prayer name pill
                        Text(
                          'SHALAT SAAT INI',
                          style: GoogleFonts.manrope(
                            fontSize: 16 * s,
                            fontWeight: FontWeight.w500,
                            color: SacredColors.onSurface.withValues(alpha: 0.5),
                            letterSpacing: 8 * s,
                          ),
                        ),
                        SizedBox(height: 12 * s),
                        Container(
                          padding: EdgeInsets.symmetric(
                              horizontal: 48 * s, vertical: 16 * s),
                          decoration: BoxDecoration(
                            color: SacredColors.surfaceContainerHighest,
                            borderRadius:
                                BorderRadius.circular(SacredRadii.full),
                            border: Border.all(
                              color: SacredColors.primary.withValues(alpha: 0.1),
                            ),
                          ),
                          child: Text(
                            prayerLabel.toUpperCase(),
                            style: GoogleFonts.plusJakartaSans(
                              fontSize: 56 * s,
                              fontWeight: FontWeight.w800,
                              color: SacredColors.primary,
                              letterSpacing: 2 * s,
                            ),
                          ),
                        ),

                        SizedBox(height: 32 * s),

                        // Title
                        Text(
                          isFridayDzuhur
                              ? 'PERSIAPAN KHUTBAH'
                              : 'MENUJU IQOMAH',
                          style: GoogleFonts.plusJakartaSans(
                            fontSize: 36 * s,
                            fontWeight: FontWeight.w700,
                            color: SacredColors.secondary,
                            letterSpacing: 4 * s,
                          ),
                        ),

                        SizedBox(height: 16 * s),

                        // Giant timer
                        Text(
                          _fmtCountdown(countdown),
                          style: GoogleFonts.plusJakartaSans(
                            fontSize: 280 * s,
                            fontWeight: FontWeight.w800,
                            color: SacredColors.onSurface,
                            letterSpacing: -8 * s,
                            height: 1.0,
                            shadows: [
                              Shadow(
                                blurRadius: 40 * s,
                                color:
                                    SacredColors.primary.withValues(alpha: 0.3),
                              ),
                            ],
                          ),
                        ),

                        // Pulsing status pill
                        _StatusPill(
                          label: 'SIAPKAN DIRI ANDA',
                          scale: s,
                        ),

                        // Friday officers info
                        if (isFridayDzuhur) ...[
                          SizedBox(height: 32 * s),
                          _FridayOfficers(settings: settings, scale: s),
                        ],
                      ],
                    ),
                  ),
                ),

                // Hadith reminder
                Container(
                  padding: EdgeInsets.all(32 * s),
                  decoration: BoxDecoration(
                    color: SacredColors.surfaceContainerLow.withValues(alpha: 0.5),
                    borderRadius: BorderRadius.circular(SacredRadii.xl),
                    border: Border(
                      left: BorderSide(
                          color: SacredColors.secondary, width: 4 * s),
                    ),
                  ),
                  child: Text(
                    '"Luruskan dan Rapatkan Shaf, Sesungguhnya lurusnya shaf termasuk kesempurnaan shalat."',
                    style: GoogleFonts.plusJakartaSans(
                      fontSize: 28 * s,
                      fontWeight: FontWeight.w500,
                      color: SacredColors.onSurface,
                      fontStyle: FontStyle.italic,
                      height: 1.5,
                    ),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

class _StatusPill extends StatefulWidget {
  final String label;
  final double scale;
  const _StatusPill({required this.label, required this.scale});

  @override
  State<_StatusPill> createState() => _StatusPillState();
}

class _StatusPillState extends State<_StatusPill>
    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 FadeTransition(
      opacity: Tween(begin: 0.5, end: 1.0).animate(_ctrl),
      child: Container(
        margin: EdgeInsets.only(top: 16 * s),
        padding:
            EdgeInsets.symmetric(horizontal: 32 * s, vertical: 12 * s),
        decoration: BoxDecoration(
          color: SacredColors.secondary.withValues(alpha: 0.1),
          borderRadius: BorderRadius.circular(SacredRadii.full),
          border: Border.all(
            color: SacredColors.secondary.withValues(alpha: 0.2),
          ),
        ),
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            Icon(Icons.notifications_active,
                color: SacredColors.secondary, size: 20 * s),
            SizedBox(width: 8 * s),
            Text(
              widget.label,
              style: GoogleFonts.plusJakartaSans(
                fontSize: 16 * s,
                fontWeight: FontWeight.w700,
                color: SacredColors.secondary,
                letterSpacing: 3 * s,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class _FridayOfficers extends StatelessWidget {
  final dynamic settings;
  final double scale;
  const _FridayOfficers({required this.settings, required this.scale});

  @override
  Widget build(BuildContext context) {
    final s = scale;
    return Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        _OfficerCard(
          icon: Icons.person_pin,
          label: 'KHATIB',
          name: settings.khatibName,
          color: SacredColors.primary,
          scale: s,
        ),
        SizedBox(width: 24 * s),
        _OfficerCard(
          icon: Icons.timer,
          label: 'IMAM',
          name: settings.imamName,
          color: SacredColors.secondary,
          scale: s,
        ),
      ],
    );
  }
}

class _OfficerCard extends StatelessWidget {
  final IconData icon;
  final String label;
  final String name;
  final Color color;
  final double scale;

  const _OfficerCard({
    required this.icon,
    required this.label,
    required this.name,
    required this.color,
    required this.scale,
  });

  @override
  Widget build(BuildContext context) {
    final s = scale;
    return Container(
      padding: EdgeInsets.all(24 * s),
      decoration: BoxDecoration(
        color: SacredColors.surfaceContainerHigh.withValues(alpha: 0.4),
        borderRadius: BorderRadius.circular(SacredRadii.xl),
      ),
      child: Row(
        mainAxisSize: MainAxisSize.min,
        children: [
          Container(
            padding: EdgeInsets.all(12 * s),
            decoration: BoxDecoration(
              color: color.withValues(alpha: 0.2),
              borderRadius: BorderRadius.circular(SacredRadii.lg),
            ),
            child: Icon(icon, color: color, size: 24 * s),
          ),
          SizedBox(width: 16 * s),
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                label,
                style: GoogleFonts.manrope(
                  fontSize: 10 * s,
                  fontWeight: FontWeight.w700,
                  color: SacredColors.onSurface.withValues(alpha: 0.4),
                  letterSpacing: 3 * s,
                ),
              ),
              Text(
                name,
                style: GoogleFonts.plusJakartaSans(
                  fontSize: 20 * s,
                  fontWeight: FontWeight.w700,
                  color: SacredColors.onSurface,
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}