import 'package:flutter/material.dart';
import '../services/odoo_service.dart';
import '../theme/app_theme.dart';

class BranchesScreen extends StatefulWidget {
  const BranchesScreen({super.key});

  @override
  State<BranchesScreen> createState() => _BranchesScreenState();
}

class _BranchesScreenState extends State<BranchesScreen> {
  List<dynamic> _branches = [];
  bool _isLoading = true;

  @override
  void initState() {
    super.initState();
    _fetchBranches();
  }

  Future<void> _fetchBranches() async {
    try {
      final branches = await OdooService.getPublicBranches();
      if (mounted) {
        setState(() {
          _branches = branches;
          _isLoading = false;
        });
      }
    } catch (e) {
      if (mounted) {
        setState(() => _isLoading = false);
        ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('Error loading branches. Check connection.')));
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Find Branch')),
      body: _isLoading
          ? const Center(child: CircularProgressIndicator())
          : _branches.isEmpty
              ? const Center(child: Text('No branches available.', style: TextStyle(fontSize: 16)))
              : ListView.builder(
                  padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 16),
                  itemCount: _branches.length,
                  itemBuilder: (context, index) {
                    final branch = _branches[index];
                    
                    final street = branch['street'] != null && branch['street'] != false ? branch['street'] : '';
                    final city = branch['city'] != null && branch['city'] != false ? branch['city'] : '';
                    final phone = branch['phone'] != null && branch['phone'] != false ? branch['phone'] : '';
                    
                    final addressParts = [street, city].where((e) => e.toString().isNotEmpty).join(', ');
                    
                    return Container(
                      margin: const EdgeInsets.only(bottom: 16),
                      decoration: BoxDecoration(
                        color: AppTheme.surfaceContainerLow,
                        borderRadius: BorderRadius.circular(16),
                        boxShadow: [
                          BoxShadow(
                            color: AppTheme.onSurface.withOpacity(0.04),
                            blurRadius: 16,
                            offset: const Offset(0, 4),
                          )
                        ]
                      ),
                      child: ListTile(
                        contentPadding: const EdgeInsets.all(16),
                        leading: Container(
                          padding: const EdgeInsets.all(12),
                          decoration: BoxDecoration(
                            color: AppTheme.secondaryContainer.withOpacity(0.2),
                            shape: BoxShape.circle,
                          ),
                          child: const Icon(Icons.storefront, color: AppTheme.secondary),
                        ),
                        title: Text(
                          branch['name'] ?? 'Mapan Branch', 
                          style: Theme.of(context).textTheme.titleMedium,
                        ),
                        subtitle: Padding(
                          padding: const EdgeInsets.only(top: 8.0),
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              Text(
                                addressParts.isEmpty ? 'No address specified' : addressParts,
                                style: Theme.of(context).textTheme.bodyMedium,
                              ),
                              if (phone.isNotEmpty) ...[
                                const SizedBox(height: 4),
                                Row(
                                  children: [
                                    const Icon(Icons.phone, size: 14, color: AppTheme.primary),
                                    const SizedBox(width: 4),
                                    Text(phone, style: Theme.of(context).textTheme.bodySmall?.copyWith(color: AppTheme.primary)),
                                  ],
                                ),
                              ]
                            ],
                          ),
                        ),
                        trailing: const Icon(Icons.chevron_right, color: AppTheme.onSurfaceVariant),
                      ),
                    );
                  },
                ),
    );
  }
}