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

import '../i18n/strings.g.dart';
import 'app_drawer.dart';
import 'seed_glyph.dart';
import 'theme.dart';

/// The main menu (mockup 02): a sprout logo over a faint seed-glyph watermark,
/// with the big "open market" (Block 2, coming soon) and "your inventory"
/// destinations. The hamburger opens [AppDrawer].
class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    final t = context.t;
    return Scaffold(
      appBar: AppBar(title: Text(t.app.title)),
      drawer: const AppDrawer(),
      body: Stack(
        children: [
          const Positioned.fill(child: _SeedWatermark()),
          Center(
            child: ConstrainedBox(
              constraints: const BoxConstraints(maxWidth: 440),
              child: Padding(
                padding: const EdgeInsets.all(24),
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: [
                    Image.asset(
                      'assets/logo.png',
                      height: 140,
                      fit: BoxFit.contain,
                    ),
                    const SizedBox(height: 40),
                    _MenuButton(
                      icon: const SeedGlyph(
                        SeedGlyphs.share,
                        size: 26,
                        color: Colors.white,
                      ),
                      label: t.home.openMarket,
                      tag: t.common.comingSoon,
                      onTap: null,
                    ),
                    const SizedBox(height: 16),
                    _MenuButton(
                      key: const Key('home.inventory'),
                      icon: const Icon(Icons.list, color: Colors.white),
                      label: t.home.yourInventory,
                      onTap: () => context.go('/inventory'),
                    ),
                  ],
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

class _MenuButton extends StatelessWidget {
  const _MenuButton({
    required this.icon,
    required this.label,
    this.onTap,
    this.tag,
    super.key,
  });

  final Widget icon;
  final String label;
  final VoidCallback? onTap;
  final String? tag;

  @override
  Widget build(BuildContext context) {
    final enabled = onTap != null;
    return Material(
      color: enabled ? seedGreen : seedGreen.withValues(alpha: 0.45),
      borderRadius: BorderRadius.circular(10),
      child: InkWell(
        onTap: onTap,
        borderRadius: BorderRadius.circular(10),
        child: Padding(
          padding: const EdgeInsets.symmetric(vertical: 20, horizontal: 20),
          child: Row(
            children: [
              icon,
              const SizedBox(width: 16),
              Expanded(
                child: Text(
                  label,
                  style: const TextStyle(
                    color: Colors.white,
                    fontSize: 20,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
              if (tag != null)
                Text(
                  tag!,
                  style: const TextStyle(color: Colors.white70, fontSize: 12),
                ),
            ],
          ),
        ),
      ),
    );
  }
}

/// A faint scatter of seed pictograms behind the menu (like mockup 02).
class _SeedWatermark extends StatelessWidget {
  const _SeedWatermark();

  static const _glyphs = [
    SeedGlyphs.jars,
    SeedGlyphs.envelope,
    SeedGlyphs.bigSpoon,
    SeedGlyphs.jar,
    SeedGlyphs.sack,
    SeedGlyphs.scattered,
    SeedGlyphs.mug,
    SeedGlyphs.smallSpoon,
  ];

  @override
  Widget build(BuildContext context) {
    return IgnorePointer(
      child: Opacity(
        opacity: 0.06,
        child: Align(
          alignment: Alignment.bottomCenter,
          child: Padding(
            padding: const EdgeInsets.only(bottom: 24),
            child: Wrap(
              spacing: 28,
              runSpacing: 18,
              alignment: WrapAlignment.center,
              children: [
                for (final g in _glyphs)
                  SeedGlyph(g, size: 64, color: seedGreenDark),
              ],
            ),
          ),
        ),
      ),
    );
  }
}