import 'package:flutter/material.dart';

class TankerDetailsPage extends StatefulWidget {
  var tankerDetails;
  var status;
  TankerDetailsPage({this.tankerDetails, this.status});
  @override
  State<TankerDetailsPage> createState() => _TankerDetailsPageState();
}

class _TankerDetailsPageState extends State<TankerDetailsPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        backgroundColor: Colors.white,
        elevation: 0,
        leading: IconButton(
          icon: const Icon(Icons.arrow_back_ios, color: Colors.black),
          onPressed: () => Navigator.pop(context),
        ),
        title: Text(
          widget.tankerDetails.tanker_name.isNotEmpty
              ? widget.tankerDetails.tanker_name[0].toUpperCase() +
              widget.tankerDetails.tanker_name.substring(1)
              : '',
          style: const TextStyle(
            color: Colors.black,
            fontSize: 16,
            fontWeight: FontWeight.w600,
          ),
        ),
        centerTitle: false,
        actions: [
          TextButton(
            onPressed: () {},
            child: const Text(
              "HELP",
              style: TextStyle(
                color: Color(0xFF4F46E5),
                fontWeight: FontWeight.w600,
                fontSize: 14,
              ),
            ),
          ),
        ],
      ),
      body: SingleChildScrollView(
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 16),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              // 🛻 Tanker Image
              ClipRRect(
                borderRadius: BorderRadius.circular(12),
                child: Stack(
                  children: [
                    Image.asset(
                      'images/tanker_image.jpeg', // Replace with your image
                      width: double.infinity,
                      height: 180,
                      fit: BoxFit.cover,
                    ),
                    /*Positioned(
                      bottom: 12,
                      left: 12,
                      child: Row(
                        children: [
                          _buildStatusChip("filled", const Color(0xFF4F46E5)),
                          const SizedBox(width: 8),
                          _buildStatusChip("available", const Color(0xFF0A9E04)),
                        ],
                      ),
                    ),*/
                  ],
                ),
              ),
              const SizedBox(height: 16),
              Row(
                children: [
                  _buildStatusChip("filled", const Color(0xFF4F46E5)),
                  const SizedBox(width: 8),
                  _buildStatusChip("available", const Color(0xFF0A9E04)),
                ],
              ),
              const SizedBox(height: 16),

              // 🚚 Tanker Info
              Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  const CircleAvatar(
                    radius: 18,
                    backgroundImage: AssetImage('images/avatar.png'),
                  ),
                  const SizedBox(width: 12),
                  Expanded(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          "Ramesh Krishna",
                          style: TextStyle(
                            fontSize: 14,
                            fontWeight: FontWeight.w600,
                            color: Colors.black,
                          ),
                        ),
                        SizedBox(height: 2),
                        Text(
                          widget.tankerDetails.tanker_name,
                          style: TextStyle(
                            fontSize: 16,
                            fontWeight: FontWeight.w700,
                            color: Colors.black,
                          ),
                        ),
                        SizedBox(height: 2),
                        Text(
                          widget.tankerDetails.type_of_water+' - '+widget.tankerDetails.capacity+' L',
                          style: TextStyle(
                            fontSize: 12,
                            color: Colors.black54,
                          ),
                        ),
                      ],
                    ),
                  ),
                  Text(
                    widget.tankerDetails.license_plate,
                    style: TextStyle(
                      fontSize: 12,
                      color: Colors.black54,
                      fontWeight: FontWeight.w500,
                    ),
                  ),
                ],
              ),
              const SizedBox(height: 24),

              // 📍 Recent Trips
              const Text(
                "RECENT TRIPS",
                style: TextStyle(
                  fontSize: 12,
                  fontWeight: FontWeight.w600,
                  color: Colors.black87,
                ),
              ),
              const SizedBox(height: 12),

              _buildTripCard(
                driverName: "Ramesh Krishna",
                time: "7:02 PM, 28 Jun 2025",
                from: "Bachupally Filling Station",
                to: "Akriti Heights",
              ),
              const SizedBox(height: 8),
              _buildTripCard(
                driverName: "Ramesh Krishna",
                time: "12:44 PM, 26 Jun 2025",
                from: "Bachupally Filling Station",
                to: "Akriti Heights",
              ),
              const SizedBox(height: 30),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildStatusChip(String label, Color color) {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 4),
      decoration: BoxDecoration(
        color: color.withOpacity(0.1),
        borderRadius: BorderRadius.circular(20),
        border: Border.all(color: color),
      ),
      child: Text(
        label,
        style: TextStyle(
          color: color,
          fontSize: 12,
          fontWeight: FontWeight.w600,
        ),
      ),
    );
  }

  Widget _buildTripCard({
    required String driverName,
    required String time,
    required String from,
    required String to,
  }) {
    return Container(
      padding: const EdgeInsets.all(12),
      decoration: BoxDecoration(
        color: const Color(0xFFF8F8F8),
        borderRadius: BorderRadius.circular(12),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // Driver + time
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Row(
                children: [
                  const CircleAvatar(
                    radius: 14,
                    backgroundImage: AssetImage('images/avatar.png'),
                  ),
                  const SizedBox(width: 8),
                  Text(
                    driverName,
                    style: const TextStyle(
                      fontWeight: FontWeight.w600,
                      fontSize: 13,
                    ),
                  ),
                ],
              ),
              Text(
                time,
                style: const TextStyle(
                  fontSize: 11,
                  color: Colors.black54,
                ),
              ),
            ],
          ),
          const SizedBox(height: 8),
          // From location
          Row(
            children: [
              const Icon(Icons.location_on, color: Color(0xFF4F46E5), size: 16),
              const SizedBox(width: 6),
              Expanded(
                child: Text(
                  from,
                  style: const TextStyle(
                    fontSize: 13,
                    fontWeight: FontWeight.w600,
                    color: Colors.black,
                  ),
                ),
              ),
            ],
          ),
          const SizedBox(height: 4),
          // To location
          Row(
            children: [
              const Icon(Icons.location_on, color: Colors.red, size: 16),
              const SizedBox(width: 6),
              Expanded(
                child: Text(
                  to,
                  style: const TextStyle(
                    fontSize: 13,
                    fontWeight: FontWeight.w600,
                    color: Colors.black,
                  ),
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }

}