import 'package:flutter/material.dart';
import 'package:food_hub_app/models/recipe.dart';
import 'package:food_hub_app/provider/food_provider.dart';
import 'package:food_hub_app/widgets/common/image.dart';
import 'package:food_hub_app/widgets/common/index.dart';
import 'package:food_hub_app/widgets/common/year_selector.dart';
import 'package:timelines_plus/timelines_plus.dart';
import 'package:provider/provider.dart';

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

  @override
  State<StatefulWidget> createState() => _RecipeTimeline();
}

class _RecipeTimeline extends State<RecipeTimeline> {
  Widget buildTimelineCard(BuildContext context, FoodRecord record) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Row(
          children: [
            Icon(
              Icons.date_range,
              color: Theme.of(context).colorScheme.primary,
            ),
            SizedBox(width: 5),
            Text(
              record.date,
              style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
            ),
          ],
        ),
        SizedBox(height: 6),
        Padding(
          padding: EdgeInsets.symmetric(vertical: 8, horizontal: 0),
          child: BuildCard(
            child: Column(
              children: [
                Text(
                  record.name,
                  style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
                ),
                const SizedBox(height: 5),
                buildNetworkImage(context, [record.imageUrl], 0),
              ],
            ),
          ),
        ),
      ],
    );
  }

  Widget buildTimeline(BuildContext context, List<FoodRecord> recordList) {
    if (recordList.isEmpty) {
      return buildEmptyData();
    } else {
      return Timeline.tileBuilder(
        theme: TimelineThemeData(nodePosition: 0, indicatorPosition: 0),
        builder: TimelineTileBuilder.connected(
          itemCount: recordList.length,
          connectorBuilder:
              (context, index, type) => Connector.solidLine(
                thickness: 2,
                color: Theme.of(context).colorScheme.primary,
              ),
          indicatorBuilder: (context, index) {
            return Indicator.dot(
              size: 12.0,
              color: Theme.of(context).colorScheme.primary,
            );
          },
          contentsBuilder: (context, index) {
            return Padding(
              padding: const EdgeInsets.symmetric(vertical: 0, horizontal: 8),
              child: buildTimelineCard(context, recordList[index]),
            );
          },
        ),
      );
    }
  }

  Widget _buildContent(FoodProvider provider) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        YearSelector(
          initialYear: DateTime.now().year,
          minYear: 2000,
          maxYear: 2100,
          onYearChanged:
              (year) =>
                  provider.refreshRecordList("$year-01-01", "$year-12-31"),
        ),
        Expanded(
          child: Padding(
            padding: EdgeInsets.symmetric(vertical: 0, horizontal: 10),
            child: buildTimeline(context, provider.recordList),
          ),
        ),
      ],
    );
  }

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

    return Stack(
      children: [
        if (provider.isLoading)
          buildLoadingIndicator(context)
        else
          _buildContent(provider),
      ],
    );
  }
}