import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../providers/mark_list_provider.dart';

class MarkListScreen extends StatefulWidget {
  const MarkListScreen({super.key});

  @override
  State<MarkListScreen> createState() => _MarkListScreenState();
}

class _MarkListScreenState extends State<MarkListScreen> {
  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((_) {
      final provider = Provider.of<MarkListProvider>(context, listen: false);
      provider.init(context);
      provider.loadMarks(context);
    });
  }

  @override
  Widget build(BuildContext context) {
    final marks = Provider.of<MarkListProvider>(context);

    final screenWidth = MediaQuery.of(context).size.width;
    final scale = (screenWidth / 390).clamp(0.82, 1.35);

    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        backgroundColor: Colors.white,
        elevation: 0,
        centerTitle: true,
        iconTheme: const IconThemeData(color: Colors.black),
        title: Text(
          "All Mark Numbers",
          style: TextStyle(
            color: Colors.black,
            fontSize: 20 * scale,
            fontWeight: FontWeight.w700,
          ),
        ),
      ),

      body: marks.loading
          ? const Center(child: CircularProgressIndicator())
          : ListView.builder(
        padding: EdgeInsets.all(10 * scale),
        itemCount: marks.marks.length,
        itemBuilder: (_, i) {
          final m = marks.marks[i];
          final status =
          (m['status'] ?? '').toString().toLowerCase();

          final LinearGradient statusGradient =
          status == 'active'
              ? const LinearGradient(
            colors: [
              Color(0xFF2ECC71), // Green
              Color(0xFF1E8449), // Deep Emerald
            ],
          )
              : const LinearGradient(
            colors: [
              Color(0xFFE74C3C), // Red
              Color(0xFFC0392B), // Dark Red
            ],
          );

          return Container(
            margin: EdgeInsets.only(bottom: 10 * scale),
            padding: EdgeInsets.all(12 * scale),
            decoration: BoxDecoration(
              gradient: const LinearGradient(
                colors: [
                  Color(0xFF2196F3),
                  Color(0xFF64B5F6),
                ],
                begin: Alignment.topLeft,
                end: Alignment.bottomRight,
              ),
              borderRadius: BorderRadius.circular(14 * scale),
              boxShadow: [
                BoxShadow(
                  color: Colors.black.withOpacity(0.06),
                  blurRadius: 5 * scale,
                  offset: Offset(0, 2 * scale),
                ),
              ],
            ),
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                // LEFT TEXT
                Expanded(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        m['mark_no'],
                        style: TextStyle(
                          color: Colors.white,
                          fontSize: 16 * scale,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                      SizedBox(height: 3 * scale),
                      Text(
                        "${m['origin']} → ${m['destination']}",
                        style: TextStyle(
                          color: Colors.white,
                          fontSize: 13 * scale,
                          fontWeight: FontWeight.w500,
                        ),
                      ),
                    ],
                  ),
                ),

                // STATUS BADGE (GREEN / RED)
                Container(
                  padding: EdgeInsets.symmetric(
                    horizontal: 10 * scale,
                    vertical: 5 * scale,
                  ),
                  decoration: BoxDecoration(
                    gradient: statusGradient,
                    borderRadius: BorderRadius.circular(20 * scale),
                  ),
                  child: Text(
                    m['status'],
                    style: TextStyle(
                      fontSize: 11.5 * scale,
                      color: Colors.white,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ),
              ],
            ),
          );
        },
      ),
    );
  }
}