import 'package:flutter/material.dart';

class ExistingMemberHidden extends StatefulWidget {
  const ExistingMemberHidden({Key? key}) : super(key: key);

  @override
  _ExistingMemberHiddenState createState() => _ExistingMemberHiddenState();
}

class _ExistingMemberHiddenState extends State<ExistingMemberHidden> {
  final List<Map<String, dynamic>> teaItems = [
    {
      'type': '红茶',
      'name': '黄山大红袍',
      'price': '¥ 1999/两',
      'sales': '9人购买',
      'color': Colors.red,
    },
    {
      'type': '绿茶',
      'name': '西湖龙井',
      'price': '¥ 999/两',
      'sales': '0人购买',
      'color': Colors.green,
    },
    {
      'type': '青茶',
      'name': '安溪铁观音',
      'price': '¥ 666/两',
      'sales': '9人购买',
      'color': Colors.blue,
    },
    {
      'type': '白茶',
      'name': '徽州白毫',
      'price': '¥ 500/斤',
      'sales': '10人购买',
      'color': Colors.white, // Assuming white text on a light grey background
    },
    {
      'type': '黑茶',
      'name': '滇池普洱茶',
      'price': '¥ 1200/斤',
      'sales': '99人购买',
      'color': Colors.black,
    },
    {
      'type': '黄茶',
      'name': '平阳黄汤',
      'price': '¥ 388/斤',
      'sales': '110人购买',
      'color': Colors.yellow[800],
    },
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('茶叶详情'),
      ),
      body: SingleChildScrollView(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // Header Section (Image Placeholder)
            Container(
              height: 200,
              color: Colors.grey[300],
              child: Center(
                child: Stack(
                  alignment: Alignment.center,
                  children: [
                    // Placeholder mountain image (simplified)
                    CustomPaint(
                      painter: _MountainPainter(),
                      size: const Size(double.infinity, 200),
                    ),
                    // Placeholder circle
                    Container(
                      width: 40,
                      height: 40,
                      decoration: BoxDecoration(
                        color: Colors.grey[400],
                        shape: BoxShape.circle,
                      ),
                    ),
                  ],
                ),
              ),
            ),
            const SizedBox(height: 16.0),
            // Section Title
            const Padding(
              padding: EdgeInsets.symmetric(horizontal: 16.0),
              child: Text(
                '最新茶叶',
                style: TextStyle(
                  fontSize: 20,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ),
            const SizedBox(height: 16.0),
            // Grid of Tea Items
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 16.0),
              child: GridView.builder(
                shrinkWrap: true,
                physics:
                    const NeverScrollableScrollPhysics(), // Disable grid scrolling
                gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 2,
                  crossAxisSpacing: 16.0,
                  mainAxisSpacing: 16.0,
                  childAspectRatio: 0.8, // Adjust as needed based on image
                ),
                itemCount: teaItems.length,
                itemBuilder: (context, index) {
                  final item = teaItems[index];
                  return _buildTeaItem(item);
                },
              ),
            ),
            const SizedBox(height: 16.0), // Add some space at the bottom
          ],
        ),
      ),
    );
  }

  Widget _buildTeaItem(Map<String, dynamic> item) {
    return Container(
      decoration: BoxDecoration(
        color: Colors.grey[200],
        borderRadius: BorderRadius.circular(8.0),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // Image Placeholder with tea type overlay
          Expanded(
            child: Container(
              decoration: BoxDecoration(
                color: Colors.grey[400],
                borderRadius:
                    const BorderRadius.vertical(top: Radius.circular(8.0)),
              ),
              child: Center(
                child: Text(
                  item['type'],
                  style: TextStyle(
                    fontSize: 24,
                    fontWeight: FontWeight.bold,
                    color: item['color'],
                  ),
                ),
              ),
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  item['name'],
                  style: const TextStyle(
                    fontSize: 16,
                    fontWeight: FontWeight.bold,
                  ),
                  maxLines: 1,
                  overflow: TextOverflow.ellipsis,
                ),
                const SizedBox(height: 4.0),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text(
                      item['price'],
                      style: TextStyle(
                        fontSize: 14,
                        color: Colors.red[700],
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                    Text(
                      item['sales'],
                      style: TextStyle(
                        fontSize: 12,
                        color: Colors.grey[600],
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

// Custom painter for the simplified mountain range in the header
class _MountainPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Colors.blueGrey // Mountain color
      ..style = PaintingStyle.fill;

    final path = Path();
    path.moveTo(0, size.height * 0.6);
    path.lineTo(size.width * 0.2, size.height * 0.4);
    path.lineTo(size.width * 0.4, size.height * 0.7);
    path.lineTo(size.width * 0.6, size.height * 0.3);
    path.lineTo(size.width * 0.8, size.height * 0.5);
    path.lineTo(size.width, size.height * 0.4);
    path.lineTo(size.width, size.height);
    path.lineTo(0, size.height);
    path.close();

    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return false;
  }
}