import 'package:auto_route/auto_route.dart';
import 'package:flutter/material.dart';

import '../../../../../../common/theme/theme.dart';
import '../../../../../../common/ui/clipper/voucher_clipper.dart';
import '../../../../../../common/ui/painter/dashed_line_painter.dart';
import '../../../../../router/app_router.gr.dart';

class VoucherCard extends StatelessWidget {
  final String title;
  final String subtitle;
  final String expireDate;
  final String minTransaction;
  const VoucherCard({
    super.key,
    required this.title,
    required this.subtitle,
    required this.expireDate,
    required this.minTransaction,
  });

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () => context.router.push(VoucherDetailRoute()),
      child: Container(
        decoration: BoxDecoration(
          boxShadow: [
            BoxShadow(
              color: Colors.black.withOpacity(0.08),
              blurRadius: 12,
              offset: Offset(0, 4),
              spreadRadius: 0,
            ),
            BoxShadow(
              color: Colors.black.withOpacity(0.04),
              blurRadius: 6,
              offset: Offset(0, 2),
              spreadRadius: 0,
            ),
          ],
        ),
        child: ClipPath(
          clipper: VoucherClipper(),
          child: Container(
            decoration: BoxDecoration(color: Colors.white),
            child: Column(
              children: [
                // Main Content
                Padding(
                  padding: EdgeInsets.all(16),
                  child: Row(
                    children: [
                      Expanded(
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text(
                              title,
                              style: AppStyle.md.copyWith(
                                color: AppColor.textPrimary,
                                fontWeight: FontWeight.w600,
                              ),
                            ),
                            SizedBox(height: 4),
                            Text(
                              subtitle,
                              style: AppStyle.sm.copyWith(
                                color: AppColor.textSecondary,
                              ),
                            ),
                          ],
                        ),
                      ),
                      SizedBox(width: 12),
                      // Voucher Icon
                      Container(
                        width: 50,
                        height: 50,
                        decoration: BoxDecoration(
                          color: Colors.white,
                          borderRadius: BorderRadius.circular(12),
                          border: Border.all(
                            color: Colors.grey[300]!,
                            width: 1,
                          ),
                        ),
                        child: Stack(
                          alignment: Alignment.center,
                          children: [
                            Icon(
                              Icons.local_offer_outlined,
                              color: AppColor.primary,
                              size: 24,
                            ),
                            Positioned(
                              top: 6,
                              right: 6,
                              child: Container(
                                width: 16,
                                height: 16,
                                decoration: BoxDecoration(
                                  color: AppColor.error,
                                  shape: BoxShape.circle,
                                ),
                                child: Icon(
                                  Icons.percent,
                                  color: Colors.white,
                                  size: 10,
                                ),
                              ),
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),
                ),

                // Dashed line divider
                Container(
                  height: 1,
                  margin: EdgeInsets.symmetric(horizontal: 20),
                  child: CustomPaint(
                    size: Size(double.infinity, 1),
                    painter: DashedLinePainter(),
                  ),
                ),

                // Bottom Section
                Padding(
                  padding: EdgeInsets.all(16),
                  child: Row(
                    children: [
                      Expanded(
                        child: Row(
                          children: [
                            Expanded(
                              child: Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  Text(
                                    'Berlaku Hingga',
                                    style: AppStyle.xs.copyWith(
                                      color: AppColor.textSecondary,
                                      fontSize: 10,
                                    ),
                                  ),
                                  SizedBox(height: 2),
                                  Text(
                                    expireDate,
                                    style: TextStyle(
                                      color: AppColor.textPrimary,
                                      fontSize: 14,
                                      fontWeight: FontWeight.w500,
                                    ),
                                  ),
                                ],
                              ),
                            ),
                            SizedBox(width: 16),
                            Expanded(
                              child: Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  Text(
                                    'Min Transaksi',
                                    style: AppStyle.xs.copyWith(
                                      color: AppColor.textSecondary,
                                      fontSize: 10,
                                    ),
                                  ),
                                  SizedBox(height: 2),
                                  Text(
                                    minTransaction,
                                    style: AppStyle.md.copyWith(
                                      color: AppColor.textPrimary,
                                      fontWeight: FontWeight.w500,
                                    ),
                                  ),
                                ],
                              ),
                            ),
                          ],
                        ),
                      ),
                      SizedBox(width: 16),
                      // Pakai Button
                      Container(
                        padding: EdgeInsets.symmetric(
                          horizontal: 24,
                          vertical: 10,
                        ),
                        decoration: BoxDecoration(
                          color: AppColor.primary,
                          borderRadius: BorderRadius.circular(20),
                        ),
                        child: Text(
                          'Pakai',
                          style: TextStyle(
                            color: AppColor.white,
                            fontSize: 14,
                            fontWeight: FontWeight.w600,
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}
