import 'package:flutter/material.dart';
import '../utils/farb_theme.dart';

class MeloHeader extends StatelessWidget {
  final VoidCallback onDownload;
  final VoidCallback onSearch;
  final VoidCallback? onServer;
  final VoidCallback? onSettings;

  const MeloHeader({super.key, required this.onDownload, required this.onSearch, this.onServer, this.onSettings});

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.fromLTRB(20, 12, 20, 4),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  ShaderMask(
                    shaderCallback: (bounds) => const LinearGradient(
                      colors: [Colors.white, MeloTheme.rot],
                    ).createShader(bounds),
                    child: const Text('Melo', style: TextStyle(
                      fontSize: 28, fontWeight: FontWeight.w700, color: Colors.white)),
                  ),
                  const Text('Deine Musik. Deine Art.', style: TextStyle(fontSize: 12, color: MeloTheme.textSekundaer)),
                ],
              ),
              Row(children: [
                if (onServer != null) ...[
                  _btn(Icons.cloud, onServer!),
                  const SizedBox(width: 8),
                ],
                _btn(Icons.download, onDownload),
                const SizedBox(width: 8),
                _btn(Icons.search, onSearch),
                if (onSettings != null) ...[
                  const SizedBox(width: 8),
                  _btn(Icons.settings, onSettings!),
                ],
              ]),
            ],
          ),
          const SizedBox(height: 8),
          // Suchleiste – immer sichtbar
          TextField(
            onSubmitted: (wert) {
              if (wert.isNotEmpty) onSearch();
            },
            style: const TextStyle(color: Colors.white, fontSize: 14),
            decoration: InputDecoration(
              hintText: '🔍 Song, Künstler oder Tag suchen...',
              hintStyle: TextStyle(color: Colors.grey.shade600, fontSize: 13),
              prefixIcon: Icon(Icons.search, size: 18, color: MeloTheme.rot.withValues(alpha: 0.6)),
              filled: true,
              fillColor: MeloTheme.dunkel1,
              border: OutlineInputBorder(
                borderRadius: BorderRadius.circular(12),
                borderSide: BorderSide.none,
              ),
              contentPadding: const EdgeInsets.symmetric(vertical: 10, horizontal: 12),
            ),
          ),
        ],
      ),
    );
  }

  Widget _btn(IconData icon, VoidCallback onTap) {
    return Container(
      width: 40, height: 40,
      decoration: BoxDecoration(
        color: MeloTheme.dunkel1,
        borderRadius: BorderRadius.circular(12),
      ),
      child: IconButton(
        icon: Icon(icon, size: 18, color: MeloTheme.rot),
        onPressed: onTap,
      ),
    );
  }
}