import 'package:flutter/material.dart';
import 'login_page.dart';
import 'edit_profile.dart';
import 'feedback.dart';
import 'reapair.dart';
import 'visitor.dart';
import 'package.dart';
import 'bill.dart';

class PersonalPage extends StatelessWidget {
  const PersonalPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFFF7F8FA),
      appBar: AppBar(
        backgroundColor: const Color(0xFF9EAF9F),
        title: const Text(
          '我的社區',
          style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
        ),
        centerTitle: true,
        leading: IconButton(
          icon: Image.asset('assets/icons/back.png', width: 24, height: 24),
          onPressed: () {
            Navigator.of(context).pop();
          },
        ),
        actions: [
          IconButton(
            icon: Image.asset(
              'assets/icons/notification.png',
              width: 24,
              height: 24,
            ),
            onPressed: () {
              // TODO: 通知按鈕事件
            },
          ),
          IconButton(
            icon: Image.asset('assets/icons/qr.png', width: 24, height: 24),
            onPressed: () {
              // TODO: QR碼按鈕事件
            },
          ),
        ],
      ),
      body: ListView(
        padding: const EdgeInsets.all(16),
        children: [
          _buildProfileSection(context),
          const SizedBox(height: 10),
          _buildCommunityInfoSection(context),
          const SizedBox(height: 10),
          _buildQuickMenu(context),
          const SizedBox(height: 10),
          _buildNotificationsSection(),
          const SizedBox(height: 30),
          _buildLogoutButton(context),
          const SizedBox(height: 60),
        ],
      ),
    );
  }

  Widget _buildProfileSection(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(16),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(12),
      ),
      child: Row(
        children: [
          GestureDetector(
            onTap: () {
              // TODO: 點擊頭像事件
            },
            child: const CircleAvatar(
              radius: 30,
              backgroundImage: AssetImage('assets/images/avatar.png'),
            ),
          ),
          const SizedBox(width: 16),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: const [
                Text(
                  '林小安',
                  style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
                ),
                SizedBox(height: 4),
                Text(
                  '住戶編號：B205',
                  style: TextStyle(fontSize: 14, color: Colors.grey),
                ),
                Text(
                  '社區：綠光花園',
                  style: TextStyle(fontSize: 14, color: Colors.grey),
                ),
              ],
            ),
          ),
          TextButton(
            onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => const EditProfilePage(),
                ),
              );
            },
            style: TextButton.styleFrom(
              padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 4),
              backgroundColor: Colors.white,
              side: const BorderSide(color: Colors.green),
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(20),
              ),
            ),
            child: const Text(
              '✏️ 修改',
              style: TextStyle(fontSize: 13, color: Colors.green),
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildCommunityInfoSection(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(16),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(12),
      ),
      child: Stack(
        children: [
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: const [
              Text('社區地址：新北市板橋區幸福路 88 號', style: TextStyle(fontSize: 14)),
              SizedBox(height: 6),
              Text('管理室電話：02-2233-4455', style: TextStyle(fontSize: 14)),
              SizedBox(height: 6),
              Text(
                '管委會 Email：service@garden-community.tw',
                style: TextStyle(fontSize: 14),
              ),
            ],
          ),
          Positioned(
            top: 0,
            right: 0,
            child: OutlinedButton(
              onPressed: () {
                // TODO: 意見箱按鈕
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => const FeedbackPage()),
                );
              },
              style: OutlinedButton.styleFrom(
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(20),
                ),
                side: const BorderSide(color: Colors.grey),
                padding: const EdgeInsets.symmetric(
                  horizontal: 14,
                  vertical: 6,
                ),
              ),
              child: const Text('📝 意見箱', style: TextStyle(fontSize: 13)),
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildQuickMenu(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(16),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(12),
      ),
      child: GridView.count(
        shrinkWrap: true,
        crossAxisCount: 4,
        crossAxisSpacing: 12,
        mainAxisSpacing: 12,
        physics: const NeverScrollableScrollPhysics(),
        children: [
          _buildMenuItem('繳費通知', 'receipt.png', () {
            showModalBottomSheet(
              context: context,
              isScrollControlled: true,
              backgroundColor: Colors.transparent,
              builder: (_) => BillPageWrapper(),
            );
          }),
          _buildMenuItem('報修申請', 'repair.png', () {
            showModalBottomSheet(
              context: context,
              isScrollControlled: true,
              backgroundColor: Colors.transparent,
              builder: (_) => const RepairPageWrapper(),
            );
          }),
          _buildMenuItem('包裹通知', 'package.png', () {
            showModalBottomSheet(
              context: context,
              isScrollControlled: true,
              backgroundColor: Colors.transparent,
              builder: (context) => PackagePageWrapper(),
            );
          }),
          _buildMenuItem('訪客', 'visitor.png', () {
            showModalBottomSheet(
              context: context,
              isScrollControlled: true,
              backgroundColor: Colors.transparent,
              builder: (context) => const VisitorPageWrapper(),
            );
          }),
        ],
      ),
    );
  }

  Widget _buildMenuItem(
    String label,
    String iconAssetName,
    VoidCallback onTap,
  ) {
    return GestureDetector(
      onTap: onTap,
      child: Container(
        decoration: BoxDecoration(
          color: const Color(0xFFF1F1F1),
          borderRadius: BorderRadius.circular(8),
        ),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            GestureDetector(
              onTap: onTap,
              child: Image.asset(
                'assets/icons/$iconAssetName',
                width: 28,
                height: 28,
              ),
            ),
            const SizedBox(height: 6),
            Text(label, style: const TextStyle(fontSize: 12)),
          ],
        ),
      ),
    );
  }

  Widget _buildNotificationsSection() {
    return Container(
      padding: const EdgeInsets.all(16),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(12),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: const [
          Text('📢 最新通知', style: TextStyle(fontSize: 16)),
          SizedBox(height: 10),
          Divider(),
          Text('水塔清洗公告（4/18 上午停水）', style: TextStyle(fontSize: 14)),
          Divider(),
          Text('您有 1 件包裹尚未領取', style: TextStyle(fontSize: 14)),
          Divider(),
          Text('電梯定期保養預告（4/20）', style: TextStyle(fontSize: 14)),
        ],
      ),
    );
  }

  Widget _buildLogoutButton(BuildContext context) {
    return Center(
      child: ElevatedButton.icon(
        onPressed: () {
          Navigator.pushReplacement(
            context,
            MaterialPageRoute(builder: (context) => const LoginPage()),
          );
        },
        style: ElevatedButton.styleFrom(
          backgroundColor: const Color(0xFFF08080),
          padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 12),
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(24),
          ),
          shadowColor: Colors.black,
          elevation: 6,
        ),
        /*icon: GestureDetector(
          onTap: () {},
          child: Image.asset('assets/icons/logout.png', width: 18, height: 18),
        ),*/
        label: const Text(
          '登出',
          style: TextStyle(fontSize: 16, color: Colors.white),
        ),
      ),
    );
  }
}