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

/// Screen displayed uniquely during the Friday Khutbah.
/// It acts like a black (shalat) screen to avoid distraction,
/// but features the active Khatib and Muadzin information and a pulsing indicator.
/// NO COUNTDOWNS are displayed.
class KhutbahScreen extends ConsumerWidget {
  const KhutbahScreen({super.key});

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

    return Container(
      color: Colors.black,
      child: Stack(
        children: [
          // Absolute center elements
          Center(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                // Animated Pulsing Status Pill
                Container(
                  padding: EdgeInsets.symmetric(horizontal: 40 * s, vertical: 16 * s),
                  decoration: BoxDecoration(
                    color: SacredColors.background,
                    borderRadius: BorderRadius.circular(SacredRadii.full),
                    border: Border.all(color: SacredColors.outlineVariant.withValues(alpha: 0.3)),
                  ),
                  child: Row(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      _PulsingMic(size: 24 * s, color: SacredColors.secondary),
                      SizedBox(width: 16 * s),
                      Text(
                        'SEDANG KHUTBAH JUMAT',
                        style: GoogleFonts.plusJakartaSans(
                          fontSize: 24 * s,
                          fontWeight: FontWeight.w800,
                          color: SacredColors.secondary,
                          letterSpacing: 4 * s,
                        ),
                      ),
                    ],
                  ),
                ),
                
                SizedBox(height: 64 * s),

                // Officer Info Cards
                Row(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    _buildKhutbahOfficerCard(
                      s: s,
                      icon: Icons.person_pin,
                      label: 'KHATIB',
                      name: settings.khatibName.isEmpty ? 'Khatib Hari Ini' : settings.khatibName,
                      color: SacredColors.primary,
                    ),
                    SizedBox(width: 48 * s),
                    _buildKhutbahOfficerCard(
                      s: s,
                      icon: Icons.record_voice_over,
                      label: 'MUADZIN / IMAM',
                      name: settings.imamName.isEmpty ? 'Muadzin Hari Ini' : settings.imamName,
                      color: SacredColors.secondary,
                    ),
                  ],
                ),
                
                SizedBox(height: 80 * s),
                
                Text(
                  '"Harap menjaga ketenangan dan menyimak Khutbah."',
                  style: GoogleFonts.manrope(
                    fontSize: 20 * s,
                    fontWeight: FontWeight.w500,
                    color: SacredColors.onSurfaceVariant.withValues(alpha: 0.5),
                    fontStyle: FontStyle.italic,
                  ),
                )
              ],
            ),
          ),
          
          // Simple corner logo/name so it doesn't feel entirely dead
          Positioned(
            top: 48 * s,
            left: 48 * s,
            child: Row(
              children: [
                Icon(Icons.mosque, color: SacredColors.onSurfaceVariant.withValues(alpha: 0.3), size: 24 * s),
                SizedBox(width: 12 * s),
                Text(
                  settings.masjidName,
                  style: GoogleFonts.plusJakartaSans(
                    fontSize: 16 * s,
                    fontWeight: FontWeight.w700,
                    color: SacredColors.onSurfaceVariant.withValues(alpha: 0.3),
                    letterSpacing: 2 * s,
                  ),
                ),
              ],
            ),
          )
        ],
      ),
    );
  }

  Widget _buildKhutbahOfficerCard({
    required double s,
    required IconData icon,
    required String label,
    required String name,
    required Color color,
  }) {
    return Container(
      width: 400 * s,
      padding: EdgeInsets.all(32 * s),
      decoration: BoxDecoration(
        color: SacredColors.surfaceContainerLow.withValues(alpha: 0.4),
        borderRadius: BorderRadius.circular(SacredRadii.xl),
        border: Border.all(color: color.withValues(alpha: 0.1)),
      ),
      child: Column(
        children: [
          Container(
            padding: EdgeInsets.all(20 * s),
            decoration: BoxDecoration(
              color: color.withValues(alpha: 0.1),
              shape: BoxShape.circle,
            ),
            child: Icon(icon, color: color, size: 40 * s),
          ),
          SizedBox(height: 24 * s),
          Text(
            label,
            style: GoogleFonts.manrope(
              fontSize: 14 * s,
              fontWeight: FontWeight.w700,
              color: SacredColors.onSurfaceVariant,
              letterSpacing: 4 * s,
            ),
          ),
          SizedBox(height: 8 * s),
          Text(
            name,
            textAlign: TextAlign.center,
            style: GoogleFonts.plusJakartaSans(
              fontSize: 28 * s,
              fontWeight: FontWeight.w800,
              color: SacredColors.onSurface,
            ),
          ),
        ],
      ),
    );
  }
}

class _PulsingMic extends StatefulWidget {
  final double size;
  final Color color;
  const _PulsingMic({required this.size, required this.color});

  @override
  State<_PulsingMic> createState() => _PulsingMicState();
}

class _PulsingMicState extends State<_PulsingMic> 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) {
    return FadeTransition(
      opacity: Tween(begin: 0.3, end: 1.0).animate(_ctrl),
      child: Icon(Icons.mic, size: widget.size, color: widget.color),
    );
  }
}