import 'package:design_system/design_system.dart';
import 'package:flutter/material.dart';
import 'package:flutter_modular/flutter_modular.dart';
import 'package:core_localization/core_localization.dart';

class CertificatesHeader extends StatelessWidget {
  final int completedCount;
  final int totalCount;

  const CertificatesHeader({
    super.key,
    required this.completedCount,
    required this.totalCount,
  });

  @override
  Widget build(BuildContext context) {
    // Prevent division by zero
    final double progressValue = totalCount == 0 ? 0 : completedCount / totalCount;
    final int progressPercent = totalCount == 0 ? 0 : (progressValue * 100).round();

    return Container(
      padding: const EdgeInsets.fromLTRB(20, 60, 20, 80),
      // Keeping gradient as per prototype layout requirement
      decoration: const BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.topLeft,
          end: Alignment.bottomRight,
          colors: <Color>[UiColors.primary, Color(0xFF1E40AF)], // Using Primary and a darker shade
        ),
      ),
      child: Column(
        children: <Widget>[
          Row(
            children: <Widget>[
              GestureDetector(
                onTap: () => Modular.to.pop(),
                child: Container(
                  width: 40,
                  height: 40,
                  decoration: BoxDecoration(
                    color: UiColors.white.withOpacity(0.1),
                    shape: BoxShape.circle,
                  ),
                  child: const Icon(
                    UiIcons.chevronLeft, // Swapped LucideIcons
                    color: UiColors.white,
                    size: 20,
                  ),
                ),
              ),
              const SizedBox(width: 12),
              Text(
                t.staff_certificates.title,
                style: UiTypography.headline3m.copyWith( // 18px Bold
                  color: UiColors.white,
                ),
              ),
            ],
          ),
          const SizedBox(height: 32),
          Row(
            children: <Widget>[
              SizedBox(
                width: 96,
                height: 96,
                child: Stack(
                  fit: StackFit.expand,
                  children: <Widget>[
                    CircularProgressIndicator(
                      value: progressValue,
                      strokeWidth: 8,
                      backgroundColor: UiColors.white.withOpacity(0.2),
                      valueColor: const AlwaysStoppedAnimation<Color>(
                        Color(0xFFF9E547), // Yellow from prototype
                      ),
                    ),
                    Center(
                      child: Text(
                        '$progressPercent%',
                        style: UiTypography.display1b.copyWith( // 26px Bold
                          color: UiColors.white,
                        ),
                      ),
                    ),
                  ],
                ),
              ),
              const SizedBox(width: 24),
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Text(
                    t.staff_certificates.progress.title,
                    style: UiTypography.body1b.copyWith( // 16px Bold
                      color: UiColors.white,
                    ),
                  ),
                  const SizedBox(height: 4),
                  Text(
                    t.staff_certificates.progress.verified_count(completed: completedCount, total: totalCount),
                    style: UiTypography.body3r.copyWith( // 12px Regular
                      color: UiColors.white.withOpacity(0.7),
                    ),
                  ),
                  const SizedBox(height: 8),
                  Row(
                    children: <Widget>[
                      const Icon(
                        UiIcons.shield,
                        color: Color(0xFFF9E547),
                        size: 16,
                      ),
                      const SizedBox(width: 8),
                      Text(
                        t.staff_certificates.progress.active,
                        style: UiTypography.body3m.copyWith( // 12px Medium
                          color: const Color(0xFFF9E547),
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            ],
          ),
        ],
      ),
    );
  }
}
