content: import 'package:flutter/material.dart';
  import 'package:provider/provider.dart';
  import '../state/app_state.dart';
  import 'package:pb_authenticator_totp/totp_item.dart';
  import 'package:pb_authenticator_totp/otpauth_migration.dart';
  import '../l10n/app_localizations.dart';
  import 'package:qr_flutter/qr_flutter.dart';
  import 'package:pb_authenticator_state/state.dart';
  
  class ExportAccountsPage extends StatefulWidget {
    const ExportAccountsPage({super.key});
  
    @override
    State<ExportAccountsPage> createState() => _ExportAccountsPageState();
  }
  
  class _ExportAccountsPageState extends State<ExportAccountsPage> {
    static const int maxAccountsPerBatch = 10; // Google Authenticator uses 10
    List<String> _qrUris = [];
    int _currentIndex = 0;
    List<bool> _selected = [];
    bool _qrGenerated = false;
    String _searchQuery = '';
    final TextEditingController _searchController = TextEditingController();
  
    @override
    void initState() {
      super.initState();
      WidgetsBinding.instance.addPostFrameCallback((_) => _initSelection());
    }
  
    @override
    void dispose() {
      _searchController.dispose();
      super.dispose();
    }
  
    void _initSelection() {
      final state = Provider.of<AppState>(context, listen: false);
      final items = state.items ?? [];
      setState(() {
        _selected = List.generate(items.length, (_) => true);
        _qrUris = [];
        _qrGenerated = false;
        _currentIndex = 0;
      });
    }
  
    List<BaseItemType> _filterItems(List<BaseItemType> items) {
      if (_searchQuery.isEmpty) return items;
      
      return items.where((item) {
        final nameMatch = item.totp.accountName.toLowerCase().contains(_searchQuery.toLowerCase());
        final issuerMatch = item.totp.issuer.toLowerCase().contains(_searchQuery.toLowerCase());
        return nameMatch || issuerMatch;
      }).toList();
    }
  
    void _generateQrUris() {
      final state = Provider.of<AppState>(context, listen: false);
      final allItems = state.items ?? [];
      final filteredItems = _filterItems(allItems);
      final selectedItems = <TotpItem>[];
      
      // Map filtered items back to original indices for selection tracking
      for (int i = 0; i < allItems.length; i++) {
        if (_selected[i] && filteredItems.contains(allItems[i])) {
          selectedItems.add(allItems[i].totp);
        }
      }
      if (selectedItems.isEmpty) {
        setState(() {
          _qrUris = [];
          _qrGenerated = true;
        });
        return;
      }
      final otpAuths = selectedItems.map((item) => _toOtpAuthUri(item)).toList();
      final qrUris = <String>[];
      for (int i = 0; i < otpAuths.length; i += maxAccountsPerBatch) {
        final batch = otpAuths.sublist(i, (i + maxAccountsPerBatch > otpAuths.length) ? otpAuths.length : i + maxAccountsPerBatch);
        final uri = OtpAuthMigration().encode(batch, batchSize: otpAuths.length, batchIndex: (i ~/ maxAccountsPerBatch), batchId: 1);
        qrUris.add(uri);
      }
      setState(() {
        _qrUris = qrUris;
        _qrGenerated = true;
        _currentIndex = 0;
      });
      if (qrUris.isNotEmpty) {
        _showQrDialog(qrUris);
      }
    }
  
    void _showQrDialog(List<String> qrUris) {
      int dialogIndex = 0;
      showDialog(
        context: context,
        builder: (context) {
          return StatefulBuilder(
            builder: (context, setState) {
              return AlertDialog(
                contentPadding: const EdgeInsets.all(16),
                content: SizedBox(
                  width: 360,
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      QrImageView(
                        data: qrUris[dialogIndex],
                        version: QrVersions.auto,
                        size: 320,
                        backgroundColor: Colors.white,
                        errorStateBuilder: (cxt, err) => Center(child: Text('QR error', style: TextStyle(color: Colors.red))),
                      ),
                      if (qrUris.length > 1)
                        Padding(
                          padding: const EdgeInsets.only(top: 16),
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: [
                              IconButton(
                                icon: const Icon(Icons.arrow_back),
                                onPressed: dialogIndex > 0
                                    ? () => setState(() => dialogIndex--)
                                    : null,
                              ),
                              Text('${dialogIndex + 1} / ${qrUris.length}'),
                              IconButton(
                                icon: const Icon(Icons.arrow_forward),
                                onPressed: dialogIndex < qrUris.length - 1
                                    ? () => setState(() => dialogIndex++)
                                    : null,
                              ),
                            ],
                          ),
                        ),
                    ],
                  ),
                ),
                actions: [
                  TextButton(
                    onPressed: () => Navigator.of(context).pop(),
                    child: const Text('Close'),
                  ),
                ],
              );
            },
          );
        },
      );
    }
  
    String _toOtpAuthUri(TotpItem item) {
      final algorithm = item.algorithm.name.toUpperCase();
      return 'otpauth://totp/${Uri.encodeComponent(item.issuer)}:${Uri.encodeComponent(item.accountName)}?secret=${item.secret}&issuer=${Uri.encodeComponent(item.issuer)}&algorithm=$algorithm&digits=${item.digits}&period=${item.period}';
    }
  
    @override
    Widget build(BuildContext context) {
      final state = Provider.of<AppState>(context);
      final allItems = state.items ?? [];
      final filteredItems = _filterItems(allItems);
      final loc = AppLocalizations.of(context);
      
      return Scaffold(
        appBar: AppBar(title: Text(loc?.exportAccounts ?? 'Export accounts')),
        body: allItems.isEmpty
            ? Center(child: Text(loc?.noAccounts ?? 'No accounts to export.'))
            : Padding(
                padding: const EdgeInsets.all(16.0),
                child: Column(
                  children: [
                    Icon(Icons.qr_code, size: 48, color: Colors.blue),
                    const SizedBox(height: 8),
                    Text(
                      loc?.exportDescription ?? 'Select which accounts to export and generate a QR code to transfer them to another device.',
                      textAlign: TextAlign.center,
                      style: Theme.of(context).textTheme.bodyMedium,
                    ),
                    const SizedBox(height: 16),
                    // Search field
                    TextField(
                      controller: _searchController,
                      decoration: InputDecoration(
                        hintText: loc?.searchHint ?? 'Search by name or issuer',
                        prefixIcon: const Icon(Icons.search),
                        suffixIcon: _searchQuery.isNotEmpty
                            ? IconButton(
                                icon: const Icon(Icons.clear),
                                onPressed: () {
                                  setState(() {
                                    _searchQuery = '';
                                    _searchController.clear();
                                  });
                                },
                              )
                            : null,
                        border: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(12),
                        ),
                        contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
                      ),
                      onChanged: (value) {
                        setState(() {
                          _searchQuery = value;
                        });
                      },
                    ),
                    const SizedBox(height: 16),
                    // Select All/None buttons
                    Row(
                      children: [
                        TextButton(
                          onPressed: () {
                            setState(() {
                              for (int i = 0; i < allItems.length; i++) {
                                if (filteredItems.contains(allItems[i])) {
                                  _selected[i] = true;
                                }
                              }
                            });
                          },
                          child: Text(loc?.selectAll ?? 'Select All'),
                        ),
                        const SizedBox(width: 8),
                        TextButton(
                          onPressed: () {
                            setState(() {
                              for (int i = 0; i < allItems.length; i++) {
                                if (filteredItems.contains(allItems[i])) {
                                  _selected[i] = false;
                                }
                              }
                            });
                          },
                          child: Text(loc?.selectNone ?? 'Select None'),
                        ),
                      ],
                    ),
                    Expanded(
                      child: filteredItems.isEmpty && _searchQuery.isNotEmpty
                          ? Center(
                              child: Text(
                                loc?.noSearchResults(_searchQuery) ?? 'No accounts found for "$_searchQuery"',
                                textAlign: TextAlign.center,
                                style: const TextStyle(height: 1.2),
                              ),
                            )
                          : ListView.builder(
                              itemCount: filteredItems.length,
                              itemBuilder: (context, i) {
                                final item = filteredItems[i];
                                final originalIndex = allItems.indexOf(item);
                                return CheckboxListTile(
                                  value: _selected[originalIndex],
                                  onChanged: (val) {
                                    setState(() {
                                      _selected[originalIndex] = val ?? false;
                                    });
                                  },
                                  title: Text(item.totp.issuer.isNotEmpty 
                                      ? '${item.totp.issuer}: ${item.totp.accountName}'
                                      : item.totp.accountName),
                                  subtitle: item.totp.issuer.isNotEmpty && item.totp.accountName.isNotEmpty 
                                      ? null 
                                      : Text(item.totp.issuer.isEmpty ? 'No issuer' : 'No account name'),
                                );
                              },
                            ),
                    ),
                    ElevatedButton.icon(
                      icon: const Icon(Icons.qr_code),
                      label: Text(loc?.generateQr ?? 'Generate QR'),
                      onPressed: _selected.any((s) => s) ? _generateQrUris : null,
                    ),
                    const SizedBox(height: 16),
                    if (_qrGenerated && _qrUris.isEmpty)
                      Text(loc?.noAccountsSelected ?? 'No accounts selected.'),
                  ],
                ),
              ),
      );
    }
  }
  
  class BarcodePainterWidget extends StatelessWidget {
    final String data;
    const BarcodePainterWidget({super.key, required this.data});
  
    @override
    Widget build(BuildContext context) {
      return QrImageView(
        data: data,
        version: QrVersions.auto,
        size: 240,
        backgroundColor: Colors.white,
        errorStateBuilder: (cxt, err) => Center(child: Text('QR error', style: TextStyle(color: Colors.red))),
      );
    }
  } 
  