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


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

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

  @override
  State<ResourcesSourceScreen> createState() => _ResourcesSourceScreenState();
}

class _ResourcesSourceScreenState extends State<ResourcesSourceScreen> {
  int selectedTab = 2;
  String search = '';

  final List<Map<String, dynamic>> items = [
    {
      'title': 'Gandipet Water Supply',
      'subtitle': 'Road No.34, Blah',
    },
    {
      'title': 'Gandipet Water Supply',
      'subtitle': 'Road No.34, Blah',
    },
    {
      'title': 'Gandipet Water Supply',
      'subtitle': 'Road No.34, Blah',
    },
    {
      'title': 'Gandipet Water Supply',
      'subtitle': 'Road No.34, Blah',
    },
    {
      'title': 'Gandipet Water Supply',
      'subtitle': 'Road No.34, Blah',
    },
  ];

  @override
  Widget build(BuildContext context) {
    final filtered = items.where((it) {
      final q = search.trim().toLowerCase();
      if (q.isEmpty) return true;
      return it['title'].toLowerCase().contains(q) ||
          it['subtitle'].toLowerCase().contains(q) ||
          (it['owner']?.toLowerCase() ?? '').contains(q);
    }).toList();

    return Scaffold(
      backgroundColor: Colors.white,

      body: Column(
        children: [
          // Top card section
          Container(
            color: Colors.white,
            padding: const EdgeInsets.fromLTRB(16, 12, 16, 12),
            child: Column(
              children: [
                const SizedBox(height: 12),
                // Total Source Locations card
                Container(
                  width: double.infinity,
                  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 Source Locations',
                            style: fontTextStyle(12, const Color(0xFF2D2E30), FontWeight.w500),
                          ),
                        ],
                      ),
                      const Spacer(),
                      Column(
                        crossAxisAlignment: CrossAxisAlignment.end,
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          Text(
                            '04',
                            style: fontTextStyle(24, const Color(0xFF0D3771), FontWeight.w500),
                          ),
                          const SizedBox(height: 6),
                          Text('no recent changes',
                              style: fontTextStyle(10, const Color(0xFF646566), FontWeight.w400)),
                        ],
                      ),
                    ],
                  ),
                ),

                const SizedBox(height: 12),
                // Metrics boxes
                IntrinsicHeight(
                  child: Row(
                    crossAxisAlignment: CrossAxisAlignment.stretch,
                    children: [
                      Expanded(child: SmallMetricBox(title: 'Drinking water', value: '2')),
                      const SizedBox(width: 8),
                      Expanded(child: SmallMetricBox(title: 'Bore water', value: '3')),
                      const SizedBox(width: 8),
                      Expanded(child: SmallMetricBox(title: 'Both', value: '1')),
                    ],
                  ),
                ),
              ],
            ),
          ),

          // SECOND SECTION (gray background)
          Expanded(
            child: Container(
              color: const Color(0xFFF5F5F5),
              child: Padding(
                padding: const EdgeInsets.fromLTRB(16, 12, 16, 0),
                child: Column(
                  children: [
                    // Search row
                    Row(
                      children: [
                        SizedBox(
                          width: 270,
                          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: [
                                Container(
                                  width: 20,
                                  height: 20,
                                  decoration: const BoxDecoration(
                                    image: DecorationImage(
                                        image: AssetImage('images/search.png'),
                                        fit: BoxFit.contain),
                                  ),
                                ),
                                const SizedBox(width: 8),
                                Expanded(
                                  child: TextField(
                                    decoration: InputDecoration(
                                      hintText: 'Search',
                                      hintStyle: fontTextStyle(12, const Color(0xFF939495), FontWeight.w400),
                                      border: InputBorder.none,
                                      isDense: true,
                                    ),
                                    onChanged: (v) => setState(() => search = v),
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ),
                        const SizedBox(width: 16),
                        Container(
                          width: 24,
                          height: 24,
                          decoration: const BoxDecoration(
                            image: DecorationImage(
                                image: AssetImage('images/icon_tune.png'),
                                fit: BoxFit.contain),
                          ),
                        ),
                        const SizedBox(width: 16),
                        Container(
                          width: 24,
                          height: 24,
                          decoration: const BoxDecoration(
                            image: DecorationImage(
                                image: AssetImage('images/up_down arrow.png'),
                                fit: BoxFit.contain),
                          ),
                        ),
                      ],
                    ),

                    const SizedBox(height: 12),

                    // Cards List
                    Expanded(
                      child: ListView.separated(
                        itemCount: filtered.length,
                        separatorBuilder: (_, __) => const SizedBox(height: 10),
                        itemBuilder: (context, idx) {
                          final it = filtered[idx];
                          return TankCard(
                            title: it['title'],
                            subtitle: it['subtitle'],
                          );
                        },
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
        ],
      ),

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

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

// ====== SmallMetricBox ======
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(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(title,
              maxLines: 1,
              overflow: TextOverflow.ellipsis,
              style: fontTextStyle(12, const Color(0xFF2D2E30), FontWeight.w500)),
          Text(value,
              style: fontTextStyle(24, const Color(0xFF0D3771), FontWeight.w500)),
        ],
      ),
    );
  }
}

// ====== TankCard (with phone icon inside) ======
class TankCard extends StatelessWidget {
  final String title;
  final String subtitle;

  const TankCard({
    super.key,
    required this.title,
    required this.subtitle,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(12),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(12),
        border: Border.all(color: Colors.grey.shade200),
      ),
      child: Row(
        children: [
          // Title and subtitle
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(title,
                    style: fontTextStyle(14, const Color(0xFF343637), FontWeight.w600)),
                const SizedBox(height: 6),
                Text(subtitle,
                    style: fontTextStyle(10, const Color(0xFF515253), FontWeight.w600)),
              ],
            ),
          ),
          const SizedBox(width: 8),
          // Phone icon inside card
          Container(
            padding: const EdgeInsets.all(8),
            decoration: const BoxDecoration(
              color: Color(0xFFF5F6F6),
              shape: BoxShape.circle,
            ),
            child: Image.asset(
              "images/phone_icon.png",
              width: 20,
              height: 20,
            ),
          ),
        ],
      ),
    );
  }
}