import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import '../widgets/gradient_line.dart';
import '../widgets/status_circle.dart';

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

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.symmetric(horizontal: 18, vertical: 6),
      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(22),
        boxShadow: const [
          BoxShadow(
            color: Colors.black26,
            blurRadius: 12,
            offset: Offset(0, 6),
          ),
        ],
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          const Text(
            "يوم عمل",
            textAlign: TextAlign.right,
            style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
          ),

          const SizedBox(height: 16),

          /// 🔥 FIXED: CENTERED LINES BETWEEN CIRCLES
          Row(
            children: [
              _StatusItem(
                color: const Color(0xFFD16400),
                icon: SvgPicture.asset('assets/images/money3.svg', width: 20),
                label: "سعر كلي\n18,250 د.ع",
              ),

              /// LINE CENTERED VERTICALLY
              Expanded(
                child: Center(
                  child: GradientLine(
                    start: const Color(0xFFD16400),
                    end: const Color(0xFF1266A8),
                  ),
                ),
              ),

              _StatusItem(
                color: const Color(0xFF1266A8),
                icon: SvgPicture.asset('assets/images/watch.svg', width: 20),
                label: "عدد ساعات\n5.50",
              ),

              Expanded(
                child: Center(
                  child: GradientLine(
                    start: const Color(0xFF1266A8),
                    end: const Color(0xFFB00000),
                  ),
                ),
              ),

              _StatusItem(
                color: const Color(0xFFB00000),
                icon: SvgPicture.asset('assets/images/out.svg', width: 20),
                label: "خروج\n1:14pm",
              ),

              Expanded(
                child: Center(
                  child: GradientLine(
                    start: const Color(0xFFB00000),
                    end: const Color(0xFF0A8F6B),
                  ),
                ),
              ),

              _StatusItem(
                color: const Color(0xFF0A8F6B),
                icon: SvgPicture.asset('assets/images/in.svg', width: 20),
                label: "دخول\n1:14pm",
              ),
            ],
          ),

          const SizedBox(height: 12),

          const Divider(color: Colors.black38),

          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: const [
              Text("2025.12.1", style: TextStyle(fontSize: 12)),
              Text("ملاحظات ان وجدت", style: TextStyle(fontSize: 12)),
            ],
          ),
        ],
      ),
    );
  }
}

class _StatusItem extends StatelessWidget {
  final Color color;
  final Widget icon;
  final String label;

  const _StatusItem({
    required this.color,
    required this.icon,
    required this.label,
  });

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        StatusCircle(color: color, icon: icon),
        // const SizedBox(height: 3),
        Text(label, textAlign: TextAlign.center, style: const TextStyle(fontSize: 12)),
      ],
    );
  }
}