import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:supplier_new/common/settings.dart';

import 'employees.dart';

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

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

  @override
  State<FleetStep2Page> createState() => _FleetStep2PageState();
}

class _FleetStep2PageState extends State<FleetStep2Page> {
  final _formKey = GlobalKey<FormState>();

  // Store multiple tanker entries (collected on Add Tanker)
  final List<Map<String, dynamic>> _tankers = [];

  // Minimal payload + clear (no fields on Step 2 yet)
  Map<String, dynamic> _buildPayload() => {
    "added_at": DateTime.now().toIso8601String(),
    "step": 2,
  };
  void _clearForm() {
    setState(() {});
  }

  void _addTanker() {
    final ok = _formKey.currentState?.validate() ?? true; // no fields => true
    if (!ok) return;
    _tankers.add(_buildPayload());
    _clearForm();
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(content: Text("Tanker added (${_tankers.length})")),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        backgroundColor: Colors.white,
        surfaceTintColor: Colors.transparent,
        elevation: 0,
        scrolledUnderElevation: 0,
        title: const Text("Complete Profile"),
        actions: [
          Padding(
            padding: const EdgeInsets.fromLTRB(10, 10, 0, 10),
            child: IconButton(
              splashRadius: 20,
              padding: EdgeInsets.zero,
              icon: const Image(image: AssetImage('images/calendar_appbar.png'), width: 22, height: 22),
              onPressed: () {},
            ),
          ),
          Padding(
            padding: const EdgeInsets.fromLTRB(0, 10, 10, 10),
            child: IconButton(
              splashRadius: 20,
              padding: EdgeInsets.zero,
              icon: Image.asset('images/notification_appbar.png', width: 22, height: 22),
              onPressed: () {},
            ),
          ),
        ],
      ),
      body: SafeArea(
        child: Form(
          key: _formKey,
          child: ListView(
            padding: const EdgeInsets.fromLTRB(20, 10, 20, 24),
            children: [
              // Step indicator
              Text(
                "Step 2/5",
                style: fontTextStyle(16, const Color(0xFFC3C4C4), FontWeight.w500),
              ),
              const SizedBox(height: 16),

              // FLEET header + small image below (left-aligned)
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisSize: MainAxisSize.min,
                children: [
                  Text("FLEET", style: fontTextStyle(20, const Color(0xFF515253), FontWeight.w600)),
                  const SizedBox(height: 8),
                  Container(
                    width: 24,
                    height: 24,
                    decoration: const BoxDecoration(
                      image: DecorationImage(image: AssetImage('images/truck.png'), fit: BoxFit.contain),
                    ),
                  ),
                ],
              ),

              const SizedBox(height: 6),
              Text(
                "Details about your water tanker fleet",
                style: fontTextStyle(14, const Color(0xFF939495), FontWeight.w500),
              ),
              const SizedBox(height: 16),

              // Header bar ONLY (rounded, separate "card" look)
              _SectionHeaderBar(
                title: "WATER TANKER #1",
                icon: Image.asset('images/arrow-up.png', width: 16, height: 16),
                radius: 20, // rounded corners
              ),
              const SizedBox(height: 12),

              // (No form fields on Step 2 per your snippet)

              const SizedBox(height: 20),

              // Actions
              Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: [
                  SizedBox(
                    width: double.infinity,
                    child: OutlinedButton.icon(
                      onPressed: _addTanker,
                      icon: Image.asset('images/Add_icon.png', width: 16, height: 16),
                      label: Text(
                        "Add Tanker",
                        style: fontTextStyle(14, const Color(0xFF646566), FontWeight.w600),
                      ),
                    ),
                  ),
                  const SizedBox(height: 12),
                  SizedBox(
                    width: double.infinity,
                    child: ElevatedButton(
                      style: ElevatedButton.styleFrom(
                        backgroundColor: const Color(0xFF8270DB),
                        foregroundColor: Colors.white,
                        padding: const EdgeInsets.symmetric(vertical: 14),
                        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(24)),
                      ),
                      onPressed: () {
                        Navigator.push(
                          context,
                          MaterialPageRoute(builder: (_) => const FleetEmployees()),
                        );
                      },
                      child: Text(
                        "Continue",
                        style: fontTextStyle(14, Colors.white, FontWeight.w400),
                      ),
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class _SectionHeaderBar extends StatelessWidget {
  final String title;
  final Widget? icon;
  final Color backgroundColor;
  final Color borderColor;
  final double radius;

  const _SectionHeaderBar({
    required this.title,
    this.icon,
    this.backgroundColor = const Color(0xFFEEEEEE),
    this.borderColor = const Color(0xFFE5E7EB),
    this.radius = 12,
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        color: backgroundColor,
        border: Border.all(color: borderColor, width: 1),
        borderRadius: BorderRadius.circular(radius),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.04),
            blurRadius: 6,
            offset: const Offset(0, 2),
          ),
        ],
      ),
      padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
      child: Row(
        children: [
          Expanded(
            child: Text(
              title,
              style: fontTextStyle(12, const Color(0xFF2D2E30), FontWeight.w600),
            ),
          ),
          if (icon != null) icon!,
        ],
      ),
    );
  }
}