import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:go_router/go_router.dart';

import '../../../../core/constants/route_constants.dart';
import '../../../master_data/domain/entities/master_definition.dart';
import '../../../../shared/providers/auth_provider.dart';
import '../../../../shared/widgets/page_header.dart';

class _GalleryEntry {
  const _GalleryEntry({
    required this.title,
    required this.route,
    required this.group,
    this.preview = true,
  });

  final String title;
  final String route;
  final String group;
  final bool preview;
}

String _route(String path, {bool preview = true}) {
  if (!preview || path.contains('preview=true')) return path;
  return path.contains('?') ? '$path&preview=true' : '$path?preview=true';
}

final _entries = [
  // Auth
  _GalleryEntry(
    title: 'Login',
    route: '${RouteConstants.login}?preview=true',
    group: 'Auth',
    preview: false,
  ),
  _GalleryEntry(
    title: 'Forgot Password',
    route: '${RouteConstants.forgotPassword}?preview=true',
    group: 'Auth',
    preview: false,
  ),
  _GalleryEntry(
    title: 'Reset Password',
    route: '${RouteConstants.resetPassword}?preview=true',
    group: 'Auth',
    preview: false,
  ),
  _GalleryEntry(
    title: 'Verify OTP',
    route: '${RouteConstants.verifyOtp}?email=demo@bharaterp.com&preview=true',
    group: 'Auth',
    preview: false,
  ),
  _GalleryEntry(title: 'Change Password', route: RouteConstants.changePassword, group: 'Auth'),
  // Main
  _GalleryEntry(title: 'Dashboard', route: RouteConstants.dashboard, group: 'Main'),
  // Organization
  _GalleryEntry(title: 'Companies', route: RouteConstants.companies, group: 'Organization'),
  _GalleryEntry(title: 'Add Company', route: RouteConstants.companyAdd, group: 'Organization'),
  _GalleryEntry(title: 'Edit Company', route: '/companies/demo-co/edit', group: 'Organization'),
  _GalleryEntry(title: 'Branches', route: RouteConstants.branches, group: 'Organization'),
  _GalleryEntry(title: 'Add Branch', route: RouteConstants.branchAdd, group: 'Organization'),
  _GalleryEntry(title: 'Edit Branch', route: '/branches/demo-br/edit', group: 'Organization'),
  // People
  _GalleryEntry(title: 'Users & Role Management', route: RouteConstants.usersRoleManagement, group: 'People'),
  _GalleryEntry(title: 'Users List', route: RouteConstants.users, group: 'People'),
  _GalleryEntry(title: 'Add User', route: RouteConstants.userAdd, group: 'People'),
  _GalleryEntry(title: 'Edit User', route: '/users/demo-user/edit', group: 'People'),
  _GalleryEntry(title: 'User Detail', route: '/users/demo-user', group: 'People'),
  _GalleryEntry(title: 'User Profile', route: RouteConstants.profile, group: 'People'),
  _GalleryEntry(title: 'Roles List', route: RouteConstants.roles, group: 'People'),
  _GalleryEntry(
    title: 'Permission Matrix',
    route: '/roles/demo-role/permissions',
    group: 'People',
  ),
  // Assets
  _GalleryEntry(title: 'Asset List', route: RouteConstants.assets, group: 'Assets'),
  _GalleryEntry(title: 'Asset Detail', route: '${RouteConstants.assets}/demo-asset', group: 'Assets'),
  _GalleryEntry(title: 'Alerts', route: RouteConstants.assetAlerts, group: 'Assets'),
  // Master data
  _GalleryEntry(title: 'Master Data Hub', route: RouteConstants.masterData, group: 'Master Data'),
  ...masterDefinitions.map(
    (def) => _GalleryEntry(
      title: def.title,
      route: RouteConstants.masterList(def.routeKey),
      group: 'Master Data',
    ),
  ),
  // Settings
  _GalleryEntry(title: 'Settings Hub', route: RouteConstants.settings, group: 'Settings'),
  _GalleryEntry(title: 'General Settings', route: RouteConstants.settingsGeneral, group: 'Settings'),
  _GalleryEntry(
    title: 'Company Profile',
    route: RouteConstants.settingsCompanyProfile,
    group: 'Settings',
  ),
  _GalleryEntry(title: 'Appearance', route: RouteConstants.settingsAppearance, group: 'Settings'),
  _GalleryEntry(
    title: 'Roles & Permissions',
    route: RouteConstants.settingsRoles,
    group: 'Settings',
  ),
  _GalleryEntry(title: 'Asset Settings', route: RouteConstants.settingsAsset, group: 'Settings'),
  _GalleryEntry(
    title: 'Notifications',
    route: RouteConstants.settingsNotifications,
    group: 'Settings',
  ),
  _GalleryEntry(title: 'Email Config', route: RouteConstants.settingsEmail, group: 'Settings'),
  _GalleryEntry(title: 'Security', route: RouteConstants.settingsSecurity, group: 'Settings'),
  // Other
  _GalleryEntry(title: 'Reports', route: RouteConstants.reports, group: 'Other'),
  _GalleryEntry(
    title: 'Depreciation Report',
    route: RouteConstants.reportDepreciation,
    group: 'Other',
  ),
  _GalleryEntry(title: 'Audit Logs', route: RouteConstants.auditLogs, group: 'Other'),
];

class ScreenGalleryScreen extends ConsumerStatefulWidget {
  const ScreenGalleryScreen({super.key});

  @override
  ConsumerState<ScreenGalleryScreen> createState() => _ScreenGalleryScreenState();
}

class _ScreenGalleryScreenState extends ConsumerState<ScreenGalleryScreen> {
  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((_) {
      if (ref.read(authStateProvider).status != AuthStatus.authenticated) {
        ref.read(authStateProvider.notifier).loginAsDemo();
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    final groups = _entries.map((e) => e.group).toSet().toList();

    return SingleChildScrollView(
      padding: const EdgeInsets.all(24),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const PageHeader(
            title: 'Screen Gallery',
            subtitle: 'Browse all app screens while the login API is unavailable',
          ),
          const SizedBox(height: 8),
          Text(
            'Demo user session is active. Tap any chip to open that screen.',
            style: Theme.of(context).textTheme.bodySmall,
          ),
          const SizedBox(height: 16),
          ...groups.map((group) {
            final items = _entries.where((e) => e.group == group).toList();
            return Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Padding(
                  padding: const EdgeInsets.only(top: 8, bottom: 12),
                  child: Text(group, style: Theme.of(context).textTheme.titleMedium),
                ),
                Wrap(
                  spacing: 12,
                  runSpacing: 12,
                  children: items.map((entry) {
                    final route = entry.preview ? _route(entry.route) : entry.route;
                    return ActionChip(
                      avatar: const Icon(Icons.open_in_new, size: 18),
                      label: Text(entry.title),
                      onPressed: () => context.push(route),
                    );
                  }).toList(),
                ),
                const SizedBox(height: 16),
              ],
            );
          }),
        ],
      ),
    );
  }
}