import 'package:flutter/material.dart';

class RentalProcessScreen extends StatelessWidget {
  final String stationName;

  const RentalProcessScreen({
    super.key,
    required this.stationName,
  });

  static const Color kBackgroundColor = Color(0xFF1E1E1E);
  static const Color kCardColor = Color(0xFF2C2C2E);
  static const Color kPrimaryGreen = Color(0xFF4CAF50);
  static const Color kPrimaryOrange = Color(0xFFFF3D00);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: kBackgroundColor,
      appBar: AppBar(
        title: Text(
          stationName,
          style: const TextStyle(fontWeight: FontWeight.bold, fontSize: 16, color: Colors.white),
        ),
        backgroundColor: kCardColor,
        elevation: 0,
        actions: [
          IconButton(
            icon: const Icon(Icons.more_vert, color: Colors.white),
            onPressed: () {},
          ),
        ],
      ),
      body: SingleChildScrollView(
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              _buildStatusCard(context),
              const SizedBox(height: 24),

              _buildProcessSectionTitle('HELMET RENTAL PROCESS'),
              const SizedBox(height: 12),
              Container(
                decoration: BoxDecoration(
                  color: kCardColor,
                  borderRadius: BorderRadius.circular(12),
                ),
                child: Column(
                  children: [
                    _buildStepRow(1, 'UNLOCK & OPEN', Icons.lock_open, isCompleted: true),
                    _buildDivider(),
                    _buildStepRow(2, 'DOOR STATUS', Icons.sensor_door_outlined),
                    _buildDivider(),
                    _buildStepRow(3, 'TAKE HELMET', Icons.outbox),
                    _buildDivider(),
                    _buildStepRow(4, 'ENJOY RIDING!', Icons.sentiment_satisfied_alt, showDivider: false),
                  ],
                ),
              ),
              const SizedBox(height: 24),

              _buildProcessSectionTitle('HELMET RETURN PROCESS'),
              const SizedBox(height: 12),
              Container(
                decoration: BoxDecoration(
                  color: kCardColor,
                  borderRadius: BorderRadius.circular(12),
                ),
                child: Column(
                  children: [
                    _buildStepRow(1, 'UNLOCK & OPEN', Icons.lock_open),
                    _buildDivider(),
                    _buildStepRow(2, 'INSERT HELMET', Icons.move_to_inbox),
                    _buildDivider(),
                    _buildStepRow(3, 'SENSOR SCANNING\n& RETURN COMPLETE', Icons.sync),
                    _buildDivider(),
                    _buildStepRow(4, 'SANITIZING', Icons.shield_outlined, showDivider: false),
                  ],
                ),
              ),
              const SizedBox(height: 24),

              _buildErrorAlertBox(),
              const SizedBox(height: 24),

              _buildLogsCard(context),
              const SizedBox(height: 20),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildStatusCard(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(20),
      decoration: BoxDecoration(
        color: kCardColor,
        borderRadius: BorderRadius.circular(12),
      ),
      child: Column(
        children: [
          Row(
            children: const [
              Icon(Icons.circle, color: kPrimaryOrange, size: 16),
              SizedBox(width: 6),
              Text('IN USE', style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold)),
            ],
          ),
          const SizedBox(height: 20),
          Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Container(
                width: 150,
                height: 150,
                padding: const EdgeInsets.all(10),
                decoration: BoxDecoration(
                  color: kBackgroundColor,
                  borderRadius: BorderRadius.circular(12),
                ),
                child: Image.asset(
                  'assets/images/open.png',
                  fit: BoxFit.contain,
                  errorBuilder: (context, error, stackTrace) => const Icon(Icons.inventory_2, size: 50, color: Colors.white54),
                ),
              ),
              const SizedBox(width: 20),
              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    const Text('NOW', style: TextStyle(color: Colors.grey, fontSize: 12)),
                    const SizedBox(height: 8),
                    SizedBox(
                      width: double.infinity,
                      child: ElevatedButton(
                        onPressed: () {
                          ScaffoldMessenger.of(context).showSnackBar(
                            const SnackBar(
                              content: Text('문이 열렸습니다! (OPEN 버튼 눌림)'),
                              duration: Duration(seconds: 1),
                              backgroundColor: Colors.blue,
                            ),
                          );
                        },
                        style: ElevatedButton.styleFrom(
                          backgroundColor: Colors.white,
                          foregroundColor: Colors.black,
                          padding: const EdgeInsets.symmetric(vertical: 12),
                          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
                        ),
                        child: const Text('OPEN', style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16)),
                      ),
                    ),
                    const SizedBox(height: 12),
                    Container(
                      width: double.infinity,
                      padding: const EdgeInsets.symmetric(vertical: 12),
                      decoration: BoxDecoration(
                        color: kBackgroundColor,
                        borderRadius: BorderRadius.circular(8),
                      ),
                      child: const Center(
                        child: Text(
                          'SENSOR ERROR:\nLOCK FAIL',
                          style: TextStyle(color: kPrimaryOrange, fontWeight: FontWeight.bold, height: 1.2),
                          textAlign: TextAlign.center,
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }

  Widget _buildProcessSectionTitle(String title) {
    return Text(
      title,
      style: const TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: 16),
    );
  }

  Widget _buildStepRow(int step, String title, IconData icon, {bool isCompleted = false, bool showDivider = true}) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 16),
      child: Row(
        children: [
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Row(
                children: [
                  Text('STEP $step', style: const TextStyle(color: Colors.white, fontWeight: FontWeight.bold)),
                  if (isCompleted) ...[
                    const SizedBox(width: 8),
                    const Icon(Icons.check_circle, color: kPrimaryGreen, size: 16),
                  ],
                ],
              ),
              const SizedBox(height: 4),
              Text(title, style: const TextStyle(color: Colors.white, fontSize: 18, letterSpacing: 0.6)),
            ],
          ),
          const Spacer(),
          Icon(icon, color: isCompleted ? Colors.white : Colors.grey, size: 48),
        ],
      ),
    );
  }

  Widget _buildDivider() {
    return const Divider(color: Colors.white, height: 1, thickness: 1, indent: 20, endIndent: 20);
  }

  Widget _buildErrorAlertBox() {
    return Container(
      padding: const EdgeInsets.all(16),
      decoration: BoxDecoration(
        color: kCardColor.withOpacity(0.5),
        border: Border.all(color: kPrimaryOrange, width: 2),
        borderRadius: BorderRadius.circular(12),
      ),
      child: Row(
        children: const [
          Icon(Icons.warning_amber_rounded, color: kPrimaryOrange, size: 40),
          SizedBox(width: 16),
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text('SENSOR ERROR:', style: TextStyle(color: kPrimaryOrange, fontWeight: FontWeight.bold, fontSize: 16)),
              Text('LOCK FAILURE', style: TextStyle(color: kPrimaryOrange, fontWeight: FontWeight.bold, fontSize: 16)),
            ],
          ),
        ],
      ),
    );
  }

  Widget _buildLogsCard(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(20),
      decoration: BoxDecoration(
        color: kCardColor,
        borderRadius: BorderRadius.circular(12),
      ),
      child: Column(
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              const Text('LOGS', style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold)),
              InkWell(
                onTap: () => _showLogHistory(context),
                child: Text('VIEW MORE >', style: TextStyle(color: Colors.grey[400], fontSize: 12)),
              ),
            ],
          ),
          const SizedBox(height: 12),
          Row(
            children: const [
              Icon(Icons.check_circle, color: kPrimaryGreen, size: 16),
              SizedBox(width: 8),
              Text('Available: Door Fully Closed', style: TextStyle(color: Colors.white70)),
            ],
          ),
          Padding(
            padding: const EdgeInsets.only(left: 24.0, top: 4),
            child: Text('(2025-11-19)/(08:58)', style: TextStyle(color: Colors.grey[600], fontSize: 12)),
          ),
        ],
      ),
    );
  }

  void _showLogHistory(BuildContext context) {
    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)),
              ),
              const Padding(
                padding: EdgeInsets.all(20.0),
                child: Text("DEVICE LOGS", style: TextStyle(color: Colors.white, fontSize: 18, 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 (Sensor A)", 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)),
          ),
        ],
      ),
    );
  }
}