import 'package:flutter/material.dart';
import '../utils/responsive_layout.dart';
import '../widgets/responsive_widgets.dart';
import '../constants/app_constants.dart';

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

  @override
  State<ResponsiveHomePage> createState() => _ResponsiveHomePageState();
}

class _ResponsiveHomePageState extends State<ResponsiveHomePage> {
  String _layoutMode = AppConstants.gridLayout;

  @override
  Widget build(BuildContext context) {
    return ResponsiveScaffold(
      title: AppConstants.appTitle,
      body: ResponsiveContainer(
        child: Column(
          children: [
            _buildHeader(context),
            const SizedBox(height: 24),
            _buildContent(context),
          ],
        ),
      ),
      floatingActionButton: ResponsiveLayout.isMobile(context)
          ? FloatingActionButton(
              onPressed: _toggleLayout,
              child: const Icon(Icons.grid_view),
            )
          : null,
    );
  }

  Widget _buildHeader(BuildContext context) {
    return ResponsiveContainer(
      padding: EdgeInsets.symmetric(
        vertical: ResponsiveLayout.isMobile(context) ? 16 : 24,
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            '欢迎使用 Poes',
            style: Theme.of(context).textTheme.headlineLarge?.copyWith(
              fontWeight: FontWeight.bold,
            ),
          ),
          const SizedBox(height: 8),
          Text(
            '这是一个响应式布局的示例页面',
            style: Theme.of(context).textTheme.bodyMedium?.copyWith(
              color: Colors.grey[600],
            ),
          ),
          if (!ResponsiveLayout.isMobile(context)) ...[
            const SizedBox(height: 16),
            Row(
              children: [
                ResponsiveButton(
                  text: '网格布局',
                  onPressed: () => _changeLayout(AppConstants.gridLayout),
                  backgroundColor: _layoutMode == AppConstants.gridLayout
                      ? AppConstants.primaryColor
                      : Colors.grey[300],
                  textColor: _layoutMode == AppConstants.gridLayout
                      ? Colors.white
                      : Colors.black,
                ),
                const SizedBox(width: 12),
                ResponsiveButton(
                  text: '列表布局',
                  onPressed: () => _changeLayout(AppConstants.listLayout),
                  backgroundColor: _layoutMode == AppConstants.listLayout
                      ? AppConstants.primaryColor
                      : Colors.grey[300],
                  textColor: _layoutMode == AppConstants.listLayout
                      ? Colors.white
                      : Colors.black,
                ),
              ],
            ),
          ],
        ],
      ),
    );
  }

  Widget _buildContent(BuildContext context) {
    if (_layoutMode == AppConstants.gridLayout) {
      return _buildGridLayout(context);
    } else {
      return _buildListLayout(context);
    }
  }

  Widget _buildGridLayout(BuildContext context) {
    final items = List.generate(12, (index) => index);
    
    return ResponsiveGrid(
      mobileColumns: 2,
      tabletColumns: 3,
      desktopColumns: 4,
      largeDesktopColumns: 6,
      spacing: ResponsiveLayout.isMobile(context) ? 12 : 16,
      padding: EdgeInsets.zero,
      children: items.map((index) => _buildCard(context, index)).toList(),
    );
  }

  Widget _buildListLayout(BuildContext context) {
    final items = List.generate(12, (index) => index);
    
    return ListView.separated(
      shrinkWrap: true,
      physics: const NeverScrollableScrollPhysics(),
      itemCount: items.length,
      separatorBuilder: (context, index) => const SizedBox(height: 12),
      itemBuilder: (context, index) => _buildListCard(context, index),
    );
  }

  Widget _buildCard(BuildContext context, int index) {
    return ResponsiveCard(
      onTap: () => _showItemDetails(context, index),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            width: double.infinity,
            height: ResponsiveLayout.isMobile(context) ? 80 : 120,
            decoration: BoxDecoration(
              color: AppConstants.primaryColor.withValues(alpha: 0.1),
              borderRadius: BorderRadius.circular(8),
            ),
            child: Icon(
              Icons.widgets,
              size: ResponsiveLayout.isMobile(context) ? 32 : 48,
              color: AppConstants.primaryColor,
            ),
          ),
          const SizedBox(height: 12),
          Text(
            '项目 ${index + 1}',
            style: Theme.of(context).textTheme.titleMedium?.copyWith(
              fontWeight: FontWeight.w600,
            ),
          ),
          const SizedBox(height: 4),
          Text(
            '这是项目 ${index + 1} 的描述信息',
            style: Theme.of(context).textTheme.bodySmall?.copyWith(
              color: Colors.grey[600],
            ),
            maxLines: 2,
            overflow: TextOverflow.ellipsis,
          ),
        ],
      ),
    );
  }

  Widget _buildListCard(BuildContext context, int index) {
    return ResponsiveCard(
      onTap: () => _showItemDetails(context, index),
      child: Row(
        children: [
          Container(
            width: ResponsiveLayout.isMobile(context) ? 60 : 80,
            height: ResponsiveLayout.isMobile(context) ? 60 : 80,
            decoration: BoxDecoration(
              color: AppConstants.primaryColor.withValues(alpha: 0.1),
              borderRadius: BorderRadius.circular(8),
            ),
            child: Icon(
              Icons.widgets,
              size: ResponsiveLayout.isMobile(context) ? 24 : 32,
              color: AppConstants.primaryColor,
            ),
          ),
          const SizedBox(width: 16),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  '项目 ${index + 1}',
                  style: Theme.of(context).textTheme.titleMedium?.copyWith(
                    fontWeight: FontWeight.w600,
                  ),
                ),
                const SizedBox(height: 4),
                Text(
                  '这是项目 ${index + 1} 的详细描述信息，包含了更多的内容展示',
                  style: Theme.of(context).textTheme.bodySmall?.copyWith(
                    color: Colors.grey[600],
                  ),
                  maxLines: 2,
                  overflow: TextOverflow.ellipsis,
                ),
              ],
            ),
          ),
          Icon(
            Icons.arrow_forward_ios,
            size: ResponsiveLayout.isMobile(context) ? 16 : 20,
            color: Colors.grey[400],
          ),
        ],
      ),
    );
  }

  void _changeLayout(String layoutMode) {
    setState(() {
      _layoutMode = layoutMode;
    });
  }

  void _toggleLayout() {
    setState(() {
      _layoutMode = _layoutMode == AppConstants.gridLayout
          ? AppConstants.listLayout
          : AppConstants.gridLayout;
    });
  }

  void _showItemDetails(BuildContext context, int index) {
    showDialog(
      context: context,
      builder: (context) => AlertDialog(
        title: Text('项目 ${index + 1}'),
        content: Text(
          '这是项目 ${index + 1} 的详细信息。在响应式布局中，这个对话框会根据屏幕大小自动调整。',
        ),
        actions: [
          TextButton(
            onPressed: () => Navigator.of(context).pop(),
            child: const Text('关闭'),
          ),
        ],
      ),
    );
  }
}