import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'screens/directorate_command_screen.dart';
import 'screens/school_principal_screen.dart';

void main() {
  runApp(const SaqelAdminApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'صَقِل - الإدارة المركزية والمدارس',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        brightness: Brightness.dark,
        scaffoldBackgroundColor: const Color(0xFF070B12),
        fontFamily: '-apple-system',
        fontFamilyFallback: const [
          'SF Pro Display',
          'SF Pro Text',
          'SF Arabic',
          'Geeza Pro',
          'Cairo',
          'system-ui',
        ],
        colorScheme: ColorScheme.fromSeed(
          seedColor: const Color(0xFF8B5CF6),
          brightness: Brightness.dark,
          surface: const Color(0xFF0F172A),
          primary: const Color(0xFF8B5CF6),
        ),
      ),
      builder: (context, child) {
        return Directionality(
          textDirection: TextDirection.rtl,
          child: child ?? const SizedBox(),
        );
      },
      home: const UnifiedSupervisorShell(),
    );
  }
}

/// Unified Shell allowing seamless switching between:
/// 1. School Principal / Field Supervisor View (تطبيق مدير المدرسة والمشرف)
/// 2. Directorate Commander View (لوحة القائد العام لمديرية الثقافة العسكرية)
class UnifiedSupervisorShell extends StatefulWidget {
  const UnifiedSupervisorShell({super.key});

  @override
  State<UnifiedSupervisorShell> createState() => _UnifiedSupervisorShellState();
}

class _UnifiedSupervisorShellState extends State<UnifiedSupervisorShell> {
  int _currentModeIndex = 0; // 0 = School Principal, 1 = Directorate Commander

  final List<Widget> _screens = const [
    SchoolPrincipalScreen(),
    DirectorateCommandScreen(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFF070B12),
      body: SafeArea(
        child: Column(
          children: [
            // Top Luxury Persona Switcher
            Container(
              padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 10),
              decoration: const BoxDecoration(
                color: Color(0xFF0E1626),
                border: Border(
                  bottom: BorderSide(color: Color(0xFF1E293B)),
                ),
              ),
              child: Row(
                children: [
                  Container(
                    width: 36,
                    height: 36,
                    decoration: BoxDecoration(
                      gradient: const LinearGradient(
                        colors: [Color(0xFF8B5CF6), Color(0xFF4F46E5)],
                        begin: Alignment.topLeft,
                        end: Alignment.bottomRight,
                      ),
                      borderRadius: BorderRadius.circular(10),
                    ),
                    child: const Center(
                      child: Text(
                        'ص',
                        style: TextStyle(
                          fontSize: 20,
                          fontWeight: FontWeight.w900,
                          color: Colors.white,
                        ),
                      ),
                    ),
                  ),
                  const SizedBox(width: 12),
                  const Expanded(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          'منظومة صَقِل الإشرافية والسيادية',
                          style: TextStyle(
                            fontSize: 13.5,
                            fontWeight: FontWeight.w800,
                            color: Colors.white,
                          ),
                        ),
                        Text(
                          'التبديل بين الصلاحيات التنفيذية والقيادية',
                          style: TextStyle(
                            fontSize: 11,
                            color: Color(0xFF94A3B8),
                          ),
                        ),
                      ],
                    ),
                  ),
                  // Segmented Switcher Pill
                  Container(
                    padding: const EdgeInsets.all(3),
                    decoration: BoxDecoration(
                      color: const Color(0xFF1E293B),
                      borderRadius: BorderRadius.circular(10),
                    ),
                    child: Row(
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        _buildModeTab(
                          index: 0,
                          title: 'مدير المدرسة / المشرف',
                          icon: CupertinoIcons.building_2_fill,
                        ),
                        _buildModeTab(
                          index: 1,
                          title: 'لوحة القائد الأعلى (43 مدرسة)',
                          icon: CupertinoIcons.shield_lefthalf_fill,
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),

            // Active View
            Expanded(
              child: IndexedStack(
                index: _currentModeIndex,
                children: _screens,
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildModeTab({
    required int index,
    required String title,
    required IconData icon,
  }) {
    final isSelected = _currentModeIndex == index;
    return GestureDetector(
      onTap: () => setState(() => _currentModeIndex = index),
      child: AnimatedContainer(
        duration: const Duration(milliseconds: 200),
        padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 7),
        decoration: BoxDecoration(
          color: isSelected ? const Color(0xFF8B5CF6) : Colors.transparent,
          borderRadius: BorderRadius.circular(8),
        ),
        child: Row(
          children: [
            Icon(
              icon,
              size: 14,
              color: isSelected ? Colors.white : const Color(0xFF94A3B8),
            ),
            const SizedBox(width: 6),
            Text(
              title,
              style: TextStyle(
                fontSize: 12,
                fontWeight: isSelected ? FontWeight.w700 : FontWeight.w500,
                color: isSelected ? Colors.white : const Color(0xFF94A3B8),
              ),
            ),
          ],
        ),
      ),
    );
  }
}