import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:latlong2/latlong.dart';
import 'rental_process_screen.dart';

class StationInfo {
  final String name;
  final String address;
  final String status;
  final String distance;

  StationInfo({
    required this.name,
    required this.address,
    required this.status,
    required this.distance,
  });
}

class RentReturnScreen extends StatelessWidget {
  const RentReturnScreen({super.key});

  @override
  Widget build(BuildContext context) {
    final LatLng centerLocation = const LatLng(35.1595, 126.8526);


    final List<StationInfo> stations = [
      StationInfo(
          name: 'STATION A - GU.UNIV',
          address: '277 Hyodeok-ro',
          status: 'ONLINE',
          distance: '0.5 km away'),
      StationInfo(
          name: 'STATION B - CITY HALL',
          address: '123 City Hall Ave',
          status: 'ONLINE',
          distance: '1.2 km away'),
      StationInfo(
          name: 'STATION C - PARK',
          address: '55 Park Lane',
          status: 'OFFLINE',
          distance: '2.8 km away'),
      StationInfo(
          name: 'STATION D - TECH HUB',
          address: '88 Innovation Blvd',
          status: 'ONLINE',
          distance: '4.1 km away'),
    ];

    return Scaffold(
      backgroundColor: const Color(0xFF1E1E1E),
      appBar: AppBar(
        title: const Text(
          'RENT/ RETURN',
          style: TextStyle(
              fontSize: 16, fontWeight: FontWeight.bold, color: Colors.white),
        ),
        backgroundColor: const Color(0xFF2C2C2E),
        elevation: 0,
        actions: [
          IconButton(
            icon: const Icon(Icons.more_vert, color: Colors.white),
            onPressed: () {},
          )
        ],
      ),
      body: Column(
        children: [
          Expanded(
            flex: 50,
            child: FlutterMap(
              options: MapOptions(
                initialCenter: centerLocation,
                initialZoom: 15.0,
              ),
              children: [
                TileLayer(
                  urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
                  userAgentPackageName: 'com.example.helmet_app',
                ),
                MarkerLayer(
                  markers: [
                    _buildBlackMarker(centerLocation),
                    _buildBlackMarker(const LatLng(35.162, 126.855)),
                    _buildBlackMarker(const LatLng(35.157, 126.850)),
                    _buildBlackMarker(const LatLng(35.160, 126.858)),
                  ],
                ),
              ],
            ),
          ),

          Expanded(
            flex: 45,
            child: Container(
              color: const Color(0xFF1E1E1E),
              padding: const EdgeInsets.fromLTRB(16, 20, 16, 0),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  const Text(
                    'LIST VIEW',
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 12,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  const SizedBox(height: 10),

                  Expanded(
                    child: ListView.builder(
                      padding: const EdgeInsets.only(bottom: 20),
                      itemCount: stations.length,
                      itemBuilder: (context, index) {
                        return _buildStationItem(context, stations[index]);
                      },
                    ),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildStationItem(BuildContext context, StationInfo station) {
    return Container(
      margin: const EdgeInsets.only(bottom: 16),
      padding: const EdgeInsets.all(12),
      decoration: BoxDecoration(
        color: const Color(0xFF2C2C2E),
        borderRadius: BorderRadius.circular(16),
      ),
      child: Column(
        children: [
          Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Container(
                width: 80,
                height: 80,
                padding: const EdgeInsets.all(8),
                decoration: BoxDecoration(
                  color: Colors.grey[800],
                  borderRadius: BorderRadius.circular(12),
                ),
                child: Image.asset(
                  'assets/images/storage.png',
                  fit: BoxFit.contain,
                  errorBuilder: (context, error, stackTrace) => const Icon(Icons.inventory_2, color: Colors.white54),
                ),
              ),
              const SizedBox(width: 12),

              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      station.name,
                      style: const TextStyle(
                        color: Colors.white,
                        fontWeight: FontWeight.bold,
                        fontSize: 13,
                      ),
                      maxLines: 1,
                      overflow: TextOverflow.ellipsis,
                    ),
                    const SizedBox(height: 4),
                    Text(
                      station.address,
                      style: const TextStyle(
                          color: Colors.grey, fontSize: 11, height: 1.2),
                      maxLines: 2,
                    ),
                    const SizedBox(height: 2),
                    Text(
                      'STATUS: ${station.status}',
                      style: TextStyle(
                        color: station.status.startsWith('OFFLINE')
                            ? Colors.redAccent
                            : Colors.grey,
                        fontSize: 11,
                      ),
                    ),
                    Text(
                      station.distance,
                      style: const TextStyle(color: Colors.grey, fontSize: 11),
                    ),
                  ],
                ),
              ),

              ElevatedButton(
                onPressed: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (context) => RentalProcessScreen(
                        stationName: station.name,
                      ),
                    ),
                  );
                },
                style: ElevatedButton.styleFrom(
                  backgroundColor: Colors.white,
                  foregroundColor: Colors.black,
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(8),
                  ),
                  padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
                  minimumSize: const Size(80, 40),
                ),
                child: const Text(
                    'SELECT',
                    style: TextStyle(fontWeight: FontWeight.w500, letterSpacing: 0.8, fontSize: 14)
                ),
              ),
            ],
          ),

          const SizedBox(height: 12),

          Container(
            width: double.infinity,
            padding: const EdgeInsets.all(12),
            decoration: BoxDecoration(
              color: const Color(0xFF1E1E1E),
              borderRadius: BorderRadius.circular(10),
            ),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    const Text(
                      'LOGS',
                      style: TextStyle(
                        color: Colors.white,
                        fontWeight: FontWeight.bold,
                        fontSize: 12,
                      ),
                    ),
                    InkWell(
                      onTap: () => _showLogHistory(context, station.name),
                      child: Text(
                        'VIEW MORE >',
                        style: TextStyle(
                          color: Colors.grey[400],
                          fontSize: 10,
                        ),
                      ),
                    ),
                  ],
                ),
                const SizedBox(height: 6),
                const Text(
                  'Available: Door Fully Closed',
                  style: TextStyle(color: Colors.grey, fontSize: 11),
                ),
                const Text(
                  '(2025-11-19)/(08:58)',
                  style: TextStyle(color: Colors.grey, fontSize: 11),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  Marker _buildBlackMarker(LatLng point) {
    return Marker(
      point: point,
      width: 40,
      height: 40,
      child: const Icon(
        Icons.location_on,
        color: Colors.black,
        size: 40,
      ),
    );
  }

  void _showLogHistory(BuildContext context, String stationName) {
    showModalBottomSheet(
      context: context,
      backgroundColor: Colors.transparent,
      isScrollControlled: true,
      builder: (context) {
        return Container(
          height: MediaQuery.of(context).size.height * 0.6,
          decoration: const BoxDecoration(
            color: Color(0xFF1E1E1E),
            borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
          ),
          child: Column(
            children: [
              const SizedBox(height: 12),
              Container(
                width: 40, height: 4,
                decoration: BoxDecoration(color: Colors.grey[600], borderRadius: BorderRadius.circular(2)),
              ),
              Padding(
                padding: const EdgeInsets.all(20.0),
                child: Text("LOGS: $stationName", style: const TextStyle(color: Colors.white, fontSize: 16, fontWeight: FontWeight.bold)),
              ),
              const Divider(color: Colors.white24, height: 1),
              Expanded(
                child: ListView(
                  padding: const EdgeInsets.all(20),
                  children: [
                    _buildLogItem("08:58:33", "Door Fully Closed", Icons.door_front_door, Colors.green),
                    _buildLogItem("08:58:30", "Helmet Returned", Icons.check_circle_outline, Colors.blue),
                    _buildLogItem("08:55:12", "User Unlocked Door", Icons.lock_open, Colors.white),
                    _buildLogItem("08:30:00", "UV Sanitization Complete", Icons.cleaning_services, Colors.purpleAccent),
                    _buildLogItem("08:00:00", "System Boot Up", Icons.power_settings_new, Colors.grey),
                  ],
                ),
              ),
            ],
          ),
        );
      },
    );
  }

  Widget _buildLogItem(String time, String message, IconData icon, Color color) {
    return Padding(
      padding: const EdgeInsets.only(bottom: 20.0),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(time, style: const TextStyle(color: Colors.grey, fontSize: 12)),
          const SizedBox(width: 16),
          Column(
            children: [
              Icon(icon, color: color, size: 20),
              Container(width: 2, height: 20, color: Colors.white12),
            ],
          ),
          const SizedBox(width: 16),
          Expanded(
            child: Text(message, style: const TextStyle(color: Colors.white70, fontSize: 14)),
          ),
        ],
      ),
    );
  }
}