import 'package:flutter/material.dart';
import 'package:food_hub_app/widgets/stats/card.dart';
import 'package:graphic/graphic.dart';

import 'data.dart';

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

  @override
  State<StatsPage> createState() => _StatsPage();
}

class _StatsPage extends State<StatsPage> {
  var _smooth = false;
  var _stepped = false;

  final List<Map<String, dynamic>> chartData = const [
    {'x': '1月', 'y': 30},
    {'x': '2月', 'y': 45},
    {'x': '3月', 'y': 28},
    {'x': '4月', 'y': 55},
    {'x': '5月', 'y': 40},
    {'x': '6月', 'y': 65},
  ];

  // @override
  // Widget build(BuildContext context) {
  //   return SingleChildScrollView(
  //     child: Center(
  //       child: Column(
  //         children: <Widget>[
  //           Container(
  //             margin: const EdgeInsets.only(top: 10),
  //             width: 350,
  //             height: 300,
  //             child: Chart(
  //               data: basicData,
  //               variables: {
  //                 'genre': Variable(
  //                   accessor: (Map map) => map['genre'] as String,
  //                 ),
  //                 'sold': Variable(accessor: (Map map) => map['sold'] as num),
  //               },
  //               marks: [
  //                 IntervalMark(
  //                   label: LabelEncode(
  //                     encoder: (tuple) => Label(tuple['sold'].toString()),
  //                   ),
  //                   elevation: ElevationEncode(
  //                     value: 0,
  //                     updaters: {
  //                       'tap': {true: (_) => 5},
  //                     },
  //                   ),
  //                   color: ColorEncode(
  //                     value: Defaults.primaryColor,
  //                     updaters: {
  //                       'tap': {false: (color) => color.withAlpha(100)},
  //                     },
  //                   ),
  //                 ),
  //               ],
  //               axes: [Defaults.horizontalAxis, Defaults.verticalAxis],
  //               selections: {'tap': PointSelection(dim: Dim.x)},
  //               tooltip: TooltipGuide(),
  //               crosshair: CrosshairGuide(),
  //             ),
  //           ),
  //           Container(
  //             padding: const EdgeInsets.fromLTRB(20, 40, 20, 5),
  //             child: const Text(
  //               'Transposed Bar Chart',
  //               style: TextStyle(fontSize: 20),
  //             ),
  //           ),
  //           Container(
  //             margin: const EdgeInsets.only(top: 10),
  //             width: 350,
  //             height: 300,
  //             child: Chart(
  //               data: basicData,
  //               variables: {
  //                 'genre': Variable(
  //                   accessor: (Map map) => map['genre'] as String,
  //                 ),
  //                 'sold': Variable(accessor: (Map map) => map['sold'] as num),
  //               },
  //               transforms: [Proportion(variable: 'sold', as: 'percent')],
  //               marks: [
  //                 IntervalMark(
  //                   position: Varset('percent') / Varset('genre'),
  //                   label: LabelEncode(
  //                     encoder: (tuple) => Label(tuple['sold'].toString()),
  //                   ),
  //                   color: ColorEncode(
  //                     variable: 'genre',
  //                     values: Defaults.colors10,
  //                   ),
  //                   modifiers: [StackModifier()],
  //                 ),
  //               ],
  //               coord: PolarCoord(transposed: true, dimCount: 1, dimFill: 1.05),
  //             ),
  //           ),
  //         ],
  //       ),
  //     ),
  //   );
  // }

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.all(10),
      child: Column(
        children: [
          GridView.count(
            shrinkWrap: true,
            crossAxisCount: 2,
            crossAxisSpacing: 10,
            mainAxisSpacing: 10,
            childAspectRatio: 3,
            children: const [
              StatisticCard(
                icon: Icons.restaurant_menu,
                color: Colors.blue,
                title: '菜谱总数',
                value: 19,
                unit: '个',
              ),
              StatisticCard(
                icon: Icons.grid_view_rounded,
                color: Colors.green,
                title: '菜谱类别',
                value: 5,
                unit: '种',
              ),
              StatisticCard(
                icon: Icons.flag,
                color: Colors.orange,
                title: '做菜次数',
                value: 25,
                unit: '个',
              ),
              StatisticCard(
                icon: Icons.show_chart,
                color: Colors.red,
                title: '平均次数',
                value: 3.13,
                unit: '次/月',
              ),
            ],
          ),
          const SizedBox(height: 10),
          Expanded(
            child: Card(
              color: Colors.white,
              elevation: 0,
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(10),
              ),
              child: Padding(
                padding: EdgeInsets.all(10),
                child: Column(
                  children: [
                    _buildTitleSection(),
                    Divider(
                      height: 1,
                      thickness: 1,
                      color: Theme.of(context).primaryColor,
                      indent: 0,
                      endIndent: 0,
                    ),
                    // 下半部分：图表区
                    Expanded(child: _buildLineChart()),
                  ],
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }

  // 构建标题区域
  Widget _buildTitleSection() {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 12),
      child: Row(
        children: const [
          Icon(Icons.show_chart, size: 24),
          SizedBox(width: 5),
          Text('月度数据趋势统计', style: TextStyle(fontWeight: FontWeight.bold)),
        ],
      ),
    );
  }

  Widget _buildLineChart() {
    return Chart(
      data: chartData,
      variables: {
        'date': Variable(
          accessor: (Map map) => map['x'] as String,
          scale: OrdinalScale(
            tickCount: 5, // x轴刻度数量
          ),
        ),
        'points': Variable(
          accessor: (Map map) => (map['y'] ?? double.nan) as num,
        ),
      },
      marks: [
        LineMark(
          shape: ShapeEncode(value: BasicLineShape(smooth: false)),
          size: SizeEncode(value: 1.5),
        ),
      ],
      axes: [Defaults.horizontalAxis, Defaults.verticalAxis]
    );
  }
}