modify todo function (processing)

lib/todo/todo_detail.dart

@@ -1,97 +1,189 @@
 import 'package:flutter/material.dart';
+import 'package:intl/intl.dart';
 import './todo_model.dart';
+import './todo_api.dart';
 
-class TodoDetail extends StatelessWidget {
+class TodoDetail extends StatefulWidget {
   final Todo todo;
 
   const TodoDetail({required this.todo, super.key});
 
+  @override
+  State<TodoDetail> createState() => _TodoDetailState();
+}
+
+class _TodoDetailState extends State<TodoDetail> {
+  final TodoApiService _apiService = TodoApiService();
+  bool _isUpdating = false; // 控制按鈕 Loading 狀態
+
+  // 執行「標記為完成」的 API 邏輯
+  Future<void> _handleMarkAsDone() async {
+    setState(() => _isUpdating = true);
+
+    // 呼叫 API 更新 pbi_status 為 'DONE'
+    bool success = await _apiService.updateTodoStatus(widget.todo.id, 'DONE');
+
+    if (mounted) {
+      setState(() => _isUpdating = false);
+      if (success) {
+        ScaffoldMessenger.of(context).showSnackBar(
+          SnackBar(content: Text('任務 "${widget.todo.taskName}" 已完成！')),
+        );
+        // 重要：返回 true 告知列表頁 (TodoManager) 執行 _refreshTodos()
+        Navigator.pop(context, true);
+      } else {
+        ScaffoldMessenger.of(context).showSnackBar(
+          const SnackBar(content: Text('狀態更新失敗，請檢查網路連線。'), backgroundColor: Colors.red),
+        );
+      }
+    }
+  }
+
   @override
   Widget build(BuildContext context) {
+    // 檢查目前狀態是否已為 DONE
+    bool isCompleted = widget.todo.status?.toUpperCase() == 'DONE';
+
     return Scaffold(
+      backgroundColor: const Color(0xFFF8F9FA),
       appBar: AppBar(
-        title: Text(todo.taskName, overflow: TextOverflow.ellipsis),
+        title: const Text('任務詳情', style: TextStyle(fontWeight: FontWeight.bold)),
+        centerTitle: true,
+        elevation: 0,
+        backgroundColor: Colors.white,
+        foregroundColor: Colors.black,
       ),
       body: SingleChildScrollView(
-        padding: const EdgeInsets.all(20.0),
+        padding: const EdgeInsets.all(24.0),
         child: Column(
           crossAxisAlignment: CrossAxisAlignment.start,
-          children: <Widget>[
-            // 任務標題
-            Text(
-              todo.taskName,
-              style: const TextStyle(fontSize: 24.0, fontWeight: FontWeight.bold, color: Colors.black87),
-            ),
-            const Divider(height: 24.0),
+          children: [
+            // 標題與分類卡片
+            _buildHeaderCard(),
+            const SizedBox(height: 24),
 
-            // 任務屬性表格 (簡潔顯示)
-            _buildAttributeRow(context, '狀態', todo.status ?? 'N/A', todo.statusColor),
-            _buildAttributeRow(context, '優先級', todo.priority ?? 'N/A', Colors.red),
-            _buildAttributeRow(context, '截止日期', todo.formattedEndDate, Colors.blue),
-            _buildAttributeRow(context, '建立者', todo.createdBy ?? 'N/A', Colors.grey),
-            _buildAttributeRow(context, '分類', todo.className, Colors.purple),
+            // 詳細屬性清單
+            const Text('詳細資訊', style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold, color: Colors.blueGrey)),
+            const SizedBox(height: 12),
+            _buildInfoCard(),
+            const SizedBox(height: 24),
 
-            const Divider(height: 32.0),
-
-            // 詳細說明
-            const Text(
-              '詳細說明:',
-              style: TextStyle(fontSize: 18.0, fontWeight: FontWeight.w600, color: Colors.black87),
-            ),
-            const SizedBox(height: 8),
-            Text(
-              todo.description ?? '無詳細說明。',
-              style: const TextStyle(fontSize: 16.0, height: 1.5, color: Colors.black54),
-              textAlign: TextAlign.justify,
-            ),
+            // 任務描述
+            const Text('任務說明', style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold, color: Colors.blueGrey)),
+            const SizedBox(height: 12),
+            _buildDescriptionBox(),
             const SizedBox(height: 40),
 
-            // 底部按鈕 (例如：標記完成)
-            Center(
-              child: ElevatedButton.icon(
-                onPressed: () {
-                  ScaffoldMessenger.of(context).showSnackBar(
-                    SnackBar(content: Text('已標記任務 "${todo.taskName}" 待實作更新狀態。')),
-                  );
-                  // 實際應用中，這裡會呼叫 API 更新 pbi_status 為 'DONE'
-                },
-                icon: const Icon(Icons.check_circle_outline),
-                label: const Text('標記為已完成'),
-                style: ElevatedButton.styleFrom(
-                  padding: const EdgeInsets.symmetric(horizontal: 30, vertical: 15),
-                  backgroundColor: Colors.green,
-                  foregroundColor: Colors.white,
-                  textStyle: const TextStyle(fontSize: 18),
-                ),
-              ),
-            ),
+            // 操作按鈕
+            _buildActionButton(isCompleted),
           ],
         ),
       ),
     );
   }
 
-  Widget _buildAttributeRow(BuildContext context, String label, String value, Color color) {
-    return Padding(
-      padding: const EdgeInsets.only(bottom: 8.0),
-      child: Row(
+  Widget _buildHeaderCard() {
+    return Container(
+      width: double.infinity,
+      padding: const EdgeInsets.all(20),
+      decoration: BoxDecoration(
+        color: Colors.white,
+        borderRadius: BorderRadius.circular(20),
+        boxShadow: [BoxShadow(color: Colors.black.withValues(alpha: 0.05), blurRadius: 10)],
+      ),
+      child: Column(
         crossAxisAlignment: CrossAxisAlignment.start,
         children: [
-          SizedBox(
-            width: 100,
-            child: Text(
-              '$label:',
-              style: const TextStyle(fontWeight: FontWeight.w500, color: Colors.black),
-            ),
+          Row(
+            children: [
+              Container(
+                padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 4),
+                decoration: BoxDecoration(color: const Color(0xFFF0EFFF), borderRadius: BorderRadius.circular(8)),
+                child: Text(widget.todo.className, style: const TextStyle(color: Color(0xFF6542D0), fontWeight: FontWeight.bold, fontSize: 12)),
+              ),
+              const Spacer(),
+              Text(widget.todo.priority ?? '一般', style: const TextStyle(color: Colors.redAccent, fontWeight: FontWeight.w600)),
+            ],
           ),
-          Expanded(
-            child: Text(
-              value,
-              style: TextStyle(fontWeight: FontWeight.w600, color: color),
-            ),
+          const SizedBox(height: 16),
+          Text(
+            widget.todo.taskName,
+            style: const TextStyle(fontSize: 24, fontWeight: FontWeight.bold, color: Colors.black87),
           ),
         ],
       ),
     );
   }
+
+  Widget _buildInfoCard() {
+    return Container(
+      padding: const EdgeInsets.all(20),
+      decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.circular(20)),
+      child: Column(
+        children: [
+          _buildDetailRow(Icons.calendar_today, '截止日期', widget.todo.formattedEndDate),
+          const Divider(height: 32),
+          _buildDetailRow(Icons.person_outline, '建立者', widget.todo.createdBy ?? '系統'),
+          const Divider(height: 32),
+          _buildDetailRow(Icons.info_outline, '目前狀態', widget.todo.status ?? 'WIP', color: widget.todo.statusColor),
+        ],
+      ),
+    );
+  }
+
+  Widget _buildDetailRow(IconData icon, String label, String value, {Color? color}) {
+    return Row(
+      children: [
+        Icon(icon, size: 20, color: Colors.grey),
+        const SizedBox(width: 12),
+        Text(label, style: const TextStyle(color: Colors.grey, fontSize: 14)),
+        const Spacer(),
+        Text(value, style: TextStyle(fontWeight: FontWeight.bold, fontSize: 15, color: color ?? Colors.black87)),
+      ],
+    );
+  }
+
+  Widget _buildDescriptionBox() {
+    return Container(
+      width: double.infinity,
+      padding: const EdgeInsets.all(20),
+      decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.circular(20)),
+      child: Text(
+        widget.todo.description ?? '尚無詳細說明。',
+        style: const TextStyle(fontSize: 15, color: Colors.black54, height: 1.6),
+      ),
+    );
+  }
+
+  Widget _buildActionButton(bool isCompleted) {
+    if (isCompleted) {
+      return Center(
+        child: Column(
+          children: const [
+            Icon(Icons.check_circle, color: Colors.green, size: 64),
+            SizedBox(height: 8),
+            Text('此任務已圓滿完成', style: TextStyle(color: Colors.green, fontWeight: FontWeight.bold, fontSize: 16)),
+          ],
+        ),
+      );
+    }
+
+    return SizedBox(
+      width: double.infinity,
+      height: 56,
+      child: ElevatedButton.icon(
+        onPressed: _isUpdating ? null : _handleMarkAsDone,
+        icon: _isUpdating
+            ? const SizedBox(width: 20, height: 20, child: CircularProgressIndicator(strokeWidth: 2, color: Colors.white))
+            : const Icon(Icons.check_circle_outline),
+        label: Text(_isUpdating ? '正在更新狀態...' : '標記為已完成', style: const TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
+        style: ElevatedButton.styleFrom(
+          backgroundColor: Colors.green,
+          foregroundColor: Colors.white,
+          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
+          elevation: 4,
+        ),
+      ),
+    );
+  }
 }