import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:package_info_plus/package_info_plus.dart';
import 'package:terepi_seged/services/project_service.dart';

import '../services/gnss/gnss_connection.dart';
import '../services/gnss/gnss_device_service.dart';
import '../services/gnss/gnss_service.dart';
import 'gnss_device_picker_dialog.dart';
import 'project/project_picker_view.dart';

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

  @override
  Widget build(BuildContext context) {
    return Drawer(
      // Közvetlenül Column a Drawer-ben — a Drawer maga korlátozott
      // magasságú (képernyő teljes magassága), így Expanded működik.
      // SafeArea csak a Header és Footer részeken kell.
      child: Column(
        children: [
          // ── 1. Fejléc — SafeArea csak felül ─────────────────────
          SafeArea(
            bottom: false,
            child: _DrawerHeader(),
          ),

          const Divider(height: 1),

          // ── 2. Scrollozható lista — Expanded tölti ki a helyet ──
          Expanded(
            child: ListView(
              padding: EdgeInsets.zero,
              children: [
                // Projekt
                Obx(() {
                  final project = ProjectService.to.activeProject.value;
                  return ListTile(
                    leading: Icon(Icons.folder_outlined,
                        color:
                            project != null ? _hexColor(project.color) : null),
                    title: const Text('Aktív projekt'),
                    subtitle: Text(
                      project?.name ?? 'Nincs projekt',
                      style: TextStyle(fontSize: 12),
                    ),
                    trailing: const Icon(Icons.arrow_forward_ios, size: 14),
                    onTap: () {
                      Get.back();
                      Get.to(() => const ProjectPickerView(),
                          transition: Transition.rightToLeft);
                    },
                  );
                }),

                // GNSS eszköz
                Obx(() {
                  final device = GnssDeviceService.to.selectedDevice.value;
                  return ListTile(
                    leading: Icon(
                      device?.type == GnssConnectionType.ble
                          ? Icons.bluetooth_searching
                          : device?.type == GnssConnectionType.phoneGps
                              ? Icons.phone_android
                              : Icons.bluetooth,
                    ),
                    title: const Text('GNSS eszköz'),
                    subtitle: Text(
                      device?.name ?? 'Nincs kiválasztva',
                      style: const TextStyle(fontSize: 12),
                    ),
                    // Kapcsolat státusz ikon — saját Obx, nem egymásba ágyazva
                    trailing: Obx(() {
                      final connected = GnssService.to.connectionState.value ==
                          GnssConnectionState.connected;
                      return Icon(
                        connected ? Icons.circle : Icons.circle_outlined,
                        size: 12,
                        color: connected ? Colors.green : Colors.grey,
                      );
                    }),
                    onTap: () {
                      Get.back();
                      GnssDevicePickerDialog.show();
                    },
                  );
                }),

                const Divider(height: 24),

                // ── 3. Beállítások ─────────────────────────────────
                const _SectionLabel('Beállítások'),

                ListTile(
                  leading: const Icon(Icons.cell_tower),
                  title: const Text('NTRIP'),
                  onTap: () {
                    Get.back();
                    // Get.to(() => const NtripSettingsView());
                  },
                ),

                ListTile(
                  leading: const Icon(Icons.map_outlined),
                  title: const Text('Alaptérkép'),
                  onTap: () {
                    Get.back();
                    // _showBasemapPicker(context);
                  },
                ),

                ListTile(
                  leading: const Icon(Icons.straighten),
                  title: const Text('Koordináta-rendszer'),
                  subtitle: const Text(
                    'EOV',
                    style: TextStyle(fontSize: 12),
                  ),
                  onTap: () {
                    Get.back();
                    // Get.to(() => const DisplaySettingsView());
                  },
                ),

                ListTile(
                  leading: const Icon(Icons.volume_up_outlined),
                  title: const Text('Hang és rezgés'),
                  onTap: () {
                    Get.back();
                    // Get.to(() => const FeedbackSettingsView());
                  },
                ),

                const Divider(height: 24),

                // ── 4. Admin (kommentezve, később aktiválható) ──────
                // Obx(() => AuthService.to.isAdmin
                //   ? Column(children: [...])
                //   : const SizedBox.shrink(),
                // ),
              ],
            ),
          ),

          // ── 5. Lábléc — SafeArea csak alul ──────────────────────
          const Divider(height: 1),
          SafeArea(
            top: false,
            child: _DrawerFooter(),
          ),
        ],
      ),
    );
  }
}

// ── Fejléc ───────────────────────────────────────────────────────────
// Nincs Obx — amíg AuthService ki van kommentelve, nincs reaktív adat.
// Ha AuthService bekötésre kerül, akkor kell visszatenni az Obx-et.

class _DrawerHeader extends StatelessWidget {
  const _DrawerHeader();

  @override
  Widget build(BuildContext context) {
    // TODO: Obx(() { final user = AuthService.to.currentUser.value; ... })
    // amikor az AuthService be lesz kötve.
    return Container(
      padding: const EdgeInsets.fromLTRB(16, 20, 16, 16),
      child: Row(children: [
        CircleAvatar(
          radius: 22,
          backgroundColor: Theme.of(context).colorScheme.primaryContainer,
          child: Text(
            '?', // user?.fullName[0].toUpperCase() ?? '?'
            style: TextStyle(
              fontSize: 18,
              fontWeight: FontWeight.w600,
              color: Theme.of(context).colorScheme.onPrimaryContainer,
            ),
          ),
        ),
        const SizedBox(width: 12),
        Expanded(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              const Text(
                'Ismeretlen felhasználó',
                // user?.fullName ?? 'Ismeretlen felhasználó'
                style: TextStyle(
                  fontWeight: FontWeight.w600,
                  fontSize: 14,
                ),
                overflow: TextOverflow.ellipsis,
              ),
              Text(
                'Vendég', // user?.role.label ?? ''
                style: TextStyle(
                  fontSize: 12,
                  color: Theme.of(context).colorScheme.secondary,
                ),
              ),
            ],
          ),
        ),
      ]),
    );
  }
}

// ── Lábléc ───────────────────────────────────────────────────────────

class _DrawerFooter extends StatelessWidget {
  const _DrawerFooter();

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
      child: Row(children: [
        // App verzió
        FutureBuilder<PackageInfo>(
          future: PackageInfo.fromPlatform(),
          builder: (_, snap) => Text(
            snap.hasData ? 'v${snap.data!.version}' : '',
            style: TextStyle(
              fontSize: 11,
              color: Colors.grey.shade500,
            ),
          ),
        ),
        const Spacer(),
        // Kijelentkezés
        TextButton.icon(
          icon: const Icon(Icons.logout, size: 16),
          label: const Text('Kilépés'),
          style: TextButton.styleFrom(
            foregroundColor: Colors.red.shade400,
          ),
          onPressed: () {
            Get.back();
            _confirmSignOut(context);
          },
        ),
      ]),
    );
  }

  void _confirmSignOut(BuildContext context) {
    Get.dialog(AlertDialog(
      title: const Text('Kijelentkezés'),
      content: const Text('Biztosan ki szeretnél jelentkezni?'),
      actions: [
        TextButton(
          onPressed: () => Get.back(),
          child: const Text('Mégse'),
        ),
        FilledButton(
          onPressed: () {
            Get.back();
            // AuthService.to.signOut();
          },
          child: const Text('Kilépés'),
        ),
      ],
    ));
  }
}

// ── Szekció felirat ──────────────────────────────────────────────────

class _SectionLabel extends StatelessWidget {
  final String text;
  const _SectionLabel(this.text);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.fromLTRB(16, 8, 16, 4),
      child: Text(
        text.toUpperCase(),
        style: TextStyle(
          fontSize: 10,
          fontWeight: FontWeight.w600,
          color: Colors.grey.shade500,
          letterSpacing: 0.8,
        ),
      ),
    );
  }
}

Color _hexColor(String hex) {
  final h = hex.replaceFirst('#', '');
  return Color(int.parse(
    h.length == 6 ? 'FF$h' : h,
    radix: 16,
  ));
}