social-app/apps/lib/features/contacts/presentation/screens/contact_detail_screen.dart

import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'package:social_app/core/l10n/l10n.dart';
import 'package:social_app/core/theme/design_tokens.dart';
import 'package:social_app/shared/widgets/back_title_page_header.dart';
import 'package:social_app/features/contacts/data/apis/users_api.dart';

class ContactDetailScreen extends StatelessWidget {
  final UserBasicInfo user;

  const ContactDetailScreen({super.key, required this.user});

  @override
  Widget build(BuildContext context) {
    final colorScheme = Theme.of(context).colorScheme;
    return Scaffold(
      backgroundColor: colorScheme.surfaceContainerLow,
      resizeToAvoidBottomInset: false,
      body: SafeArea(
        maintainBottomViewPadding: true,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            BackTitlePageHeader(
              title: context.l10n.contactDetailTitle,
              onBack: () => context.pop(),
            ),
            Expanded(
              child: SingleChildScrollView(
                padding: const EdgeInsets.fromLTRB(20, 8, 20, 20),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: [
                    _buildAvatarSection(context, colorScheme),
                    const SizedBox(height: 14),
                    _buildInfoCard(context, colorScheme),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildAvatarSection(BuildContext context, ColorScheme colorScheme) {
    final palette = Theme.of(context).extension<AppColorPalette>()!;
    final avatarColor = palette
        .avatarColors[user.id.hashCode.abs() % palette.avatarColors.length];

    return Center(
      child: Container(
        width: 80,
        height: 80,
        decoration: BoxDecoration(
          color: colorScheme.primaryContainer.withValues(alpha: 0.45),
          borderRadius: BorderRadius.circular(40),
          border: Border.all(color: colorScheme.surface.withValues(alpha: 0)),
          boxShadow: [
            BoxShadow(
              color: colorScheme.primary.withValues(alpha: 0.2),
              blurRadius: 12,
              offset: const Offset(0, 4),
            ),
          ],
        ),
        child: user.avatarUrl != null
            ? ClipRRect(
                borderRadius: BorderRadius.circular(40),
                child: Image.network(
                  user.avatarUrl!,
                  width: 80,
                  height: 80,
                  fit: BoxFit.cover,
                  errorBuilder: (context, error, stackTrace) =>
                      Icon(Icons.person, size: 32, color: avatarColor),
                ),
              )
            : Icon(Icons.person, size: 32, color: avatarColor),
      ),
    );
  }

  Widget _buildInfoCard(BuildContext context, ColorScheme colorScheme) {
    return Container(
      padding: const EdgeInsets.all(14),
      decoration: BoxDecoration(
        color: colorScheme.surface,
        borderRadius: BorderRadius.circular(16),
        border: Border.all(color: colorScheme.outlineVariant),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          _buildInfoRow(
            context.l10n.contactDetailUsername,
            user.username,
            Icons.person_outline,
            colorScheme,
          ),
          const SizedBox(height: 14),
          _buildInfoRow(
            context.l10n.contactDetailPhone,
            user.phone ?? context.l10n.commonNone,
            Icons.phone_outlined,
            colorScheme,
          ),
          const SizedBox(height: 14),
          _buildInfoRow(
            context.l10n.contactDetailBio,
            user.bio ?? context.l10n.commonNone,
            Icons.info_outline,
            colorScheme,
          ),
        ],
      ),
    );
  }

  Widget _buildInfoRow(
    String label,
    String value,
    IconData icon,
    ColorScheme colorScheme,
  ) {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Icon(icon, size: 18, color: colorScheme.onSurfaceVariant),
        const SizedBox(width: 12),
        Expanded(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                label,
                style: TextStyle(
                  fontSize: 12,
                  color: colorScheme.onSurfaceVariant,
                ),
              ),
              const SizedBox(height: 2),
              Text(
                value,
                style: TextStyle(
                  fontSize: 15,
                  fontWeight: FontWeight.w500,
                  color: colorScheme.onSurface,
                ),
              ),
            ],
          ),
        ),
      ],
    );
  }
}