import 'package:flutter/material.dart';

import '../../../../common/theme/theme.dart';
import '../../../components/spacer/spacer.dart';

class HomePerformance extends StatelessWidget {
  const HomePerformance({super.key});

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(
        vertical: 24,
        horizontal: AppValue.padding,
      ).copyWith(bottom: 0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text(
                'Performa Minggu Ini',
                style: AppStyle.h6.copyWith(
                  fontWeight: FontWeight.w700,
                  color: AppColor.textPrimary,
                  letterSpacing: -0.5,
                ),
              ),
              Container(
                padding: const EdgeInsets.symmetric(
                  horizontal: 12,
                  vertical: 6,
                ),
                decoration: BoxDecoration(
                  gradient: LinearGradient(
                    colors: [
                      AppColor.success.withOpacity(0.1),
                      AppColor.success.withOpacity(0.05),
                    ],
                  ),
                  borderRadius: BorderRadius.circular(20),
                  border: Border.all(
                    color: AppColor.success.withOpacity(0.2),
                    width: 1,
                  ),
                ),
                child: Row(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    Icon(
                      Icons.arrow_upward_rounded,
                      color: AppColor.success,
                      size: 14,
                    ),
                    const SpaceWidth(4),
                    Text(
                      '89%',
                      style: AppStyle.sm.copyWith(
                        color: AppColor.success,
                        fontSize: 12,
                        fontWeight: FontWeight.w700,
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
          const SpaceHeight(20),
          Container(
            padding: const EdgeInsets.all(24),
            decoration: BoxDecoration(
              color: AppColor.white,
              borderRadius: BorderRadius.circular(16),
              border: Border.all(color: AppColor.border.withOpacity(0.5)),
              boxShadow: [
                BoxShadow(
                  color: Colors.black.withOpacity(0.04),
                  blurRadius: 20,
                  offset: const Offset(0, 8),
                ),
              ],
            ),
            child: Column(
              children: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: [
                    _buildPerformanceBar(
                      'Sen',
                      0.8,
                      AppColor.primary,
                      'Rp 2.1M',
                    ),
                    _buildPerformanceBar(
                      'Sel',
                      0.6,
                      AppColor.primary,
                      'Rp 1.8M',
                    ),
                    _buildPerformanceBar(
                      'Rab',
                      0.9,
                      AppColor.success,
                      'Rp 2.4M',
                    ),
                    _buildPerformanceBar(
                      'Kam',
                      0.7,
                      AppColor.primary,
                      'Rp 1.9M',
                    ),
                    _buildPerformanceBar(
                      'Jum',
                      1.0,
                      AppColor.success,
                      'Rp 2.5M',
                    ),
                    _buildPerformanceBar(
                      'Sab',
                      0.85,
                      AppColor.success,
                      'Rp 2.2M',
                    ),
                    _buildPerformanceBar(
                      'Min',
                      0.4,
                      AppColor.textLight,
                      'Rp 1.2M',
                    ),
                  ],
                ),
                const SpaceHeight(24),
                Container(
                  padding: const EdgeInsets.all(16),
                  decoration: BoxDecoration(
                    gradient: LinearGradient(
                      colors: [
                        AppColor.primary.withOpacity(0.05),
                        AppColor.primary.withOpacity(0.02),
                      ],
                    ),
                    borderRadius: BorderRadius.circular(12),
                    border: Border.all(
                      color: AppColor.primary.withOpacity(0.1),
                      width: 1,
                    ),
                  ),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(
                            'Target Minggu Ini',
                            style: TextStyle(
                              fontSize: 12,
                              color: AppColor.textSecondary,
                              fontWeight: FontWeight.w500,
                            ),
                          ),
                          const SpaceHeight(4),
                          Text(
                            'Rp 15.000.000',
                            style: TextStyle(
                              fontSize: 16,
                              fontWeight: FontWeight.w700,
                              color: AppColor.textPrimary,
                            ),
                          ),
                        ],
                      ),
                      Column(
                        crossAxisAlignment: CrossAxisAlignment.end,
                        children: [
                          Text(
                            'Tercapai',
                            style: TextStyle(
                              fontSize: 12,
                              color: AppColor.textSecondary,
                              fontWeight: FontWeight.w500,
                            ),
                          ),
                          const SpaceHeight(4),
                          Row(
                            children: [
                              Text(
                                '89%',
                                style: TextStyle(
                                  fontSize: 16,
                                  fontWeight: FontWeight.w700,
                                  color: AppColor.success,
                                ),
                              ),
                              const SpaceWidth(4),
                              Icon(
                                Icons.trending_up_rounded,
                                color: AppColor.success,
                                size: 16,
                              ),
                            ],
                          ),
                        ],
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildPerformanceBar(
    String day,
    double percentage,
    Color color,
    String amount,
  ) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        // Amount label
        Text(
          amount,
          style: AppStyle.xs.copyWith(
            fontSize: 10,
            fontWeight: FontWeight.w600,
            color: AppColor.textSecondary,
          ),
        ),
        const SpaceHeight(8),
        // Performance bar
        Container(
          height: 80,
          width: 12,
          decoration: BoxDecoration(
            color: AppColor.border.withOpacity(0.3),
            borderRadius: BorderRadius.circular(6),
          ),
          child: Align(
            alignment: Alignment.bottomCenter,
            child: AnimatedContainer(
              duration: Duration(milliseconds: 800 + (day.hashCode % 400)),
              curve: Curves.easeOutCubic,
              height: 80 * percentage,
              decoration: BoxDecoration(
                gradient: LinearGradient(
                  colors: [color, color.withOpacity(0.7)],
                  begin: Alignment.topCenter,
                  end: Alignment.bottomCenter,
                ),
                borderRadius: BorderRadius.circular(6),
                boxShadow: [
                  BoxShadow(
                    color: color.withOpacity(0.3),
                    blurRadius: 4,
                    offset: const Offset(0, 2),
                  ),
                ],
              ),
            ),
          ),
        ),
        const SpaceHeight(12),
        // Day label
        Text(
          day,
          style: AppStyle.xs.copyWith(
            color: AppColor.textSecondary,
            fontWeight: FontWeight.w600,
          ),
        ),
      ],
    );
  }
}