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

class ActivityListPage extends StatefulWidget {
  const ActivityListPage({Key? key}) : super(key: key);

  @override
  State<ActivityListPage> createState() => _ActivityListPageState();
}

class _ActivityListPageState extends State<ActivityListPage> {
  int? selectedActivityId;
  int selectedPeopleCount = 1;

  void openRegisterModal(int activityId) {
    setState(() {
      selectedActivityId = activityId;
    });
    showDialog(
      context: context,
      builder:
          (context) => AlertDialog(
            title: const Text('確認報名'),
            content: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                const Text('選擇報名人數：'),
                DropdownButton<int>(
                  value: selectedPeopleCount,
                  onChanged: (value) {
                    if (value != null) {
                      setState(() {
                        selectedPeopleCount = value;
                      });
                    }
                  },
                  items:
                      [1, 2, 3, 4]
                          .map(
                            (e) =>
                                DropdownMenuItem(value: e, child: Text('$e 人')),
                          )
                          .toList(),
                ),
              ],
            ),
            actions: [
              TextButton(
                onPressed: () => Navigator.pop(context),
                child: const Text('取消'),
              ),
              ElevatedButton(
                onPressed: () {
                  Navigator.pop(context);
                  ScaffoldMessenger.of(context).showSnackBar(
                    SnackBar(
                      content: Text(
                        '已報名活動 ID $selectedActivityId，人數：$selectedPeopleCount',
                      ),
                    ),
                  );
                },
                child: const Text('確認報名'),
              ),
            ],
          ),
    );
  }

  Widget activityCard({
    required String title,
    required String time,
    required String location,
    int? id,
    bool canRegister = false,
  }) {
    return Card(
      margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
      child: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              title,
              style: const TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
            ),
            const SizedBox(height: 4),
            Text(time),
            Text(location),
            Row(
              mainAxisAlignment: MainAxisAlignment.end,
              children: [
                TextButton(
                  onPressed: () {
                    // TODO : 查看詳情
                  },
                  style: ElevatedButton.styleFrom(
                    backgroundColor: Colors.transparent,
                    foregroundColor: Colors.black,
                    shadowColor: Colors.transparent,
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(16),
                      side: const BorderSide(color: Colors.black),
                    ),
                    padding: const EdgeInsets.symmetric(
                      horizontal: 20,
                      vertical: 12,
                    ),
                  ),
                  child: const Text('查看詳情'),
                ),
                if (canRegister && id != null) ...[
                  const SizedBox(width: 8),
                  ElevatedButton(
                    onPressed: () => openRegisterModal(id),
                    style: ElevatedButton.styleFrom(
                      backgroundColor: Colors.green,
                      shadowColor: Colors.transparent,
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(16),
                      ),
                      padding: const EdgeInsets.symmetric(
                        horizontal: 20,
                        vertical: 12,
                      ),
                    ),
                    child: const Text(
                      '我要報名',
                      style: TextStyle(color: Colors.white),
                    ),
                  ),
                ],
              ],
            ),
          ],
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: const BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.vertical(top: Radius.circular(24)), // 上方圓角
      ),
      child: SafeArea(
        top: false,
        child: Padding(
          padding: const EdgeInsets.only(bottom: 20),
          child: Column(
            children: [
              // 顶部滑块
              const SizedBox(height: 12),
              Container(
                width: 40,
                height: 5,
                decoration: BoxDecoration(
                  color: Colors.grey[300],
                  borderRadius: BorderRadius.circular(10),
                ),
              ),
              const SizedBox(height: 12),
              Padding(
                padding: const EdgeInsets.symmetric(horizontal: 16),
                child: Row(
                  children: [
                    const Text(
                      '社區活動列表',
                      style: TextStyle(
                        fontSize: 20,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                    const Spacer(),
                    IconButton(
                      icon: const Icon(Icons.close),
                      onPressed: () => Navigator.pop(context),
                    ),
                  ],
                ),
              ),
              Expanded(
                child: ListView(
                  children: [
                    Padding(
                      padding: const EdgeInsets.only(
                        top: 12.0,
                        right: 16,
                        left: 16,
                      ),
                      child: Align(
                        alignment: Alignment.centerRight,
                        child: ElevatedButton.icon(
                          onPressed: () {
                            Navigator.push(
                              context,
                              MaterialPageRoute(
                                builder:
                                    (context) => const ActivitySubmitPage(),
                              ),
                            );
                          },
                          icon: const Icon(Icons.add),
                          label: const Text('提交活動申請'),
                        ),
                      ),
                    ),
                    activityCard(
                      title: '🎉 社區春季市集',
                      time: '時間：2025/04/27（日）10:00 - 16:00',
                      location: '地點：中庭花園',
                      id: 1,
                    ),
                    activityCard(
                      title: '🎉 早晨瑜珈課程',
                      time: '每週六 07:00 - 08:00',
                      location: '地點：社區多功能教室',
                      id: 2,
                      canRegister: true,
                    ),
                    activityCard(
                      title: '🎉 二手書交換日',
                      time: '2025/05/05（六）13:00 - 17:00',
                      location: '地點：社區圖書區',
                      id: 3,
                      canRegister: true,
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}