import 'dart:ui';

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

class GlassAppBar extends StatelessWidget implements PreferredSizeWidget {
  final String title;
  final String? subtitle;
  final List<Widget>? actions;
  final Widget? leading;
  final double height;
  final Color glassColor;
  final double blurSigma;
  final double borderOpacity;

  const GlassAppBar({
    super.key,
    required this.title,
    this.subtitle,
    this.actions,
    this.leading,
    this.height = 80,
    this.glassColor = const Color(0x22FFFFFF),
    this.blurSigma = 18,
    this.borderOpacity = 0.25,
  });

  @override
  Size get preferredSize => Size.fromHeight(height);

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

    return ClipRect(
      child: BackdropFilter(
        filter: ImageFilter.blur(sigmaX: blurSigma, sigmaY: blurSigma),
        child: Container(
          height: height,
          decoration: BoxDecoration(
            color: glassColor,
            border: Border(
              bottom: BorderSide(
                color: Colors.white.withOpacity(borderOpacity),
                width: 1,
              ),
            ),
          ),
          child: SafeArea(
            bottom: false,
            child: Padding(
              padding: const EdgeInsets.symmetric(horizontal: 16),
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  if (leading != null) ...[leading!, const SizedBox(width: 12)],
                  Expanded(
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        OutlinedText(
                          title,
                          style: theme.textTheme.headlineSmall!.copyWith(
                            fontWeight: FontWeight.w900,
                            letterSpacing: 0.8,
                            fontSize: 26,
                          ),
                          fillColor: Colors.white,
                          strokeColor: Colors.black,
                          strokeWidth: 2.5,
                        ),
                        if (subtitle != null) ...[
                          const SizedBox(height: 3),
                          OutlinedText(
                            subtitle!,
                            style: theme.textTheme.bodyMedium!.copyWith(
                              fontWeight: FontWeight.w600,
                              letterSpacing: 0.4,
                            ),
                            fillColor: Colors.white.withOpacity(0.95),
                            strokeColor: Colors.black,
                            strokeWidth: 1.5,
                          ),
                        ],
                      ],
                    ),
                  ),
                  if (actions != null)
                    Row(mainAxisSize: MainAxisSize.min, children: actions!),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

/// Ein Icon-Button im Glas-Stil, passend zur GlassAppBar.
class GlassIconButton extends StatelessWidget {
  final IconData icon;
  final VoidCallback? onPressed;
  final String? tooltip;
  final Color? color;

  const GlassIconButton({
    super.key,
    required this.icon,
    this.onPressed,
    this.tooltip,
    this.color,
  });

  @override
  Widget build(BuildContext context) {
    final iconColor =
        color ?? Theme.of(context).colorScheme.onSurface.withOpacity(0.85);
    return Tooltip(
      message: tooltip ?? '',
      child: InkWell(
        onTap: onPressed,
        borderRadius: BorderRadius.circular(50),
        child: ClipRRect(
          borderRadius: BorderRadius.circular(50),
          child: BackdropFilter(
            filter: ImageFilter.blur(sigmaX: 8, sigmaY: 8),
            child: Container(
              padding: const EdgeInsets.all(10),
              decoration: BoxDecoration(
                color: Colors.white.withOpacity(0.12),
                shape: BoxShape.circle,
                border: Border.all(color: Colors.white.withOpacity(0.25)),
              ),
              child: Icon(icon, color: iconColor, size: 22),
            ),
          ),
        ),
      ),
    );
  }
}