import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'package:japp_flutter/core/models/challenge_model.dart';
import 'package:japp_flutter/features/challenge/view_models/challenge_detail_vm.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

class ChallengeDetailScreen extends ConsumerWidget {
  final int challengeId;

  const ChallengeDetailScreen({super.key, required this.challengeId});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final challengeAsync = ref.watch(challengeDetailProvider);

    return Scaffold(
      appBar: AppBar(
        title: const Text("挑战详情"),
        actions: [
          IconButton(
            icon: const Icon(Icons.edit),
            onPressed: () {
              final challenge = challengeAsync.value;
              if (challenge != null) {
                Navigator.pushNamed(context, '/edit/${challenge.id}');
              }
            },
          ),
        ],
      ),
      body: switch (challengeAsync) {
        AsyncError(:final error) => Center(child: Text('加载失败: $error')),
        AsyncData(value: final value) => _buildChallengeContent(value!),
        _ => const Center(child: CircularProgressIndicator()),

      },
    );
  }

  Widget _buildChallengeContent(ChallengeModel challenge) {
    return SingleChildScrollView(
      padding: const EdgeInsets.all(16),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            challenge.title,
            style: const TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
          ),
          const SizedBox(height: 8),
          Chip(
            label: Text(
              challenge.difficulty,
              style: const TextStyle(color: Colors.white),
            ),
            backgroundColor: _getDifficultyColor(challenge.difficulty),
          ),
          const SizedBox(height: 16),
          Text(
            challenge.description,
            style: const TextStyle(fontSize: 16, height: 1.5),
          ),
          const SizedBox(height: 24),
          _buildDateInfo('开始时间', challenge.startDate),
          _buildDateInfo('结束时间', challenge.endDate),
          const SizedBox(height: 16),
          _buildParticipantInfo(challenge.participants),
          const SizedBox(height: 24),
          _buildProgressSection(challenge),
        ],
      ),
    );
  }

  Widget _buildDateInfo(String label, DateTime date) {
    return Padding(
      padding: const EdgeInsets.only(bottom: 8),
      child: Row(
        children: [
          Text('$label: ', style: const TextStyle(fontWeight: FontWeight.bold)),
          Text(DateFormat('yyyy年MM月dd日').format(date)),
        ],
      ),
    );
  }

  Widget _buildParticipantInfo(int count) {
    return Row(
      children: [
        const Icon(Icons.people, size: 20),
        const SizedBox(width: 8),
        Text('$count 人参与'),
      ],
    );
  }

  Widget _buildProgressSection(ChallengeModel challenge) {
    final totalDays = challenge.endDate.difference(challenge.startDate).inDays;
    final passedDays = totalDays - challenge.remainingDays!;
    final progress = passedDays / totalDays;

    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          '进度 ${(progress * 100).toStringAsFixed(0)}%',
          style: const TextStyle(fontWeight: FontWeight.bold),
        ),
        const SizedBox(height: 8),
        LinearProgressIndicator(
          value: progress,
          minHeight: 10,
          borderRadius: BorderRadius.circular(5),
          color: Colors.blue,
          backgroundColor: Colors.blue.shade100,
        ),
        const SizedBox(height: 8),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Text('已进行 $passedDays 天'),
            Text('剩余 ${challenge.remainingDays} 天'),
          ],
        ),
      ],
    );
  }

  Color _getDifficultyColor(String difficulty) {
    switch (difficulty) {
      case '简单':
        return Colors.green;
      case '中等':
        return Colors.orange;
      case '困难':
        return Colors.red;
      default:
        return Colors.grey;
    }
  }
}