import 'package:flutter/material.dart';
import 'package:moonwell_launcher/app/design_system/mw_primitives.dart';
import 'package:moonwell_launcher/app/design_system/mw_shells.dart';
import 'package:moonwell_launcher/app/theme/moonwell_design_system.dart';
import 'package:widgetbook_annotation/widgetbook_annotation.dart' as widgetbook;

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

  @override
  Widget build(BuildContext context) {
    final tokens = MoonWellDesignTokens.of(context);
    final colors = <String, Color>{
      'Background': tokens.background,
      'Surface low': tokens.surfaceLow,
      'Surface': tokens.surface,
      'Surface high': tokens.surfaceHigh,
      'Accent': tokens.accent,
      'Accent muted': tokens.accentMuted,
      'Success': tokens.success,
      'Warning': tokens.warning,
      'Error': Theme.of(context).colorScheme.error,
    };
    return SingleChildScrollView(
      padding: const EdgeInsets.all(24),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            'Semantic colors',
            style: Theme.of(context).textTheme.titleLarge,
          ),
          const SizedBox(height: 12),
          Wrap(
            spacing: 12,
            runSpacing: 12,
            children: [
              for (final entry in colors.entries)
                SizedBox(
                  width: 144,
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Container(
                        height: 72,
                        decoration: BoxDecoration(
                          color: entry.value,
                          border: Border.all(color: Colors.white24),
                          borderRadius: BorderRadius.circular(8),
                        ),
                      ),
                      const SizedBox(height: 6),
                      Text(entry.key),
                      MwStatusText(
                        text:
                            '#${entry.value.toARGB32().toRadixString(16).substring(2).toUpperCase()}',
                        monospace: true,
                      ),
                    ],
                  ),
                ),
            ],
          ),
          const SizedBox(height: 32),
          Text('Typography', style: Theme.of(context).textTheme.titleLarge),
          const SizedBox(height: 12),
          Text(
            'MoonWell',
            style: TextStyle(
              fontFamily: tokens.brandFontFamily,
              fontSize: 32,
              letterSpacing: 2,
            ),
          ),
          Text(
            'Лунный колодец зовёт героев Нордскола',
            style: Theme.of(context).textTheme.headlineMedium,
          ),
          const Text('Интерфейс, формы, навигация и рабочие статусы'),
          MwStatusText(
            text: 'build a93fd1c2 · 12.4 MB/s · 00:01:42',
            monospace: true,
          ),
          const SizedBox(height: 32),
          Text(
            'Surfaces & radii',
            style: Theme.of(context).textTheme.titleLarge,
          ),
          const SizedBox(height: 12),
          const Row(
            children: [
              Expanded(
                child: MwPanel(level: MwPanelLevel.low, child: Text('Low')),
              ),
              SizedBox(width: 12),
              Expanded(child: MwPanel(child: Text('Regular'))),
              SizedBox(width: 12),
              Expanded(
                child: MwPanel(level: MwPanelLevel.high, child: Text('High')),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

@widgetbook.UseCase(
  name: 'default',
  type: FoundationsGallery,
  path: '[Foundations]',
)
Widget buildFoundationsGalleryUseCase(BuildContext context) {
  return const FoundationsGallery();
}

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

  @override
  Widget build(BuildContext context) {
    return Stack(
      fit: StackFit.expand,
      children: [
        Image.asset(
          'assets/background.png',
          package: 'moonwell_launcher',
          fit: BoxFit.cover,
        ),
        const DecoratedBox(
          decoration: BoxDecoration(
            gradient: LinearGradient(
              colors: [Color(0x22000000), Color(0xEE000000)],
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
            ),
          ),
        ),
        const Center(child: MwBrandMark(width: 240)),
      ],
    );
  }
}

@widgetbook.UseCase(name: 'default', type: ArtworkSlot, path: '[Foundations]')
Widget buildArtworkSlotUseCase(BuildContext context) {
  return const ArtworkSlot();
}