import 'package:flutter/material.dart';
import '../../core/theme/app_spacing.dart';
import '../../shared/widgets/top_nav_bar.dart';
import 'widgets/home_tab_row.dart';
import 'widgets/video_card.dart';

/// AI Video App home screen - matches Pencil bi8Au
class HomeScreen extends StatefulWidget {
  const HomeScreen({super.key});

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  HomeTab _selectedTab = HomeTab.all;

  static const _placeholderImages = [
    'https://images.unsplash.com/photo-1763929272543-0df093e4f659?w=400',
    'https://images.unsplash.com/photo-1703592819695-ea63799b7315?w=400',
    'https://images.unsplash.com/photo-1764787435677-1321e12559e3?w=400',
    'https://images.unsplash.com/photo-1759264244741-7175af0b7e75?w=400',
    'https://images.unsplash.com/photo-1574717024653-61fd2cf4d44d?w=400',
    'https://images.unsplash.com/photo-1611162617474-5b21e879e113?w=400',
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFFFAFAFA),
      appBar: PreferredSize(
        preferredSize: const Size.fromHeight(56),
        child: TopNavBar(
          title: 'AI Video',
          credits: '1,280',
          onCreditsTap: () => Navigator.of(context).pushNamed('/recharge'),
        ),
      ),
      body: Column(
        children: [
          Padding(
            padding: const EdgeInsets.symmetric(
              horizontal: AppSpacing.screenPadding,
              vertical: AppSpacing.xs,
            ),
            child: HomeTabRow(
              selectedTab: _selectedTab,
              onTabChanged: (tab) => setState(() => _selectedTab = tab),
            ),
          ),
          Expanded(
            child: LayoutBuilder(
              builder: (context, constraints) {
                return Center(
                  child: ConstrainedBox(
                    constraints: BoxConstraints(
                      maxWidth: 390,
                    ),
                    child: GridView.builder(
                      padding: const EdgeInsets.fromLTRB(
                        AppSpacing.screenPadding,
                        AppSpacing.xl,
                        AppSpacing.screenPadding,
                        AppSpacing.screenPaddingLarge,
                      ),
                      gridDelegate:
                          const SliverGridDelegateWithFixedCrossAxisCount(
                        crossAxisCount: 2,
                        childAspectRatio: 165 / 248,
                        mainAxisSpacing: AppSpacing.xl,
                        crossAxisSpacing: AppSpacing.xl,
                      ),
                      itemCount: _placeholderImages.length,
                      itemBuilder: (context, index) => VideoCard(
                        imageUrl: _placeholderImages[index],
                        onGenerateSimilar: () =>
                            Navigator.of(context).pushNamed('/generate'),
                      ),
                    ),
                  ),
                );
              },
            ),
          ),
        ],
      ),
    );
  }

}