import 'package:flutter/material.dart';

import '../network/connectivity_service.dart';
import '../theme/app_theme.dart';

/// [child] را می‌پوشاند و هنگامِ قطعِ اینترنت یک اوورلیِ «اتصال برقرار نیست» با
/// دکمه‌ی «تلاش مجدد» نشان می‌دهد. به‌محضِ برقراریِ اتصال، خودش کنار می‌رود.
class OfflineGate extends StatelessWidget {
  final Widget child;
  const OfflineGate({super.key, required this.child});

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        child,
        ValueListenableBuilder<bool>(
          valueListenable: ConnectivityService.I.online,
          builder: (context, online, _) =>
              online ? const SizedBox.shrink() : const _OfflineOverlay(),
        ),
      ],
    );
  }
}

class _OfflineOverlay extends StatefulWidget {
  const _OfflineOverlay();
  @override
  State<_OfflineOverlay> createState() => _OfflineOverlayState();
}

class _OfflineOverlayState extends State<_OfflineOverlay> {
  bool _busy = false;

  Future<void> _retry() async {
    setState(() => _busy = true);
    await ConnectivityService.I.recheck();
    if (mounted) setState(() => _busy = false);
  }

  @override
  Widget build(BuildContext context) {
    return Positioned.fill(
      child: Material(
        color: Colors.black.withValues(alpha: 0.82),
        child: Center(
          child: Container(
            margin: const EdgeInsets.symmetric(horizontal: 32),
            padding: const EdgeInsets.fromLTRB(24, 28, 24, 22),
            decoration: BoxDecoration(
              gradient: const LinearGradient(
                begin: Alignment.topCenter,
                end: Alignment.bottomCenter,
                colors: [AppColors.lapisMid, AppColors.lapisLo],
              ),
              borderRadius: BorderRadius.circular(20),
              border: Border.all(color: AppColors.gold, width: 2),
              boxShadow: const [
                BoxShadow(color: Colors.black54, blurRadius: 20),
              ],
            ),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                Container(
                  width: 72,
                  height: 72,
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    color: AppColors.bgDark,
                    border: Border.all(color: AppColors.goldDark, width: 2),
                  ),
                  child: const Icon(Icons.wifi_off_rounded,
                      color: AppColors.gold, size: 38),
                ),
                const SizedBox(height: 16),
                const Text(
                  'اتصال به اینترنت برقرار نیست',
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    color: AppColors.gold,
                    fontSize: 18,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                const SizedBox(height: 8),
                const Text(
                  'اینترنتِ دستگاهت را بررسی کن و دوباره تلاش کن.',
                  textAlign: TextAlign.center,
                  style: TextStyle(color: Colors.white70, fontSize: 13),
                ),
                const SizedBox(height: 22),
                SizedBox(
                  width: double.infinity,
                  child: ElevatedButton.icon(
                    onPressed: _busy ? null : _retry,
                    style: ElevatedButton.styleFrom(
                      backgroundColor: AppColors.gold,
                      foregroundColor: AppColors.bg,
                      padding: const EdgeInsets.symmetric(vertical: 12),
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(12),
                      ),
                    ),
                    icon: _busy
                        ? const SizedBox(
                            width: 18,
                            height: 18,
                            child: CircularProgressIndicator(
                                strokeWidth: 2, color: AppColors.bg),
                          )
                        : const Icon(Icons.refresh, size: 20),
                    label: Text(_busy ? 'در حال بررسی…' : 'تلاش مجدد'),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}