import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

import '../models/dialogue_models.dart';

/// 任務顯示面板
class TaskDisplayPanel extends StatelessWidget {
  final DialogueTask task;

  const TaskDisplayPanel({
    super.key,
    required this.task,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 200.w,
      padding: EdgeInsets.all(12.w),
      decoration: BoxDecoration(
        color: Colors.black.withOpacity(0.7),
        borderRadius: BorderRadius.circular(12.r),
        border: Border.all(
          color: task.isCompleted ? Colors.green : Colors.orange,
          width: 1,
        ),
      ),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            children: [
              Icon(
                task.isCompleted ? Icons.check_circle : Icons.radio_button_unchecked,
                color: task.isCompleted ? Colors.green : Colors.orange,
                size: 16.sp,
              ),
              SizedBox(width: 6.w),
              Expanded(
                child: Text(
                  task.title,
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 14.sp,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
            ],
          ),
          
          SizedBox(height: 8.h),
          
          Text(
            task.description,
            style: TextStyle(
              color: Colors.white70,
              fontSize: 12.sp,
            ),
            maxLines: 3,
            overflow: TextOverflow.ellipsis,
          ),
          
          SizedBox(height: 8.h),
          
          // 進度條
          LinearProgressIndicator(
            value: task.progress,
            backgroundColor: Colors.grey[600],
            valueColor: AlwaysStoppedAnimation<Color>(
              task.isCompleted ? Colors.green : Colors.orange,
            ),
          ),
          
          SizedBox(height: 4.h),
          
          Text(
            '${(task.progress * 100).toInt()}%',
            style: TextStyle(
              color: Colors.white70,
              fontSize: 10.sp,
            ),
          ),
        ],
      ),
    );
  }
}