import 'package:flutter/material.dart';
import 'package:island/widgets/account/account_name.dart';
import 'package:material_symbols_icons/symbols.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:island/screens/account/profile.dart';
import 'package:island/widgets/content/cloud_files.dart';
import 'package:styled_widget/styled_widget.dart';
import 'package:easy_localization/easy_localization.dart';

class AccountNameplate extends HookConsumerWidget {
  final String name;
  final bool isOutlined;
  final EdgeInsetsGeometry padding;

  const AccountNameplate({
    super.key,
    required this.name,
    this.isOutlined = true,
    this.padding = const EdgeInsets.all(16),
  });

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final user = ref.watch(accountProvider(name));

    return Container(
      decoration: isOutlined
          ? BoxDecoration(
              border: Border.all(
                width: 1 / MediaQuery.of(context).devicePixelRatio,
                color: Theme.of(context).dividerColor,
              ),
              borderRadius: const BorderRadius.all(Radius.circular(8)),
            )
          : null,
      margin: padding,
      child: Card(
        margin: EdgeInsets.zero,
        elevation: 0,
        color: Colors.transparent,
        child: user.when(
          data: (account) => account.profile.background != null
              ? AspectRatio(
                  aspectRatio: 16 / 9,
                  child: Stack(
                    children: [
                      // Background image
                      Positioned.fill(
                        child: ClipRRect(
                          borderRadius: BorderRadius.circular(8),
                          child: CloudFileWidget(
                            item: account.profile.background!,
                            fit: BoxFit.cover,
                          ),
                        ),
                      ),
                      // Gradient overlay for text readability
                      Positioned.fill(
                        child: Container(
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(8),
                            gradient: LinearGradient(
                              begin: Alignment.bottomCenter,
                              end: Alignment.topCenter,
                              colors: [
                                Colors.black.withOpacity(0.8),
                                Colors.black.withOpacity(0.1),
                                Colors.transparent,
                              ],
                            ),
                          ),
                        ),
                      ),
                      // Content positioned at the bottom
                      Positioned(
                        left: 0,
                        right: 0,
                        bottom: 0,
                        child: Padding(
                          padding: const EdgeInsets.symmetric(
                            horizontal: 16.0,
                            vertical: 8.0,
                          ),
                          child: Row(
                            children: [
                              // Profile picture (equivalent to leading)
                              ProfilePictureWidget(
                                file: account.profile.picture,
                              ),
                              const SizedBox(width: 16),
                              // Text content (equivalent to title and subtitle)
                              Expanded(
                                child: Column(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  mainAxisSize: MainAxisSize.min,
                                  children: [
                                    AccountName(
                                      account: account,
                                      style: TextStyle(
                                        fontWeight: FontWeight.bold,
                                        color: Colors.white,
                                      ),
                                    ),
                                    Text(
                                      '@${account.name}',
                                    ).textColor(Colors.white70),
                                  ],
                                ),
                              ),
                            ],
                          ),
                        ),
                      ),
                    ],
                  ),
                )
              : Container(
                  padding: const EdgeInsets.symmetric(
                    horizontal: 16.0,
                    vertical: 8.0,
                  ),
                  decoration: isOutlined
                      ? BoxDecoration(
                          border: Border.all(
                            color: Theme.of(context).colorScheme.outline,
                          ),
                          borderRadius: BorderRadius.circular(12),
                        )
                      : null,
                  child: Row(
                    children: [
                      // Profile picture (equivalent to leading)
                      ProfilePictureWidget(file: account.profile.picture),
                      const SizedBox(width: 16),
                      // Text content (equivalent to title and subtitle)
                      Expanded(
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          mainAxisSize: MainAxisSize.min,
                          children: [
                            AccountName(
                              account: account,
                              style: TextStyle(fontWeight: FontWeight.bold),
                            ),
                            Text('@${account.name}'),
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
          loading: () => Padding(
            padding: const EdgeInsets.symmetric(
              horizontal: 16.0,
              vertical: 8.0,
            ),
            child: Row(
              children: [
                // Loading indicator (equivalent to leading)
                const CircularProgressIndicator(),
                const SizedBox(width: 16),
                // Loading text content (equivalent to title and subtitle)
                Expanded(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      const Text('loading').bold().tr(),
                      const SizedBox(height: 4),
                      const Text('...'),
                    ],
                  ),
                ),
              ],
            ),
          ),
          error: (error, stackTrace) => Padding(
            padding: const EdgeInsets.symmetric(
              horizontal: 16.0,
              vertical: 8.0,
            ),
            child: Row(
              children: [
                // Error icon (equivalent to leading)
                const Icon(Symbols.error),
                const SizedBox(width: 16),
                // Error text content (equivalent to title and subtitle)
                Expanded(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      Text('somethingWentWrong').tr().bold(),
                      const SizedBox(height: 4),
                      Text(error.toString()),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}
