import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../profile_manager.dart';
import '../api_service.dart';
import 'add_site_screen.dart';
import 'product_list_screen.dart';

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

  @override
  Widget build(BuildContext context) {
    final profile = Provider.of<ProfileManager>(context);
    final api = Provider.of<ApiService>(context);

    return Scaffold(
      appBar: AppBar(
        title: const Text('My Stores'),
        actions: [
            IconButton(
                icon: const Icon(Icons.lock),
                onPressed: () => profile.logout(),
                tooltip: 'Lock App',
            )
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
            Navigator.push(context, MaterialPageRoute(builder: (_) => const AddSiteScreen()));
        },
        child: const Icon(Icons.add),
      ),
      body: profile.sites.isEmpty
          ? const Center(child: Text('No sites added. Tap + to add one.'))
          : ListView.separated(
              padding: const EdgeInsets.all(16),
              itemCount: profile.sites.length,
              separatorBuilder: (_, __) => const SizedBox(height: 12),
              itemBuilder: (context, index) {
                final site = profile.sites[index];
                return Card(
                  color: const Color(0xFF1F2937),
                  child: ListTile(
                    contentPadding: const EdgeInsets.all(16),
                    leading: Container(
                        padding: const EdgeInsets.all(12),
                        decoration: BoxDecoration(
                            color: Colors.blue.withOpacity(0.2),
                            shape: BoxShape.circle,
                        ),
                        child: const Icon(Icons.store, color: Colors.blue),
                    ),
                    title: Text(site.name, style: const TextStyle(fontWeight: FontWeight.bold)),
                    subtitle: Text(site.url, style: const TextStyle(color: Colors.grey)),
                    trailing: const Icon(Icons.arrow_forward_ios, size: 16),
                    onTap: () {
                        // Connect API Directly
                        api.connect(site.url, site.consumerKey, site.consumerSecret);
                        
                        Navigator.push(
                            context, 
                            MaterialPageRoute(builder: (_) => const ProductListWrapper()),
                        );
                    },
                    onLongPress: () {
                        // Option to delete
                        showDialog(context: context, builder: (_) => AlertDialog(
                            title: const Text('Delete Site'),
                            content: Text('Remove ${site.name}?'),
                            actions: [
                                TextButton(onPressed: () => Navigator.pop(context), child: const Text('Cancel')),
                                TextButton(onPressed: () {
                                    profile.removeSite(site.id);
                                    Navigator.pop(context);
                                }, child: const Text('Delete', style: TextStyle(color: Colors.red))),
                            ],
                        ));
                    },
                  ),
                );
              },
            ),
    );
  }
}

// Wrapper to listen to API changes (like logout from within ProductList)

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

    @override
    Widget build(BuildContext context) {
         return Consumer<ApiService>(
            builder: (context, api, _) {
                if (!api.isLoggedIn) {
                    // If we logged out (disconnected), pop back to selection
                    // We need to do this carefully during build... 
                    // Better: The logout button in ProductList should just api.disconnect() AND Navigator.pop().
                    // So here we likely just show ProductList.
                    return const ProductListScreen();
                }
                return const ProductListScreen();
            },
         );
    }
}