// ignore_for_file: use_build_context_synchronously, prefer_const_constructors, deprecated_member_use
// lib/features/settings/user_settings_screen.dart

import 'dart:async';

import 'package:dio/dio.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:go_router/go_router.dart';

import '../../app/app_cubit.dart';
import '../../app/injection_container.dart';
import '../../core/constants/app_constants.dart';
import '../../core/network/api_client.dart';
import '../../core/services/haptic_service.dart';
import '../../core/services/tts_service.dart';
import '../../core/storage/secure_storage.dart';

Dio get _api => sl<ApiClient>().dio;

// ─── Colours (inline, tidak butuh import app_colors.dart) ────────────────────
const _kBlue = Color(0xFF1A56DB);
const _kRed = Color(0xFFDC2626);
const _kSurface = Color(0xFFF8FAFC);
const _kBorder = Color(0xFFE2E8F0);
const _kMuted = Color(0xFF64748B);
const _kText = Color(0xFF0F172A);

// ─── Screen ──────────────────────────────────────────────────────────────────

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

  @override
  State<UserSettingsScreen> createState() => _UserSettingsScreenState();
}

class _UserSettingsScreenState extends State<UserSettingsScreen> {
  // ── local state ────────────────────────────────────────────────────────────
  bool _loading = true;
  bool _saving = false;

  // TTS
  String _ttsLanguage = 'id-ID';
  double _ttsPitch = 1.0; // read-only for user, shown as info
  double _ttsSpeed = 0.9; // read-only for user, shown as info

  // Caution
  bool _warnNoGuardian = true;
  bool _hapticEnabled = true;

  // Account info (from SecureStorage)
  String _displayName = '';
  String _uniqueId = '';

  // Pairing status
  String _pairingStatus = '—';
  bool _paired = false;

  @override
  void initState() {
    super.initState();
    sl<TtsService>().speak('Settings menu.');
    _loadAll();
  }

  Future<void> _loadAll() async {
    setState(() => _loading = true);
    await Future.wait([_loadAccount(), _loadSettings(), _loadPairing()]);
    if (mounted) setState(() => _loading = false);
  }

  Future<void> _loadAccount() async {
    final storage = sl<SecureStorage>();
    _displayName = await storage.getDisplayName() ?? '';
    _uniqueId = await storage.getUniqueUserId() ?? '';
  }

  Future<void> _loadSettings() async {
    try {
      final res =
          await _api.get('/user/settings').timeout(const Duration(seconds: 6));
      final data = res.data['data'];
      if (data is Map) {
        _ttsLanguage = data['ttsLanguage']?.toString() ?? 'id-ID';
        _ttsPitch = (data['ttsPitch'] as num?)?.toDouble() ?? 1.0;
        _ttsSpeed = (data['ttsSpeed'] as num?)?.toDouble() ?? 0.9;
        _warnNoGuardian = data['warnNoGuardian'] as bool? ?? true;
        _hapticEnabled = data['hapticEnabled'] as bool? ?? true;
      }
    } catch (_) {
      // offline: tetap pakai default / nilai lokal
    }
  }

  Future<void> _loadPairing() async {
    try {
      final res = await _api
          .get('/shared/pairing/status')
          .timeout(const Duration(seconds: 5));
      final data = res.data['data'];
      if (data is Map) {
        _paired = data['status'] == 'ACTIVE';
        final partner = data['pairedWithName'] ?? data['pairedWithEmail'] ?? '';
        _pairingStatus = _paired
            ? 'Terhubung dengan $partner'
            : data['status'] == 'PENDING'
                ? 'Menunggu konfirmasi Guardian'
                : 'Belum paired';
      }
    } catch (_) {
      _pairingStatus = 'Tidak bisa cek status';
    }
  }

  Future<void> _save() async {
    setState(() => _saving = true);
    // Apply TTS locally dulu
    await sl<TtsService>().setLanguage(_ttsLanguage);
    if (_hapticEnabled) {
      await sl<HapticService>().success();
    }

    try {
      await _api.put('/user/settings', data: {
        'ttsLanguage': _ttsLanguage,
        'ttsPitch': _ttsPitch,
        'ttsSpeed': _ttsSpeed,
        'warnNoGuardian': _warnNoGuardian,
        'hapticEnabled': _hapticEnabled,
      }).timeout(const Duration(seconds: 8));
      _snack('Settings tersimpan.');
      sl<TtsService>().speak('Settings disimpan.');
    } on DioException catch (e) {
      final msg = e.response?.data['message']?.toString() ??
          'Server tidak merespons, settings lokal sudah diterapkan.';
      _snack(msg);
    } catch (_) {
      _snack('Settings lokal sudah diterapkan, gagal sync ke server.');
    } finally {
      if (mounted) setState(() => _saving = false);
    }
  }

  Future<void> _logout() async {
    await sl<SecureStorage>().clearAll();
    context.read<AppCubit>().clearSession();
    _api
        .post('/auth/logout')
        .timeout(const Duration(seconds: 3))
        .ignore();
    if (mounted) context.go('/login');
  }

  Future<void> _changeServer() async {
    await AppConstants.clearServerUrl();
    if (mounted) context.go('/server-connect');
  }

  void _snack(String msg) {
    if (mounted) {
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text(msg)));
    }
  }

  // ── build ──────────────────────────────────────────────────────────────────
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: _loading
          ? const Center(child: CircularProgressIndicator())
          : ListView(
              padding: const EdgeInsets.all(16),
              children: [
                // ── header ─────────────────────────────────────────────────
                Text('Settings',
                    style: Theme.of(context)
                        .textTheme
                        .headlineSmall
                        ?.copyWith(fontWeight: FontWeight.w800)),
                const Text('TTS, haptic, pairing, account',
                    style: TextStyle(color: _kMuted)),
                const SizedBox(height: 20),

                // ── 1. TTS Settings ────────────────────────────────────────
                _SectionHeader('1. TTS Settings', Icons.record_voice_over),
                const SizedBox(height: 10),
                _Card(
                  child: Column(
                    children: [
                      // Language (editable)
                      DropdownButtonFormField<String>(
                        value: _ttsLanguage,
                        decoration: const InputDecoration(
                          labelText: 'Bahasa TTS',
                          border: OutlineInputBorder(),
                          contentPadding: EdgeInsets.symmetric(
                              horizontal: 12, vertical: 10),
                        ),
                        items: const [
                          DropdownMenuItem(
                              value: 'id-ID', child: Text('Bahasa Indonesia')),
                          DropdownMenuItem(
                              value: 'en-US', child: Text('English (US)')),
                        ],
                        onChanged: (v) =>
                            setState(() => _ttsLanguage = v ?? _ttsLanguage),
                      ),
                      const SizedBox(height: 12),
                      // Pitch — read-only info
                      _InfoRow(
                        label: 'Pitch',
                        value: _ttsPitch.toStringAsFixed(1),
                        note: 'Diatur oleh Guardian',
                        icon: Icons.tune,
                      ),
                      const Divider(height: 20),
                      // Speed — read-only info
                      _InfoRow(
                        label: 'Speed',
                        value: _ttsSpeed.toStringAsFixed(1),
                        note: 'Diatur oleh Guardian',
                        icon: Icons.speed,
                      ),
                    ],
                  ),
                ),

                const SizedBox(height: 20),

                // ── 2. Pairing ─────────────────────────────────────────────
                _SectionHeader('2. Pairing', Icons.link),
                const SizedBox(height: 10),
                _Card(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      // unique ID
                      if (_uniqueId.isNotEmpty) ...[
                        const Text('Unique User ID',
                            style: TextStyle(
                                fontSize: 12,
                                color: _kMuted,
                                fontWeight: FontWeight.w600)),
                        const SizedBox(height: 4),
                        GestureDetector(
                          onTap: () {
                            Clipboard.setData(ClipboardData(text: _uniqueId));
                            _snack('ID disalin ke clipboard.');
                          },
                          child: Container(
                            width: double.infinity,
                            padding: const EdgeInsets.symmetric(
                                horizontal: 14, vertical: 10),
                            decoration: BoxDecoration(
                              color: const Color(0xFFEFF6FF),
                              borderRadius: BorderRadius.circular(10),
                            ),
                            child: Row(
                              children: [
                                const Icon(Icons.qr_code_2,
                                    color: _kBlue, size: 20),
                                const SizedBox(width: 10),
                                Text(
                                  _uniqueId,
                                  style: const TextStyle(
                                      fontSize: 20,
                                      fontWeight: FontWeight.w800,
                                      letterSpacing: 2,
                                      color: _kBlue),
                                ),
                                const Spacer(),
                                const Icon(Icons.copy,
                                    color: _kMuted, size: 16),
                              ],
                            ),
                          ),
                        ),
                        const SizedBox(height: 12),
                        const Divider(height: 1),
                        const SizedBox(height: 12),
                      ],
                      // pairing status
                      Row(
                        children: [
                          Icon(
                            _paired ? Icons.link : Icons.link_off,
                            color: _paired
                                ? const Color(0xFF16A34A)
                                : const Color(0xFFD97706),
                            size: 20,
                          ),
                          const SizedBox(width: 10),
                          Expanded(
                            child: Text(_pairingStatus,
                                style: TextStyle(
                                    color: _paired
                                        ? const Color(0xFF166534)
                                        : const Color(0xFF92400E),
                                    fontWeight: FontWeight.w600)),
                          ),
                          IconButton(
                            icon: const Icon(Icons.refresh, size: 18),
                            onPressed: () async {
                              await _loadPairing();
                              setState(() {});
                            },
                            tooltip: 'Refresh status',
                          ),
                        ],
                      ),
                      const SizedBox(height: 8),
                      SizedBox(
                        width: double.infinity,
                        child: OutlinedButton.icon(
                          onPressed: () => context.go('/user/pairing'),
                          icon: const Icon(Icons.manage_accounts_outlined),
                          label: const Text('Buka menu Pairing'),
                        ),
                      ),
                    ],
                  ),
                ),

                const SizedBox(height: 20),

                // ── 3. Manual / Instructions ───────────────────────────────
                _SectionHeader('3. Manual & Instruksi', Icons.menu_book),
                const SizedBox(height: 10),
                _Card(
                  child: ListTile(
                    contentPadding: EdgeInsets.zero,
                    leading: const Icon(Icons.help_outline, color: _kBlue),
                    title: const Text('Daftar Voice Commands & Shortcuts'),
                    subtitle:
                        const Text('Lihat semua perintah suara yang tersedia'),
                    trailing: const Icon(Icons.chevron_right),
                    onTap: () {
                      // Route /user/manual belum ada di router —
                      // tambahkan GoRoute('/user/manual', ManualScreen) di router.dart
                      // lalu ganti baris ini dengan: context.go('/user/manual');
                      ScaffoldMessenger.of(context).showSnackBar(
                        const SnackBar(
                            content: Text(
                                'Manual screen: tambah route /user/manual di router.dart')),
                      );
                    },
                  ),
                ),

                const SizedBox(height: 20),

                // ── 4. Caution Settings ────────────────────────────────────
                _SectionHeader('4. Caution Settings', Icons.warning_amber),
                const SizedBox(height: 10),
                _Card(
                  child: Column(
                    children: [
                      SwitchListTile(
                        contentPadding: EdgeInsets.zero,
                        value: _warnNoGuardian,
                        onChanged: (v) => setState(() => _warnNoGuardian = v),
                        title: const Text('Peringatan belum paired'),
                        subtitle: const Text(
                            'TTS ingatkan jika belum terhubung Guardian'),
                        secondary: const Icon(
                            Icons.notifications_active_outlined,
                            color: _kBlue),
                      ),
                      const Divider(height: 1),
                      SwitchListTile(
                        contentPadding: EdgeInsets.zero,
                        value: _hapticEnabled,
                        onChanged: (v) => setState(() => _hapticEnabled = v),
                        title: const Text('Haptic feedback'),
                        subtitle:
                            const Text('Getaran saat obstacle terdeteksi'),
                        secondary: const Icon(Icons.vibration, color: _kBlue),
                      ),
                    ],
                  ),
                ),

                const SizedBox(height: 20),

                // ── 5. Account ─────────────────────────────────────────────
                _SectionHeader('5. Account', Icons.person),
                const SizedBox(height: 10),
                _Card(
                  child: Column(
                    children: [
                      _InfoRow(
                        label: 'Display Name',
                        value: _displayName.isNotEmpty ? _displayName : '—',
                        icon: Icons.badge_outlined,
                      ),
                      const Divider(height: 20),
                      _InfoRow(
                        label: 'Role',
                        value: 'User',
                        icon: Icons.accessibility_new,
                      ),
                    ],
                  ),
                ),

                const SizedBox(height: 24),

                // ── Save button ────────────────────────────────────────────
                FilledButton.icon(
                  onPressed: _saving ? null : _save,
                  icon: _saving
                      ? const SizedBox(
                          width: 18,
                          height: 18,
                          child: CircularProgressIndicator(
                              strokeWidth: 2, color: Colors.white))
                      : const Icon(Icons.save_outlined),
                  label: Text(_saving ? 'Menyimpan…' : 'Simpan Settings'),
                  style: FilledButton.styleFrom(
                    minimumSize: const Size.fromHeight(48),
                  ),
                ),

                const SizedBox(height: 10),

                // ── Change server ──────────────────────────────────────────
                OutlinedButton.icon(
                  onPressed: _changeServer,
                  icon: const Icon(Icons.dns_outlined),
                  label: const Text('Ganti Server'),
                  style: OutlinedButton.styleFrom(
                    minimumSize: const Size.fromHeight(44),
                  ),
                ),

                const SizedBox(height: 10),

                // ── Logout ─────────────────────────────────────────────────
                OutlinedButton.icon(
                  onPressed: () => _confirmLogout(context),
                  icon: const Icon(Icons.logout, color: _kRed),
                  label: const Text('Logout', style: TextStyle(color: _kRed)),
                  style: OutlinedButton.styleFrom(
                    minimumSize: const Size.fromHeight(44),
                    side: const BorderSide(color: _kRed),
                  ),
                ),

                const SizedBox(height: 32),
              ],
            ),
    );
  }

  Future<void> _confirmLogout(BuildContext context) async {
    final confirm = await showDialog<bool>(
      context: context,
      builder: (ctx) => AlertDialog(
        title: const Text('Logout?'),
        content: const Text('Sesi akan diakhiri. Kamu perlu login ulang.'),
        actions: [
          TextButton(
              onPressed: () => Navigator.pop(ctx, false),
              child: const Text('Batal')),
          FilledButton(
            style: FilledButton.styleFrom(backgroundColor: _kRed),
            onPressed: () => Navigator.pop(ctx, true),
            child: const Text('Logout'),
          ),
        ],
      ),
    );
    if (confirm == true) await _logout();
  }
}

// ─── Sub-widgets ─────────────────────────────────────────────────────────────

class _SectionHeader extends StatelessWidget {
  final String title;
  final IconData icon;
  const _SectionHeader(this.title, this.icon);

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Icon(icon, size: 18, color: _kBlue),
        const SizedBox(width: 8),
        Text(title,
            style: const TextStyle(
                fontWeight: FontWeight.w800, fontSize: 14, color: _kBlue)),
      ],
    );
  }
}

class _Card extends StatelessWidget {
  final Widget child;
  const _Card({required this.child});

  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      padding: const EdgeInsets.all(16),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(14),
        border: Border.all(color: _kBorder),
      ),
      child: child,
    );
  }
}

class _InfoRow extends StatelessWidget {
  final String label;
  final String value;
  final IconData icon;
  final String? note;
  const _InfoRow(
      {required this.label,
      required this.value,
      required this.icon,
      this.note});

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Icon(icon, size: 18, color: _kMuted),
        const SizedBox(width: 10),
        Expanded(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(label, style: const TextStyle(fontSize: 12, color: _kMuted)),
              Text(value,
                  style: const TextStyle(
                      fontWeight: FontWeight.w700, color: _kText)),
            ],
          ),
        ),
        if (note != null)
          Container(
            padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 3),
            decoration: BoxDecoration(
              color: _kSurface,
              borderRadius: BorderRadius.circular(8),
              border: Border.all(color: _kBorder),
            ),
            child: Text(note!,
                style: const TextStyle(fontSize: 11, color: _kMuted)),
          ),
      ],
    );
  }
}
