import 'package:flutter/material.dart';
import 'gradient_star_badge.dart';

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

  static void show(BuildContext context) {
    showModalBottomSheet(
      context: context,
      isScrollControlled: true,
      backgroundColor: Colors.transparent,
      builder: (context) => const CleromancyGuideDialog(),
    );
  }

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    final isDark = theme.brightness == Brightness.dark;

    return Container(
      padding: const EdgeInsets.only(top: 12),
      decoration: BoxDecoration(
        color: isDark ? const Color(0xFF151728) : theme.colorScheme.surface,
        borderRadius: const BorderRadius.vertical(top: Radius.circular(28)),
        border: Border.all(
          color: const Color(0xFFFFD54F).withValues(alpha: 0.35),
          width: 1.2,
        ),
      ),
      child: SafeArea(
        child: SingleChildScrollView(
          padding: const EdgeInsets.fromLTRB(20, 8, 20, 24),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              // Top drag indicator
              Center(
                child: Container(
                  width: 44,
                  height: 4,
                  decoration: BoxDecoration(
                    color: const Color(0xFFFFD54F).withValues(alpha: 0.5),
                    borderRadius: BorderRadius.circular(2),
                  ),
                ),
              ),

              const SizedBox(height: 16),

              // Title Header
              Row(
                children: [
                  const GradientStar(size: 26),
                  const SizedBox(width: 10),
                  Expanded(
                    child: Text(
                      'Клеромантия и Жребий 999',
                      style: theme.textTheme.titleLarge?.copyWith(
                        fontWeight: FontWeight.w900,
                        letterSpacing: 0.5,
                        color: isDark ? const Color(0xFFFFF9C4) : const Color(0xFF1E2138),
                      ),
                    ),
                  ),
                ],
              ),

              const SizedBox(height: 14),

              // Introduction
              _buildSection(
                icon: Icons.auto_awesome,
                title: 'Что такое Клеромантия?',
                content:
                    'Клеромантия (от греч. *klēros* — жребий, *manteia* — гадание) — древнейшая священная практика вопрошания Неведомого через случайное выпадение знаков. '
                    'В системе «Оракул 999» случайность не случайна: она служит мостом между вашим глубинным подсознанием и полем синхронистичности.',
                isDark: isDark,
              ),

              const SizedBox(height: 12),

              // D10 Dice Rule
              _buildSection(
                icon: Icons.casino_rounded,
                title: 'Правило трёх бросков кубика d10 (0..9)',
                content:
                    'В основе оракула заложена 10-ричная матрица из 1000 ячеек (от #000 до #999). '
                    'Каждое число формируется строго из **3 последовательных бросков десятигранного кубика (d10)** со значениями граней от 0 до 9:\n\n'
                    '🎲 **1-й бросок (Сотни)**: первая цифра числа (0..9);\n'
                    '🎲 **2-й бросок (Десятки)**: вторая цифра числа (0..9);\n'
                    '🎲 **3-й бросок (Единицы)**: третья цифра числа (0..9).\n\n'
                    '👉 *Пример:* броски 7, затем 4, затем 2 дают сакральный номер **#742**.',
                isDark: isDark,
              ),

              const SizedBox(height: 12),

              // How to use physically and digitally
              _buildSection(
                icon: Icons.touch_app_rounded,
                title: 'Как совершать гадание?',
                content:
                    '1. **С физическими кубиками:**\n'
                    'Возьмите кубик d10 (или три кубика разных цветов), бросьте их и наберите выпавшую комбинацию из 3 цифр на экранной панели.\n\n'
                    '2. **С виртуальным жребием в приложении:**\n'
                    'Нажмите кнопку «Бросить жребий d10». Встроенный генератор вероятностей последовательно совершит 3 броска, показав каждую выпавшую грань.\n\n'
                    '3. **Формулировка вопроса:**\n'
                    'Перед броском зафиксируйте вопрос в поле ввода — это свяжет ваш смысловой контекст со знаком при AI-трактовке.',
                isDark: isDark,
              ),

              const SizedBox(height: 18),

              // Close Button
              SizedBox(
                width: double.infinity,
                child: FilledButton.icon(
                  onPressed: () => Navigator.pop(context),
                  icon: const Icon(Icons.check_rounded),
                  label: const Text(
                    'ПОНЯТНО, ВЕРНУТЬСЯ К ОРАКУЛУ',
                    style: TextStyle(fontWeight: FontWeight.bold),
                  ),
                  style: FilledButton.styleFrom(
                    backgroundColor: const Color(0xFF2A2D4A),
                    foregroundColor: const Color(0xFFFFF9C4),
                    padding: const EdgeInsets.symmetric(vertical: 14),
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(16),
                      side: const BorderSide(
                        color: Color(0xFFFFD54F),
                        width: 1.2,
                      ),
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildSection({
    required IconData icon,
    required String title,
    required String content,
    required bool isDark,
  }) {
    return Container(
      padding: const EdgeInsets.all(14),
      decoration: BoxDecoration(
        color: isDark ? const Color(0xFF1B1E32) : const Color(0xFFF4F5FB),
        borderRadius: BorderRadius.circular(16),
        border: Border.all(
          color: const Color(0xFFFFD54F).withValues(alpha: 0.2),
        ),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            children: [
              Icon(icon, size: 18, color: const Color(0xFFFFD54F)),
              const SizedBox(width: 8),
              Expanded(
                child: Text(
                  title,
                  style: const TextStyle(
                    fontSize: 14,
                    fontWeight: FontWeight.bold,
                    color: Color(0xFFFFD54F),
                  ),
                ),
              ),
            ],
          ),
          const SizedBox(height: 8),
          Text(
            content,
            style: TextStyle(
              fontSize: 13,
              height: 1.45,
              color: isDark ? const Color(0xFFE2E4F0) : const Color(0xFF2C3042),
            ),
          ),
        ],
      ),
    );
  }
}