import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

import '../core/format.dart';
import '../core/providers.dart';
import '../core/theme.dart';
import 'ui.dart';

/// Signed-in user and Sign out. A sheet on phones, a dialog on wider windows.
void showAccountSheet(BuildContext context, WidgetRef ref) {
  final u = ref.read(sessionProvider);
  if (u == null) return;
  showSheet<void>(context, (ctx) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Row(
          children: [
            Avatar(name: u.username, size: 52),
            const SizedBox(width: S.s14),
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(u.username, style: ts(17, w: w7)),
                  const SizedBox(height: S.s4),
                  Row(
                    children: [
                      Pill(u.isAdmin ? 'Admin' : 'User'),
                      const SizedBox(width: S.s8),
                      Text(
                        u.isAdmin
                            ? 'All shops'
                            : plural(u.shopIds.length, 'shop'),
                        style: ts(12, c: C.muted),
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ],
        ),
        const SizedBox(height: S.s22),
        BigButton(
          'Sign out',
          outline: true,
          icon: Icons.logout_rounded,
          onPressed: () {
            Navigator.pop(ctx);
            ref.read(sessionProvider.notifier).logout();
          },
        ),
      ],
    );
  });
}

/// Initials in a rounded square.
class Avatar extends StatelessWidget {
  const Avatar({
    super.key,
    required this.name,
    this.size = 46,
    this.dark = false,
  });
  final String name;
  final double size;
  final bool dark;

  @override
  Widget build(BuildContext context) => Container(
    width: size,
    height: size,
    alignment: Alignment.center,
    decoration: BoxDecoration(
      color: dark ? C.navy : C.chip,
      borderRadius: BorderRadius.circular(size * 0.3),
    ),
    child: Text(
      initials(name),
      style: ts(size * 0.33, w: w7, c: dark ? Colors.white : C.navy),
    ),
  );
}