import 'package:flutter/material.dart';

import '../../../../common/theme/theme.dart';
import '../../../../sample/community_sample_data.dart';
import '../community_ui.dart';

/// Kartu kecil untuk carousel "Komunitas Populer".
class CommunityGroupCard extends StatelessWidget {
  const CommunityGroupCard({
    super.key,
    required this.group,
    required this.isJoined,
    required this.onTap,
    required this.onJoin,
  });

  final CommunityGroup group;
  final bool isJoined;
  final VoidCallback onTap;
  final VoidCallback onJoin;

  @override
  Widget build(BuildContext context) {
    final (background, _) = CommunityColor.tintOf(group.tint);

    return Container(
      width: 156,
      decoration: BoxDecoration(
        color: background,
        borderRadius: BorderRadius.circular(22),
      ),
      child: Material(
        type: MaterialType.transparency,
        child: InkWell(
          borderRadius: BorderRadius.circular(22),
          onTap: onTap,
          child: Padding(
            padding: const EdgeInsets.all(14),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Container(
                  width: 44,
                  height: 44,
                  alignment: Alignment.center,
                  decoration: BoxDecoration(
                    color: AppColor.white.withOpacity(0.8),
                    borderRadius: BorderRadius.circular(14),
                  ),
                  child: Text(
                    group.emoji,
                    style: const TextStyle(fontSize: 22),
                  ),
                ),
                const Spacer(),
                Text(
                  group.name,
                  maxLines: 1,
                  overflow: TextOverflow.ellipsis,
                  style: AppStyle.md.copyWith(fontWeight: FontWeight.w700),
                ),
                const SizedBox(height: 2),
                Text(
                  '${formatCompact(group.memberCount)} anggota',
                  style: AppStyle.xs.copyWith(color: CommunityColor.muted),
                ),
                const SizedBox(height: 10),
                CommunityJoinButton(
                  isJoined: isJoined,
                  onPressed: onJoin,
                  compact: true,
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

/// Baris komunitas untuk tab "Komunitas".
class CommunityGroupTile extends StatelessWidget {
  const CommunityGroupTile({
    super.key,
    required this.group,
    required this.isJoined,
    required this.onTap,
    required this.onJoin,
  });

  final CommunityGroup group;
  final bool isJoined;
  final VoidCallback onTap;
  final VoidCallback onJoin;

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.fromLTRB(16, 0, 16, 12),
      decoration: communityCardDecoration(),
      child: Material(
        type: MaterialType.transparency,
        child: InkWell(
          borderRadius: BorderRadius.circular(20),
          onTap: onTap,
          child: Padding(
            padding: const EdgeInsets.all(12),
            child: Row(
              children: [
                Stack(
                  clipBehavior: Clip.none,
                  children: [
                    ClipRRect(
                      borderRadius: BorderRadius.circular(16),
                      child: Image.asset(
                        group.coverImage,
                        width: 64,
                        height: 64,
                        fit: BoxFit.cover,
                      ),
                    ),
                    Positioned(
                      right: -4,
                      bottom: -4,
                      child: Container(
                        padding: const EdgeInsets.all(2),
                        decoration: BoxDecoration(
                          color: AppColor.white,
                          borderRadius: BorderRadius.circular(10),
                        ),
                        child: CommunityEmojiBadge(group: group, size: 24),
                      ),
                    ),
                  ],
                ),
                const SizedBox(width: 14),
                Expanded(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        group.name,
                        maxLines: 1,
                        overflow: TextOverflow.ellipsis,
                        style: AppStyle.md.copyWith(
                          fontWeight: FontWeight.w700,
                        ),
                      ),
                      const SizedBox(height: 2),
                      Text(
                        group.description,
                        maxLines: 1,
                        overflow: TextOverflow.ellipsis,
                        style: AppStyle.xs.copyWith(
                          color: CommunityColor.muted,
                          fontWeight: FontWeight.w500,
                        ),
                      ),
                      const SizedBox(height: 6),
                      Row(
                        children: [
                          const Icon(
                            Icons.people_alt_rounded,
                            size: 14,
                            color: CommunityColor.muted,
                          ),
                          const SizedBox(width: 4),
                          Text(
                            formatCompact(group.memberCount),
                            style: AppStyle.xs.copyWith(
                              color: CommunityColor.muted,
                              fontWeight: FontWeight.w600,
                            ),
                          ),
                          const SizedBox(width: 10),
                          const Icon(
                            Icons.local_fire_department_rounded,
                            size: 14,
                            color: CommunityColor.muted,
                          ),
                          const SizedBox(width: 2),
                          Flexible(
                            child: Text(
                              '${group.postPerDay} post/hari',
                              maxLines: 1,
                              overflow: TextOverflow.ellipsis,
                              style: AppStyle.xs.copyWith(
                                color: CommunityColor.muted,
                                fontWeight: FontWeight.w600,
                              ),
                            ),
                          ),
                        ],
                      ),
                    ],
                  ),
                ),
                const SizedBox(width: 8),
                CommunityJoinButton(
                  isJoined: isJoined,
                  onPressed: onJoin,
                  compact: true,
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}