japp_flutter/lib/features/challenge/views/widgets/challenge_card.dart

import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'package:japp_flutter/core/models/challenge_model.dart';


class ChallengeCard extends StatelessWidget {
  final ChallengeModel challenge;

  const ChallengeCard({super.key, required this.challenge});

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);

    return Card(
      elevation: 2,
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
      margin: const EdgeInsets.only(bottom: 16),
      child: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Row(
              children: [
                Expanded(
                  child: Text(
                    challenge.title,
                    style: const TextStyle(
                      fontSize: 18,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ),
                _DifficultyChip(difficulty: challenge.difficulty),
              ],
            ),
            const SizedBox(height: 8),
            Text(
              challenge.description,
              style: TextStyle(color: Colors.grey[700], fontSize: 14),
            ),
            const SizedBox(height: 16),
            _ProgressBar(
              startDate: challenge.startDate,
              endDate: challenge.endDate,
              remainingDays: challenge.remainingDays?? 0,
            ),
            const SizedBox(height: 12),
            _CardFooter(
              participants: challenge.participants,
              remainingDays: challenge.remainingDays ?? 0,
            ),
          ],
        ),
      ),
    );
  }
}

// 将复杂子组件拆分为独立组件
class _DifficultyChip extends StatelessWidget {
  final String difficulty;

  const _DifficultyChip({required this.difficulty});

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

  @override
  Widget build(BuildContext context) {
    return Chip(
      label: Text(difficulty, style: const TextStyle(color: Colors.white)),
      backgroundColor: _getColor(),
    );
  }
}

class _ProgressBar extends StatelessWidget {
  final DateTime startDate;
  final DateTime endDate;
  final int remainingDays;

  const _ProgressBar({
    required this.startDate,
    required this.endDate,
    required this.remainingDays,
  });

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    final totalDays = endDate.difference(startDate).inDays;
    final passedDays = totalDays - remainingDays;
    final progress = passedDays / totalDays;

    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          '${(progress * 100).toStringAsFixed(0)}%',
          style: const TextStyle(fontSize: 12),
        ),
        const SizedBox(height: 4),
        LinearProgressIndicator(
          value: progress,
          backgroundColor: Colors.grey[200],
          borderRadius: BorderRadius.circular(10),
          minHeight: 8,
          color: theme.primaryColor,
        ),
        const SizedBox(height: 4),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Text(
              DateFormat('MM/dd').format(startDate),
              style: const TextStyle(fontSize: 12),
            ),
            Text(
              DateFormat('MM/dd').format(endDate),
              style: const TextStyle(fontSize: 12),
            ),
          ],
        ),
      ],
    );
  }
}

class _CardFooter extends StatelessWidget {
  final int participants;
  final int remainingDays;

  const _CardFooter({required this.participants, required this.remainingDays});

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        _InfoChip(icon: Icons.people, text: '$participants人参加'),
        _InfoChip(icon: Icons.calendar_today, text: '剩余${remainingDays}天'),
      ],
    );
  }
}

class _InfoChip extends StatelessWidget {
  final IconData icon;
  final String text;

  const _InfoChip({required this.icon, required this.text});

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
      decoration: BoxDecoration(
        color: Colors.grey[100],
        borderRadius: BorderRadius.circular(20),
      ),
      child: Row(
        children: [
          Icon(icon, size: 16, color: Colors.grey[600]),
          const SizedBox(width: 4),
          Text(text, style: TextStyle(color: Colors.grey[700])),
        ],
      ),
    );
  }
}