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

import '../../../../core/network/api_client.dart';
import '../../../../core/storage/secure_storage.dart';
import '../../../../core/services/tts_service.dart';
import '../../../../injection_container.dart';

class RegisterScreen extends StatefulWidget {
  const RegisterScreen({super.key});
  @override
  State<RegisterScreen> createState() => _RegisterScreenState();
}

class _RegisterScreenState extends State<RegisterScreen> {
  final _nameCtrl  = TextEditingController();
  final _emailCtrl = TextEditingController();
  final _passCtrl  = TextEditingController();
  String _selectedRole = '';
  bool _loading = false;

  Future<void> _register() async {
    if (_selectedRole.isEmpty) {
      ScaffoldMessenger.of(context).showSnackBar(const SnackBar(content: Text('Pilih tipe akun dulu')));
      return;
    }
    setState(() => _loading = true);
    try {
      final res = await sl<ApiClient>().dio.post('/auth/register', data: {
        'email': _emailCtrl.text.trim(),
        'password': _passCtrl.text.trim(),
        'displayName': _nameCtrl.text.trim(),
        'role': _selectedRole,
      });
      if (res.statusCode == 200 && res.data['success'] == true) {
        final data = res.data['data'];
        await sl<SecureStorage>().saveTokens(
          accessToken:  data['accessToken'],
          refreshToken: data['refreshToken'],
          role:         data['role'],
          userId:       data['userId'].toString(),
          displayName:  data['displayName'],
          uniqueUserId: data['uniqueUserId'],
        );
        if (!mounted) return;
        final isUser = data['role'] == 'ROLE_USER';
        if (isUser) {
          final uid = data['uniqueUserId'] ?? '';
          sl<TtsService>().speak('Registrasi berhasil. ID kamu adalah ${uid.split('').join(' ')}. Bagikan ID ini ke Guardian kamu.');
        } else {
          sl<TtsService>().speak('Registrasi berhasil. Selamat datang, ${data['displayName']}');
        }
        context.go(isUser ? '/user/walkguide' : '/guardian/dashboard');
      }
    } on DioException catch (e) {
      final msg = e.response?.data['message'] ?? 'Registrasi gagal';
      if (mounted) ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text(msg), backgroundColor: Colors.redAccent));
    } finally {
      if (mounted) setState(() => _loading = false);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFFF1F5F9),
      body: Center(
        child: SingleChildScrollView(
          padding: const EdgeInsets.all(24),
          child: Container(
            constraints: const BoxConstraints(maxWidth: 440),
            decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.circular(20),
              boxShadow: [BoxShadow(color: Colors.black.withOpacity(0.08), blurRadius: 40, offset: const Offset(0, 16))]),
            padding: const EdgeInsets.all(32),
            child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
              Text('Buat Akun', style: GoogleFonts.outfit(fontSize: 26, fontWeight: FontWeight.w700)),
              const SizedBox(height: 6),
              Text('Pilih tipe akun kamu', style: GoogleFonts.inter(fontSize: 13, color: const Color(0xFF64748B))),
              const SizedBox(height: 24),

              // Role selector cards
              Row(children: [
                _roleCard('GUARDIAN', Icons.shield_outlined, 'Guardian', 'Saya akan membimbing seseorang'),
                const SizedBox(width: 12),
                _roleCard('USER', Icons.accessibility_new_rounded, 'User', 'Saya butuh bantuan navigasi'),
              ]),
              const SizedBox(height: 24),

              _field('Nama Lengkap', _nameCtrl, false),
              const SizedBox(height: 14),
              _field('Email', _emailCtrl, false),
              const SizedBox(height: 14),
              _field('Password (min. 6 karakter)', _passCtrl, true),
              const SizedBox(height: 24),

              SizedBox(
                width: double.infinity, height: 44,
                child: ElevatedButton(
                  onPressed: _loading ? null : _register,
                  style: ElevatedButton.styleFrom(
                    backgroundColor: const Color(0xFF1A56DB),
                    shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
                  ),
                  child: _loading
                    ? const SizedBox(width: 18, height: 18, child: CircularProgressIndicator(color: Colors.white, strokeWidth: 2))
                    : Text('Daftar Sekarang', style: GoogleFonts.inter(fontSize: 14, fontWeight: FontWeight.w600, color: Colors.white)),
                ),
              ),
              const SizedBox(height: 14),
              Center(child: GestureDetector(
                onTap: () => context.go('/login'),
                child: Text('Sudah punya akun? Login', style: GoogleFonts.inter(fontSize: 12, color: const Color(0xFF1A56DB))),
              )),
            ]),
          ),
        ),
      ),
    );
  }

  Widget _roleCard(String role, IconData icon, String title, String subtitle) {
    final selected = _selectedRole == role;
    return Expanded(
      child: GestureDetector(
        onTap: () => setState(() => _selectedRole = role),
        child: AnimatedContainer(
          duration: const Duration(milliseconds: 200),
          padding: const EdgeInsets.all(16),
          decoration: BoxDecoration(
            color: selected ? const Color(0xFFEFF6FF) : const Color(0xFFF8FAFC),
            border: Border.all(color: selected ? const Color(0xFF1A56DB) : const Color(0xFFE2E8F0), width: selected ? 2 : 1),
            borderRadius: BorderRadius.circular(12),
          ),
          child: Column(children: [
            Icon(icon, color: selected ? const Color(0xFF1A56DB) : const Color(0xFF94A3B8), size: 28),
            const SizedBox(height: 8),
            Text(title, style: GoogleFonts.inter(fontSize: 13, fontWeight: FontWeight.w600, color: selected ? const Color(0xFF1A56DB) : const Color(0xFF0F172A))),
            const SizedBox(height: 4),
            Text(subtitle, textAlign: TextAlign.center, style: GoogleFonts.inter(fontSize: 10, color: const Color(0xFF94A3B8))),
          ]),
        ),
      ),
    );
  }

  Widget _field(String label, TextEditingController ctrl, bool isPass) {
    return Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
      Text(label, style: GoogleFonts.inter(fontSize: 12, color: const Color(0xFF64748B))),
      const SizedBox(height: 5),
      TextField(
        controller: ctrl,
        obscureText: isPass,
        style: GoogleFonts.inter(fontSize: 13),
        decoration: InputDecoration(
          border: OutlineInputBorder(borderRadius: BorderRadius.circular(8), borderSide: const BorderSide(color: Color(0xFFE2E8F0))),
          enabledBorder: OutlineInputBorder(borderRadius: BorderRadius.circular(8), borderSide: const BorderSide(color: Color(0xFFE2E8F0))),
          focusedBorder: OutlineInputBorder(borderRadius: BorderRadius.circular(8), borderSide: const BorderSide(color: Color(0xFF1A56DB), width: 2)),
          contentPadding: const EdgeInsets.symmetric(horizontal: 12, vertical: 12),
        ),
      ),
    ]);
  }
}