import 'package:flutter/material.dart';

import '../tema/pluriwave_theme.dart';
import 'pluri_glass_surface.dart';
import 'pluri_icon.dart';

class PluriScreenHeader extends StatelessWidget {
  const PluriScreenHeader({
    super.key,
    required this.title,
    required this.subtitle,
    required this.glyph,
    this.primaryActionLabel,
    this.onPrimaryAction,
    this.trailing,
  });

  final String title;
  final String subtitle;
  final PluriIconGlyph glyph;
  final String? primaryActionLabel;
  final VoidCallback? onPrimaryAction;
  final Widget? trailing;

  @override
  Widget build(BuildContext context) {
    final t = context.pluriTokens;
    final theme = Theme.of(context);
    return Padding(
      padding: EdgeInsets.fromLTRB(t.spacingMd, t.spacingSm, t.spacingMd, t.spacingSm),
      child: PluriGlassSurface(
        borderRadius: BorderRadius.circular(t.radiusLg + 8),
        padding: const EdgeInsets.all(18),
        child: Stack(
          children: [
            Positioned(
              right: -36,
              top: -42,
              child: _Orb(color: t.electricMagenta.withValues(alpha: 0.38), size: 128),
            ),
            Positioned(
              right: 10,
              top: 10,
              child: Opacity(
                opacity: 0.18,
                child: Image.asset(
                  'assets/icons/pluriwave_app_mark.png',
                  width: 120,
                  height: 120,
                  errorBuilder: (_, __, ___) => const SizedBox.shrink(),
                ),
              ),
            ),
            Positioned(
              right: 44,
              bottom: -54,
              child: _Orb(color: const Color(0xFF20E6FF).withValues(alpha: 0.22), size: 116),
            ),
            Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Container(
                  width: 56,
                  height: 56,
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    gradient: LinearGradient(
                      colors: [
                        const Color(0xFF20E6FF).withValues(alpha: 0.95),
                        t.electricMagenta,
                        t.warmCoral,
                      ],
                    ),
                    boxShadow: [
                      BoxShadow(color: t.glowColor, blurRadius: 28, spreadRadius: 2),
                    ],
                  ),
                  child: Center(
                    child: PluriIcon(glyph: glyph, variant: PluriIconVariant.filled, size: 28),
                  ),
                ),
                const SizedBox(width: 14),
                Expanded(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        title,
                        style: theme.textTheme.headlineSmall?.copyWith(
                          fontWeight: FontWeight.w900,
                          letterSpacing: -0.7,
                          height: 1.02,
                        ),
                      ),
                      const SizedBox(height: 6),
                      Text(
                        subtitle,
                        style: theme.textTheme.bodyMedium?.copyWith(
                          color: theme.colorScheme.onSurface.withValues(alpha: 0.76),
                          height: 1.25,
                        ),
                      ),
                      if (primaryActionLabel != null) ...[
                        const SizedBox(height: 12),
                        FilledButton.tonalIcon(
                          onPressed: onPrimaryAction,
                          icon: const Icon(Icons.auto_awesome_rounded, size: 18),
                          label: Text(primaryActionLabel!),
                        ),
                      ],
                    ],
                  ),
                ),
                if (trailing != null) trailing!,
              ],
            ),
          ],
        ),
      ),
    );
  }
}

class PluriStatusPill extends StatelessWidget {
  const PluriStatusPill({
    super.key,
    required this.icon,
    required this.label,
    this.accent,
  });

  final IconData icon;
  final String label;
  final Color? accent;

  @override
  Widget build(BuildContext context) {
    final t = context.pluriTokens;
    final color = accent ?? t.electricMagenta;
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(999),
        color: color.withValues(alpha: 0.13),
        border: Border.all(color: color.withValues(alpha: 0.38)),
      ),
      child: Row(
        mainAxisSize: MainAxisSize.min,
        children: [
          Icon(icon, size: 16, color: color),
          const SizedBox(width: 7),
          Text(label, style: Theme.of(context).textTheme.labelMedium?.copyWith(fontWeight: FontWeight.w800)),
        ],
      ),
    );
  }
}

class PluriEmptyState extends StatelessWidget {
  const PluriEmptyState({
    super.key,
    required this.glyph,
    required this.title,
    required this.subtitle,
  });

  final PluriIconGlyph glyph;
  final String title;
  final String subtitle;

  @override
  Widget build(BuildContext context) {
    final t = context.pluriTokens;
    final theme = Theme.of(context);
    return Center(
      child: Padding(
        padding: const EdgeInsets.all(24),
        child: PluriGlassSurface(
          borderRadius: BorderRadius.circular(t.radiusLg + 10),
          padding: const EdgeInsets.all(28),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              PluriIcon(glyph: glyph, variant: PluriIconVariant.activeGlow, size: 58),
              const SizedBox(height: 18),
              Text(title, textAlign: TextAlign.center, style: theme.textTheme.titleLarge?.copyWith(fontWeight: FontWeight.w900)),
              const SizedBox(height: 8),
              Text(
                subtitle,
                textAlign: TextAlign.center,
                style: theme.textTheme.bodyMedium?.copyWith(color: theme.colorScheme.onSurface.withValues(alpha: 0.72)),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class _Orb extends StatelessWidget {
  const _Orb({required this.color, required this.size});

  final Color color;
  final double size;

  @override
  Widget build(BuildContext context) {
    return IgnorePointer(
      child: Container(
        width: size,
        height: size,
        decoration: BoxDecoration(
          shape: BoxShape.circle,
          gradient: RadialGradient(colors: [color, color.withValues(alpha: 0)]),
        ),
      ),
    );
  }
}
