import 'package:flutter/material.dart';
import 'package:supplier_new/common/settings.dart';
import 'package:supplier_new/resources/resources_sources.dart';
import 'fleet.dart';
import 'resources_drivers.dart';
import 'resources_sources.dart';


import 'employees.dart';

void main() => runApp(const MaterialApp(home: ResourcesDriverScreen()));

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

  @override
  State<ResourcesDriverScreen> createState() => _ResourcesDriverScreenState();
}

class _ResourcesDriverScreenState extends State<ResourcesDriverScreen> {
  int selectedTab = 1; // default "Drivers"
  String search = '';

  final List<Map<String, dynamic>> drivers = [
    {
      'name': 'Ravi Kumar',
      'status': 'available',
      'location': 'Gandipet',
      'deliveries': 134,
      'commission': '₹500/day',
    },
    {
      'name': 'Ravi Kumar',
      'status': 'offline',
      'location': 'Gandipet',
      'deliveries': 134,
      'commission': '₹500/day',
    },
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Column(
        children: [
          Container(
            margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
            padding: const EdgeInsets.all(14),
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(12),
              border: Border.all(color: const Color(0xFF939495)),
            ),
            child: Row(
              children: [
                Column(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    Container(
                      width: 40,
                      height: 40,
                      decoration: const BoxDecoration(
                        color: Color(0xFFF6F0FF),
                        borderRadius: BorderRadius.all(Radius.circular(8)),
                      ),
                      child: Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Image.asset('images/drivers.png',
                            fit: BoxFit.contain),
                      ),
                    ),
                    const SizedBox(height: 8),
                    Text('Total Drivers',
                        style: fontTextStyle(
                            12, const Color(0xFF2D2E30), FontWeight.w500)),
                  ],
                ),
                const Spacer(),
                Column(
                  crossAxisAlignment: CrossAxisAlignment.end,
                  children: [
                    Text('09',
                        style: fontTextStyle(
                            24, const Color(0xFF0D3771), FontWeight.w500)),
                    const SizedBox(height: 6),
                    Text('+1 since last month',
                        style: fontTextStyle(
                            10, const Color(0xFF646566), FontWeight.w400)),
                  ],
                ),
              ],
            ),
          ),

          // Metrics row
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 16),
            child: IntrinsicHeight(
              child: Row(
                children: const [
                  Expanded(
                      child: SmallMetricBox(title: 'On delivery', value: '2')),
                  SizedBox(width: 8),
                  Expanded(
                      child: SmallMetricBox(title: 'Available', value: '3')),
                  SizedBox(width: 8),
                  Expanded(child: SmallMetricBox(title: 'Offline', value: '1')),
                ],
              ),
            ),
          ),

          const SizedBox(height: 12),

          // Gray background with search and list
          Expanded(
            child: Container(
              color: const Color(0xFFF5F5F5),
              child: Padding(
                padding: const EdgeInsets.fromLTRB(16, 12, 16, 0),
                child: Column(
                  children: [
                    Row(
                      children: [
                        Expanded(
                          child: Container(
                            padding: const EdgeInsets.symmetric(
                                horizontal: 12, vertical: 6),
                            decoration: BoxDecoration(
                              border: Border.all(
                                  color: const Color(0xFF939495), width: 0.5),
                              borderRadius: BorderRadius.circular(22),
                            ),
                            child: Row(
                              children: [
                                Image.asset('images/search.png',
                                    width: 18, height: 18),
                                const SizedBox(width: 8),
                                Expanded(
                                  child: TextField(
                                    decoration: InputDecoration(
                                      hintText: 'Search',
                                      hintStyle: fontTextStyle(12,
                                          Color(0xFF939495), FontWeight.w400),
                                      border: InputBorder.none,
                                      isDense: true,
                                    ),
                                    onChanged: (v) =>
                                        setState(() => search = v),
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ),
                        const SizedBox(width: 16),
                        Image.asset("images/icon_tune.png",
                            width: 24, height: 24),
                        const SizedBox(width: 16),
                        Image.asset("images/up_down arrow.png",
                            width: 24, height: 24),
                      ],
                    ),
                    const SizedBox(height: 12),

                    // Driver list
                    Expanded(
                      child: ListView.separated(
                        itemCount: drivers.length,
                        separatorBuilder: (_, __) => const SizedBox(height: 12),
                        itemBuilder: (context, idx) {
                          final d = drivers[idx];
                          return DriverCard(
                            name: d['name'],
                            status: d['status'],
                            location: d['location'],
                            deliveries: d['deliveries'],
                            commission: d['commission'],
                          );
                        },
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
        ],
      ),

      // Floating Action Button
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // TODO: Navigate to the next step/screen
          // Navigator.push(context, MaterialPageRoute(builder: (_) =>  FleetEmployees()));

        },
        backgroundColor: Colors.black,
        shape: const CircleBorder(),
        child: const Icon(Icons.add, color: Colors.white),
      ),
    );
  }
}

// Metric Box widget
class SmallMetricBox extends StatelessWidget {
  final String title;
  final String value;

  const SmallMetricBox({super.key, required this.title, required this.value});

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(12),
        border: Border.all(color: const Color(0xFF939495)),
        color: Colors.white,
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(title,
              style:
                  fontTextStyle(12, const Color(0xFF2D2E30), FontWeight.w500)),
          const SizedBox(height: 4),
          Text(value,
              style:
                  fontTextStyle(24, const Color(0xFF0D3771), FontWeight.w500)),
        ],
      ),
    );
  }
}

// Driver Card widget
class DriverCard extends StatelessWidget {
  final String name;
  final String status;
  final String location;
  final int deliveries;
  final String commission;

  const DriverCard({
    super.key,
    required this.name,
    required this.status,
    required this.location,
    required this.deliveries,
    required this.commission,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(14),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(12),
        border: Border.all(color: Colors.grey.shade300),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // Row with name + phone
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Row(
                children: [
                  ClipOval(
                    child: Image.asset("images/profile_pic.png",
                        height: 36, width: 36, fit: BoxFit.cover),
                  ),
                  const SizedBox(width: 10),
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(name,
                          style: fontTextStyle(
                              14, const Color(0xFF2D2E30), FontWeight.w500)),
                      const SizedBox(height: 4),
                      Container(
                        padding: const EdgeInsets.symmetric(
                            horizontal: 6, vertical: 2),
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(4),
                          border: Border.all(
                            color: status == "available"
                                ? Colors.green
                                : Colors.grey,
                          ),
                        ),
                        child: Text(
                          status,
                          style: fontTextStyle(
                            10,
                            status == "available" ? Colors.green : Colors.grey,
                            FontWeight.w400,
                          ),
                        ),
                      ),
                    ],
                  ),
                ],
              ),
              Container(
                padding: const EdgeInsets.all(8), // spacing around the icon
                decoration: const BoxDecoration(
                  color: Color(0xFFF5F6F6), // background color
                  shape: BoxShape.circle, // makes it perfectly round
                ),
                child: Image.asset(
                  "images/phone_icon.png",
                  width: 20,
                  height: 20,
                ),
              ),
            ],
          ),
          const SizedBox(height: 12),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text.rich(
                TextSpan(
                  children: [
                    TextSpan(
                      text: "Location\n", style: fontTextStyle(8, Color(0xFF939495), FontWeight.w500,
                      ),
                    ),
                    TextSpan(
                      text: location, style: fontTextStyle(12, const Color(0xFF515253), FontWeight.w500,),
                    ),
                  ],
                ),
                textAlign: TextAlign.center,
              ),
              Text.rich(
                TextSpan(
                  children: [
                    TextSpan(
                      text: "Deliveries\n", style: fontTextStyle(8, const Color(0xFF939495), FontWeight.w400,
                      ),
                    ),
                    TextSpan(
                      text: deliveries.toString(), style: fontTextStyle(12, const Color(0xFF515253), FontWeight.w500,),
                    ),
                  ],
                ),
                textAlign: TextAlign.center,
              ),

              // Commission
              Text.rich(
                TextSpan(
                  children: [
                    TextSpan(
                      text: "Commission\n", style: fontTextStyle(8,  Color(0xFF939495), FontWeight.w400,
                      ),
                    ),
                    TextSpan(
                      text: commission, style: fontTextStyle(12, Color(0xFF515253), FontWeight.w500,),
                    ),
                  ],
                ),
                textAlign: TextAlign.center,
              ),
            ],
          ),

          const SizedBox(height: 12),

          // Buttons row
          Row(
            mainAxisAlignment: MainAxisAlignment.end,
            children: [
              OutlinedButton(
                style: OutlinedButton.styleFrom(
                  side: const BorderSide(color: Color(0xFF939495)),
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(16)),
                ),
                onPressed: () {},
                child: Text("View Schedule",
                    style: fontTextStyle(
                        12,  Color(0xFF515253), FontWeight.w400)),
              ),
              const SizedBox(width: 12),
              ElevatedButton(
                style: ElevatedButton.styleFrom(
                  backgroundColor: const Color(0xFF8270DB),
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(16)),
                ),
                onPressed: () {},

                child: Text("Assign", style: fontTextStyle(12, Color(0xFFFFFFFF), FontWeight.w400)
                ),
              ),
            ],
          )
        ],
      ),
    );
  }
}