import 'package:flutter/material.dart';
import 'package:onsolgo/core/constants.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      appBar: AppBar(
        backgroundColor: Colors.black,
        elevation: 0,
        title: const Text("ORDER TIERS", style: TextStyle(letterSpacing: 3, fontSize: 14)),
        centerTitle: true,
      ),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(24),
        child: Column(
          children: [
            const Text("CHOOSE YOUR STATUS",
                style: TextStyle(color: kOnsolGold, fontSize: 22, fontWeight: FontWeight.bold, letterSpacing: 4)),
            const SizedBox(height: 30),

            _buildTierCard(
              context,
              name: "READER",
              price: "FREE",
              color: Colors.grey,
              features: [
                "Read current ManaA issues",
                "Engage with Our Artists on the Social Feed",
                "Shop the Merch Vault",
                "Unlock Citizen Milestones",
              ],
              limitations: ["Standard Access (With Ads)", "Viewing only (No social posting)"],
            ),
            const SizedBox(height: 20),
            _buildTierCard(
              context,
              name: "OGO+",
              price: "\$2.99 / mo",
              color: Colors.amber,
              features: [
                "Ad-Free Access to ManaA issues",
                "Post to the Social Feed: A Voice in the Community",
                "Download your Favorite Chapters for Offline Reading",

              ],
            ),
            const SizedBox(height: 20),
            _buildTierCard(
              context,
              name: "OGO+ MAX",
              price: "\$4.99 / mo",
              color: kOnsolGold,
              features: [
                "Everything in OGO+ tier",
                "The Archive (Access to back issues)",
                "Exclusive Video Content",
              ],
            ),
            const SizedBox(height: 40),
          ],
        ),
      ),
    );
  }

  Widget _buildTierCard(BuildContext context, {
    required String name, required String price, required Color color,
    required List<String> features, List<String> limitations = const [],
  }) {
    return Container(
      width: double.infinity,
      decoration: BoxDecoration(
        color: Colors.grey[900],
        borderRadius: BorderRadius.circular(15),
        border: Border.all(color: color.withValues(alpha: 0.4), width: 1),
      ),
      padding: const EdgeInsets.all(20),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text(name, style: TextStyle(color: color, fontWeight: FontWeight.bold, fontSize: 20, letterSpacing: 2)),
              Text(price, style: const TextStyle(color: Colors.white, fontWeight: FontWeight.bold)),
            ],
          ),
          const Divider(color: Colors.white10, height: 30),
          ...features.map((f) => Padding(
            padding: const EdgeInsets.only(bottom: 10),
            child: Row(children: [
              Icon(Icons.check_circle, color: color, size: 16),
              const SizedBox(width: 10),
              Expanded(child: Text(f, style: const TextStyle(fontSize: 12, color: Colors.white70))),
            ]),
          )),
          ...limitations.map((l) => Padding(
            padding: const EdgeInsets.only(bottom: 10),
            child: Row(children: [
              const Icon(Icons.info_outline, color: Colors.white24, size: 16),
              const SizedBox(width: 10),
              Expanded(child: Text(l, style: const TextStyle(fontSize: 12, color: Colors.white24))),
            ]),
          )),
        ],
      ),
    );
  }
}