import 'package:flutter/material.dart';
import '../widgets/app_background.dart';
import '../widgets/settings_bar.dart';

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

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: AppBackground(
          child: Column(
            children: [
              /// -------------------- SETTINGS BAR --------------------
              SettingsBar(
                selectedIndex: 0,
                onTap: (_) {},
                showBackButton: true,
                onBackTap: () => Navigator.pop(context),
                iconPaths: const [],
              ),

              const SizedBox(height: 12),

              /// -------------------- CONTENT --------------------
              Expanded(
                child: Directionality(
                  textDirection: TextDirection.rtl,
                  child: Column(
                    children: [
                      /// Title
                      Padding(
                        padding: const EdgeInsets.only(right: 40),
                        child: Align(
                          alignment: Alignment.topRight,
                          child: const Text(
                            "الأشعارات",
                            style: TextStyle(
                              fontSize: 26,
                              color: Colors.white,
                              fontWeight: FontWeight.bold,
                            ),
                          ),
                        ),
                      ),

                      const SizedBox(height: 20),

                      /// -------------------- NOTIFICATION CARD --------------------
                      Padding(
                        padding: const EdgeInsets.symmetric(horizontal: 22),
                        child: Container(
                          padding: const EdgeInsets.all(18),
                          decoration: BoxDecoration(
                            color: const Color(0xFFEFFFFA),
                            borderRadius: BorderRadius.circular(20),
                            boxShadow: const [
                              BoxShadow(
                                color: Colors.black26,
                                blurRadius: 12,
                                offset: Offset(0, 6),
                              ),
                            ],
                          ),
                          child: Stack(
                            children: [
                              /// ✅ DATE — TOP LEFT
                              const Positioned(
                                top: 0,
                                left: 0,
                                child: Text(
                                  "2025.12.1",
                                  style: TextStyle(
                                    fontSize: 12,
                                    color: Color(0x9E000000),
                                    fontWeight: FontWeight.w900,
                                  ),
                                ),
                              ),

                              /// ✅ MAIN CONTENT — RTL
                              Align(
                                alignment: Alignment.centerRight,
                                child: Column(
                                  crossAxisAlignment: CrossAxisAlignment.end,
                                  mainAxisSize: MainAxisSize.min,
                                  children: [
                                    const Text(
                                      "عنوان الاشعار",
                                      style: TextStyle(
                                        fontSize: 22,
                                        fontWeight: FontWeight.bold,
                                        color: Colors.black,
                                      ),
                                    ),

                                    // const SizedBox(height: 6),

                                    /// ✅ DETAILS WITH GREEN LINE
                                    Row(
                                      mainAxisSize: MainAxisSize.min,
                                      children: [
                                        // Green line
                                        Container(
                                          width: 20,
                                          height: 2,
                                          color: Color(0xFF025A42),
                                        ),

                                        SizedBox(width: 8),

                                        Text(
                                          "تفاصيل الاشعار",
                                          style: TextStyle(
                                            fontSize: 16,
                                            color: Colors.black87,
                                          ),
                                        ),
                                      ],
                                    ),
                                  ],
                                ),
                              ),
                            ],
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}