import 'dart:io';

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

import '../viewmodels/product_list_view_model.dart';

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

  @override
  Widget build(BuildContext context) {
    final viewModel = context.watch<ProductListViewModel>();

    return Scaffold(
      appBar: AppBar(
        title: const Text('Products'),
        actions: [
          IconButton(
            tooltip: 'Back to bar',
            onPressed: () => context.go('/bar'),
            icon: const Icon(Icons.point_of_sale),
          ),
        ],
      ),
      resizeToAvoidBottomInset: false,
      floatingActionButton: FloatingActionButton.extended(
        onPressed: () => context.go('/products/new'),
        icon: const Icon(Icons.add),
        label: const Text('Add product'),
      ),
      body: Builder(
        builder: (context) {
          if (viewModel.isLoading) {
            return const Center(
              child: CircularProgressIndicator(),
            );
          }

          if (viewModel.errorMessage != null) {
            return Center(
              child: Text(viewModel.errorMessage!),
            );
          }

          if (viewModel.products.isEmpty) {
            return const Center(
              child: Text('No products yet.'),
            );
          }

          return ListView.separated(
            padding: const EdgeInsets.all(16),
            itemCount: viewModel.products.length,
            separatorBuilder: (_, __) => const SizedBox(height: 8),
            itemBuilder: (context, index) {
              final product = viewModel.products[index];

              return Card(
                child: ListTile(
                  leading: SizedBox(
                    width: 56,
                    height: 56,
                    child: Center(
                      child: Image.file(
                        File(product.imagePath!),
                        fit: BoxFit.contain,
                      ),
                    ),
                  ),
                  title: Text(product.name),
                  subtitle: Text(
                    '${product.category} • ${product
                        .formattedPrice} • Stock: ${product.stockQuantity}',
                  ),
                  trailing: const Icon(Icons.chevron_right),
                  onTap: () => context.go('/products/${product.id}/edit'),
                ),
              );
            },
          );
        },
      ),
    );
  }
}