import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../services/supabase_service.dart';
import '../services/mqtt_service.dart';
import 'package:mqtt_client/mqtt_client.dart';

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

  @override
  Widget build(BuildContext context) {
    final mqtt = Provider.of<MqttService>(context);
    final user = SupabaseService().currentUser;

    return Scaffold(
      backgroundColor: Colors.black,
      body: SafeArea(
        child: SingleChildScrollView(
          child: Padding(
            padding: const EdgeInsets.all(20.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                // Profile Section
                Container(
                  padding: const EdgeInsets.all(15),
                  decoration: BoxDecoration(
                    color: const Color(0xFF1A1A1A),
                    borderRadius: BorderRadius.circular(20),
                  ),
                  child: Row(
                    children: [
                      const CircleAvatar(
                        radius: 30,
                        backgroundColor: Colors.green,
                        child: Icon(Icons.person, color: Colors.white, size: 40),
                      ),
                      const SizedBox(width: 15),
                      Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(
                            user?.email?.split('@')[0].toUpperCase() ?? 'Admin Kopi',
                            style: const TextStyle(color: Colors.white, fontSize: 18, fontWeight: FontWeight.bold),
                          ),
                          Text(
                            user?.email ?? 'admin@coffee.io',
                            style: const TextStyle(color: Colors.grey, fontSize: 12),
                          ),
                          const Text(
                            'Status: Active User',
                            style: TextStyle(color: Colors.green, fontSize: 12),
                          ),
                        ],
                      ),
                    ],
                  ),
                ),
                
                const SizedBox(height: 30),
                _buildSectionTitle('Sistem & Koneksi'),
                _buildSettingsCard([
                  _buildConnectionStatus(
                    'Database Supabase', 
                    true, // Always true if they can reach this screen
                    Icons.storage
                  ),
                  const Divider(color: Colors.grey, height: 1),
                  _buildConnectionStatus(
                    'MQTT Broker (HiveMQ)', 
                    mqtt.client?.connectionStatus?.state == MqttConnectionState.connected,
                    Icons.cloud_sync
                  ),
                ]),

                const SizedBox(height: 20),
                _buildSectionTitle('Manajemen Data'),
                _buildSettingsCard([
                  _buildSettingItem(Icons.file_download, 'Export Semua Log (.CSV)', () {
                    ScaffoldMessenger.of(context).showSnackBar(const SnackBar(content: Text('Menyiapkan file CSV...')));
                  }),
                  const Divider(color: Colors.grey, height: 1),
                  _buildSettingItem(Icons.delete_sweep, 'Bersihkan Cache Aplikasi', () {
                     ScaffoldMessenger.of(context).showSnackBar(const SnackBar(content: Text('Cache dibersihkan')));
                  }),
                ]),

                const SizedBox(height: 20),
                _buildSectionTitle('Keamanan'),
                _buildSettingsCard([
                  _buildSettingItem(Icons.lock_reset, 'Ganti Password Akun', () {
                     ScaffoldMessenger.of(context).showSnackBar(const SnackBar(content: Text('Fitur ini akan segera hadir')));
                  }),
                ]),

                const SizedBox(height: 20),
                _buildSectionTitle('Tentang'),
                _buildSettingsCard([
                  _buildSettingItem(Icons.info_outline, 'Versi Aplikasi', null, trailing: 'v1.2.0-Production'),
                ]),

                const SizedBox(height: 30),
                SizedBox(
                  width: double.infinity,
                  height: 55,
                  child: ElevatedButton.icon(
                    onPressed: () async {
                      await SupabaseService().signOut();
                      Navigator.pushReplacementNamed(context, '/login');
                    },
                    style: ElevatedButton.styleFrom(
                      backgroundColor: Colors.redAccent.withOpacity(0.8),
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(15),
                      ),
                    ),
                    icon: const Icon(Icons.logout, color: Colors.white),
                    label: const Text('Keluar dari Akun', style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold, color: Colors.white)),
                  ),
                ),
                const SizedBox(height: 100),
              ],
            ),
          ),
        ),
      ),
    );
  }

  Widget _buildSectionTitle(String title) {
    return Padding(
      padding: const EdgeInsets.only(bottom: 10, left: 5),
      child: Text(
        title,
        style: const TextStyle(color: Colors.grey, fontSize: 13, fontWeight: FontWeight.bold),
      ),
    );
  }

  Widget _buildSettingsCard(List<Widget> children) {
    return Container(
      decoration: BoxDecoration(
        color: const Color(0xFF1A1A1A),
        borderRadius: BorderRadius.circular(20),
      ),
      child: Column(children: children),
    );
  }

  Widget _buildSettingItem(IconData icon, String title, VoidCallback? onTap, {String? trailing}) {
    return ListTile(
      leading: Icon(icon, color: Colors.green, size: 22),
      title: Text(title, style: const TextStyle(color: Colors.white, fontSize: 14)),
      trailing: trailing != null 
          ? Text(trailing, style: const TextStyle(color: Colors.grey, fontSize: 12))
          : const Icon(Icons.chevron_right, color: Colors.grey, size: 18),
      onTap: onTap,
    );
  }

  Widget _buildConnectionStatus(String title, bool isConnected, IconData icon) {
    return ListTile(
      leading: Icon(icon, color: isConnected ? Colors.blue : Colors.red, size: 22),
      title: Text(title, style: const TextStyle(color: Colors.white, fontSize: 14)),
      trailing: Row(
        mainAxisSize: MainAxisSize.min,
        children: [
          Container(
            width: 8,
            height: 8,
            decoration: BoxDecoration(
              shape: BoxShape.circle,
              color: isConnected ? Colors.green : Colors.red,
            ),
          ),
          const SizedBox(width: 8),
          Text(
            isConnected ? 'Online' : 'Offline',
            style: TextStyle(color: isConnected ? Colors.green : Colors.red, fontSize: 12, fontWeight: FontWeight.bold),
          ),
        ],
      ),
    );
  }
}