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(
        UiConstants.space5,
        UiConstants.space10,
        UiConstants.space5,
        UiConstants.space20,
      ),
      // Keeping gradient as per prototype layout requirement
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.topLeft,
          end: Alignment.bottomRight,
          colors: <Color>[
            UiColors.primary,
            UiColors.primary.withValues(alpha: 0.8),
          ],
        ),
      ),
      child: Column(
        children: <Widget>[
          Row(
            children: <Widget>[
              GestureDetector(
                onTap: () => Modular.to.pop(),
                child: Container(
                  width: UiConstants.space10,
                  height: UiConstants.space10,
                  decoration: BoxDecoration(
                    color: UiColors.white.withValues(alpha: 0.1),
                    shape: BoxShape.circle,
                  ),
                  child: const Icon(
                    UiIcons.chevronLeft,
                    color: UiColors.white,
                    size: UiConstants.iconMd,
                  ),
                ),
              ),
              const SizedBox(width: UiConstants.space3),
              Text(
                t.staff_certificates.title,
                style: UiTypography.headline3m.white,
              ),
            ],
          ),
          const SizedBox(height: UiConstants.space8),
          Row(
            children: <Widget>[
              SizedBox(
                width: 96,
                height: 96,
                child: Stack(
                  fit: StackFit.expand,
                  children: <Widget>[
                    CircularProgressIndicator(
                      value: progressValue,
                      strokeWidth: 8,
                      backgroundColor: UiColors.white.withValues(alpha: 0.2),
                      valueColor: const AlwaysStoppedAnimation<Color>(
                        UiColors.accent, // Yellow from prototype
                      ),
                    ),
                    Center(
                      child: Text(
                        '$progressPercent%',
                        style: UiTypography.display1b.white,
                      ),
                    ),
                  ],
                ),
              ),
              const SizedBox(width: UiConstants.space6),
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Text(
                    t.staff_certificates.progress.title,
                    style: UiTypography.body1b.white,
                  ),
                  const SizedBox(height: UiConstants.space1),
                  Text(
                    t.staff_certificates.progress.verified_count(
                        completed: completedCount, total: totalCount),
                    style: UiTypography.body3r.copyWith(
                      color: UiColors.white.withValues(alpha: 0.7),
                    ),
                  ),
                  const SizedBox(height: UiConstants.space2),
                  Row(
                    children: <Widget>[
                      const Icon(
                        UiIcons.shield,
                        color: UiColors.accent,
                        size: UiConstants.iconSm,
                      ),
                      const SizedBox(width: UiConstants.space2),
                      Text(
                        t.staff_certificates.progress.active,
                        style: UiTypography.body3m.accent,
                      ),
                    ],
                  ),
                ],
              ),
            ],
          ),
        ],
      ),
    );
  }
}
