import 'package:core_localization/core_localization.dart';
import 'package:design_system/design_system.dart';
import 'package:flutter/material.dart';
import 'package:flutter_modular/flutter_modular.dart';
import 'package:krow_data_connect/krow_data_connect.dart' as dc;

/// A widget that displays the profile header with avatar and company info.
class SettingsProfileHeader extends StatelessWidget {
  /// Creates a [SettingsProfileHeader].
  const SettingsProfileHeader({super.key});

  @override
  /// Builds the profile header UI.
  Widget build(BuildContext context) {
    final TranslationsClientSettingsProfileEn labels = t.client_settings.profile;
    final dc.ClientSession? session = dc.ClientSessionStore.instance.session;
    final String businessName =
        session?.business?.businessName ?? 'Your Company';
    final String email = session?.user.email ?? 'client@example.com';
    final String? photoUrl = session?.userPhotoUrl;
    final String avatarLetter = businessName.trim().isNotEmpty
        ? businessName.trim()[0].toUpperCase()
        : 'C';

    return SliverAppBar(
      backgroundColor: UiColors.bgSecondary,
      expandedHeight: 140,
      pinned: true,
      elevation: 0,
      shape: const Border(bottom: BorderSide(color: UiColors.border, width: 1)),
      leading: IconButton(
        icon: const Icon(UiIcons.chevronLeft, color: UiColors.textSecondary),
        onPressed: () => Modular.to.navigate('/client-main/home/'),
      ),
      flexibleSpace: FlexibleSpaceBar(
        background: Container(
          padding: const EdgeInsets.symmetric(horizontal: UiConstants.space8),
          margin: const EdgeInsets.only(top: UiConstants.space16),
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.start,
            spacing: UiConstants.space4,
            children: <Widget>[
              Container(
                width: 64,
                height: 64,
                decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  border: Border.all(color: UiColors.border, width: 2),
                  color: UiColors.white,
                ),
                child: CircleAvatar(
                  backgroundColor: UiColors.primary.withValues(alpha: 0.1),
                  backgroundImage:
                      photoUrl != null && photoUrl.isNotEmpty
                          ? NetworkImage(photoUrl)
                          : null,
                  child:
                      photoUrl != null && photoUrl.isNotEmpty
                          ? null
                          : Text(
                              avatarLetter,
                              style: UiTypography.headline1m.copyWith(
                                color: UiColors.primary,
                              ),
                            ),
                ),
              ),
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text(businessName, style: UiTypography.body1b.textPrimary),
                  const SizedBox(height: UiConstants.space1),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.start,
                    spacing: UiConstants.space1,
                    children: <Widget>[
                      Icon(
                        UiIcons.mail,
                        size: 14,
                        color: UiColors.textSecondary,
                      ),
                      Text(
                        email,
                        style: UiTypography.footnote1r.textSecondary,
                      ),
                    ],
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
      title: Text(labels.title, style: UiTypography.body1b.textPrimary),
    );
  }
}
