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 StatefulWidget {
  const ProductListView({super.key});

  @override
  State<ProductListView> createState() => _ProductListViewState();
}

class _ProductListViewState extends State<ProductListView> {
  @override
  void initState() {
    super.initState();

    WidgetsBinding.instance.addPostFrameCallback((_) {
      context.read<ProductListViewModel>().loadProducts();
    });
  }

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

    return Scaffold(
      appBar: AppBar(
        title: Row(
          children: [
            IconButton(
              onPressed: () => context.go('/bar'),
              icon: const Icon(Icons.arrow_back),
            ),
            const SizedBox(width: 8),
            const Text('Products'),
          ],
        ),
      ),
      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: product.imagePath != null &&
                              product.imagePath!.isNotEmpty
                          ? Image.file(
                              File(product.imagePath!),
                              fit: BoxFit.contain,
                              cacheWidth: 112,
                              errorBuilder:
                                  (context, error, stackTrace) =>
                                      const Icon(Icons.image_not_supported_outlined),
                            )
                          : const Icon(Icons.image_not_supported_outlined),
                    ),
                  ),
                  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'),
                ),
              );
            },
          );
        },
      ),
    );
  }
}