import 'package:flutter/material.dart';

import '../../../../common/theme/theme.dart';
import '../../../components/spacer/spacer.dart';

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

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 280,
      decoration: BoxDecoration(
        gradient: LinearGradient(
          colors: [
            AppColor.primary,
            AppColor.primaryLight,
            AppColor.primaryLight.withOpacity(0.8),
          ],
          begin: Alignment.topLeft,
          end: Alignment.bottomRight,
          stops: const [0.0, 0.7, 1.0],
        ),
        boxShadow: [
          BoxShadow(
            color: AppColor.primary.withOpacity(0.3),
            blurRadius: 20,
            offset: const Offset(0, 10),
          ),
        ],
      ),
      child: Stack(
        children: [
          // Decorative circles
          Positioned(
            top: -50,
            right: -50,
            child: Container(
              width: 150,
              height: 150,
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                color: AppColor.white.withOpacity(0.1),
              ),
            ),
          ),
          Positioned(
            top: 80,
            right: -20,
            child: Container(
              width: 80,
              height: 80,
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                color: AppColor.white.withOpacity(0.05),
              ),
            ),
          ),
          SafeArea(child: _buildContent()),
        ],
      ),
    );
  }

  Padding _buildContent() {
    return Padding(
      padding: EdgeInsets.all(AppValue.padding),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisSize: MainAxisSize.min,
        children: [
          // Top bar
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      'AppSkel POS Owner',
                      style: AppStyle.lg.copyWith(
                        color: AppColor.white.withOpacity(0.9),
                        fontWeight: FontWeight.w600,
                        letterSpacing: 0.3,
                      ),
                    ),
                    const SpaceHeight(2),
                    Text(
                      'Dashboard',
                      style: AppStyle.sm.copyWith(
                        color: AppColor.textLight,
                        fontSize: 11,
                        fontWeight: FontWeight.w400,
                      ),
                    ),
                  ],
                ),
              ),
              Container(
                padding: const EdgeInsets.all(10),
                decoration: BoxDecoration(
                  color: AppColor.white.withOpacity(0.2),
                  borderRadius: BorderRadius.circular(14),
                  border: Border.all(
                    color: AppColor.white.withOpacity(0.3),
                    width: 1,
                  ),
                ),
                child: const Icon(
                  Icons.notifications_none_rounded,
                  color: AppColor.white,
                  size: 20,
                ),
              ),
            ],
          ),

          const SpaceHeight(24),

          // Greeting Section
          Text(
            'Selamat Pagi,',
            style: AppStyle.lg.copyWith(
              color: AppColor.white,
              fontWeight: FontWeight.w500,
            ),
          ),
          const SpaceHeight(2),
          Text(
            'Vira Vania! 👋',
            style: AppStyle.h4.copyWith(
              color: AppColor.white,
              fontWeight: FontWeight.w800,
              letterSpacing: -0.5,
            ),
          ),
          const SpaceHeight(8),
          Text(
            'Mari tingkatkan performa bisnis Anda hari ini',
            style: AppStyle.md.copyWith(
              color: AppColor.white.withOpacity(0.85),
              fontWeight: FontWeight.w400,
              height: 1.3,
            ),
            maxLines: 2,
            overflow: TextOverflow.ellipsis,
          ),

          const SpaceHeight(16),

          // Today's highlight
          Container(
            padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
            decoration: BoxDecoration(
              color: AppColor.white.withOpacity(0.2),
              borderRadius: BorderRadius.circular(16),
              border: Border.all(
                color: AppColor.white.withOpacity(0.3),
                width: 1,
              ),
            ),
            child: Row(
              mainAxisSize: MainAxisSize.min,
              children: [
                Icon(
                  Icons.trending_up_rounded,
                  color: AppColor.white,
                  size: 14,
                ),
                const SizedBox(width: 6),
                Text(
                  'Penjualan hari ini +25%',
                  style: AppStyle.sm.copyWith(
                    color: AppColor.white,
                    fontWeight: FontWeight.w600,
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}