import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:gap/gap.dart';
import 'package:minecraft_server_installer/main/constants.dart';
import 'package:package_info_plus/package_info_plus.dart';

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

  @override
  Widget build(BuildContext context) => SizedBox(
        width: 460,
        child: Column(
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Image.asset('assets/img/mcsi_logo.png', width: 100, height: 100),
                Column(
                  mainAxisSize: MainAxisSize.min,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      Constants.appName,
                      style: Theme.of(context)
                          .textTheme
                          .headlineMedium
                          ?.copyWith(fontWeight: FontWeight.w900, color: Colors.blueGrey.shade900),
                    ),
                    FutureBuilder(
                      future: PackageInfo.fromPlatform(),
                      builder: (context, snapshot) => Text(
                        'Version ${snapshot.data?.version ?? ''}',
                        style: Theme.of(context).textTheme.bodyMedium?.copyWith(color: Colors.grey.shade700),
                      ),
                    ),
                  ],
                ),
              ],
            ),
            const Gap(32),
            Container(
              padding: const EdgeInsets.symmetric(vertical: 16, horizontal: 24),
              decoration: BoxDecoration(
                color: Colors.blueGrey.shade50,
                borderRadius: BorderRadius.circular(8),
                border: Border(left: BorderSide(color: Colors.blueGrey.shade300, width: 6)),
              ),
              child: Row(
                children: [
                  Padding(
                    padding: const EdgeInsets.only(bottom: 8),
                    child: Icon(Icons.format_quote_rounded, color: Colors.grey.shade700),
                  ),
                  const Gap(8),
                  Text(
                    '讓 Minecraft 伺服器安裝變得更簡單！',
                    style: Theme.of(context).textTheme.bodyLarge?.copyWith(
                          fontWeight: FontWeight.w500,
                          color: Colors.grey.shade700,
                        ),
                  ),
                ],
              ),
            ),
            const Gap(32),
            Row(
              children: [
                _actionButton(text: '教學影片', svgAssetName: 'assets/svg/youtube.svg'),
                const Gap(12),
                _actionButton(text: '問題回報', svgAssetName: 'assets/svg/bug.svg'),
                const Gap(12),
                _actionButton(text: '聯絡作者', svgAssetName: 'assets/svg/send.svg'),
                const Gap(12),
                _actionButton(text: '原始碼', svgAssetName: 'assets/svg/github.svg'),
              ],
            ),
            const Spacer(),
            Text(
              'Copyright © 2025 SquidSpirit',
              style: Theme.of(context).textTheme.bodyMedium?.copyWith(color: Colors.grey.shade700),
            ),
          ],
        ),
      );

  Widget _actionButton({
    required String text,
    required String svgAssetName,
  }) =>
      Builder(
        builder: (context) => Expanded(
          child: Material(
            color: Colors.transparent,
            borderRadius: BorderRadius.circular(8),
            child: Ink(
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(8),
                border: Border.all(color: Colors.blueGrey.shade50, width: 2),
              ),
              child: InkWell(
                onTap: () {},
                borderRadius: BorderRadius.circular(8),
                child: Padding(
                  padding: const EdgeInsets.symmetric(vertical: 32, horizontal: 16),
                  child: Column(
                    children: [
                      SvgPicture.asset(
                        svgAssetName,
                        width: 32,
                        height: 32,
                        colorFilter: ColorFilter.mode(Colors.grey.shade800, BlendMode.srcIn),
                      ),
                      const Gap(12),
                      Text(
                        text,
                        style: Theme.of(context).textTheme.bodyMedium?.copyWith(
                              fontWeight: FontWeight.w500,
                              color: Colors.grey.shade700,
                            ),
                      ),
                    ],
                  ),
                ),
              ),
            ),
          ),
        ),
      );
}