Add team list and joining

frontend_splatournament_manager/lib/pages/create_team_page.dart

@@ -0,0 +1,145 @@
+import 'package:flutter/material.dart';
+import 'package:frontend_splatournament_manager/models/team.dart';
+import 'package:frontend_splatournament_manager/providers/team_provider.dart';
+import 'package:provider/provider.dart';
+
+class CreateTeamPage extends StatefulWidget {
+  final Team? teamToEdit;
+
+  const CreateTeamPage({super.key, this.teamToEdit});
+
+  @override
+  State<CreateTeamPage> createState() => _CreateTeamPageState();
+}
+
+class _CreateTeamPageState extends State<CreateTeamPage> {
+  final _formKey = GlobalKey<FormState>();
+  late final TextEditingController _nameController;
+  late final TextEditingController _tagController;
+  late final TextEditingController _descriptionController;
+
+  bool _isLoading = false;
+
+  @override
+  void initState() {
+    super.initState();
+    _nameController = TextEditingController(text: widget.teamToEdit?.name ?? '');
+    _tagController = TextEditingController(text: widget.teamToEdit?.tag ?? '');
+    _descriptionController = TextEditingController(text: widget.teamToEdit?.description ?? '');
+  }
+
+  void _submitForm() async {
+    if (!_formKey.currentState!.validate()) return;
+
+    setState(() => _isLoading = true);
+
+    try {
+      final provider = Provider.of<TeamProvider>(context, listen: false);
+      if (widget.teamToEdit != null) {
+        await provider.updateTeam(
+          widget.teamToEdit!.id,
+          name: _nameController.text,
+          tag: _tagController.text,
+          description: _descriptionController.text,
+        );
+        if (!context.mounted) return;
+        ScaffoldMessenger.of(context).showSnackBar(
+          const SnackBar(content: Text('Team updated successfully')),
+        );
+      } else {
+        await provider.createTeam(
+          name: _nameController.text,
+          tag: _tagController.text,
+          description: _descriptionController.text,
+        );
+        if (!context.mounted) return;
+        ScaffoldMessenger.of(context).showSnackBar(
+          const SnackBar(content: Text('Team created successfully')),
+        );
+      }
+      if (!context.mounted) return;
+      Navigator.pop(context);
+    } catch (e) {
+      if (!context.mounted) return;
+      ScaffoldMessenger.of(context).showSnackBar(
+        SnackBar(content: Text('Error: $e')),
+      );
+    } finally {
+      if (context.mounted) setState(() => _isLoading = false);
+    }
+  }
+
+  @override
+  void dispose() {
+    _nameController.dispose();
+    _tagController.dispose();
+    _descriptionController.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final isEditing = widget.teamToEdit != null;
+    return Scaffold(
+      appBar: AppBar(
+        title: Text(isEditing ? 'Edit Team' : 'Create Team'),
+      ),
+      body: SingleChildScrollView(
+        padding: const EdgeInsets.all(16.0),
+        child: Form(
+          key: _formKey,
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.stretch,
+            children: [
+              TextFormField(
+                controller: _nameController,
+                decoration: const InputDecoration(
+                  labelText: 'Team Name',
+                  hintText: 'Enter team name',
+                ),
+                validator: (value) {
+                  if (value == null || value.isEmpty) {
+                    return 'Team name is required';
+                  }
+                  return null;
+                },
+              ),
+              const SizedBox(height: 16),
+              TextFormField(
+                controller: _tagController,
+                decoration: const InputDecoration(
+                  labelText: 'Team Tag',
+                  hintText: 'Enter team tag (e.g., ABC)',
+                ),
+                maxLength: 5,
+                textCapitalization: TextCapitalization.characters,
+                validator: (value) {
+                  if (value == null || value.isEmpty) {
+                    return 'Team tag is required';
+                  }
+                  return null;
+                },
+              ),
+              const SizedBox(height: 16),
+              TextFormField(
+                controller: _descriptionController,
+                decoration: const InputDecoration(
+                  labelText: 'Description',
+                  hintText: 'Enter team description (optional)',
+                ),
+                maxLines: 3,
+              ),
+              const SizedBox(height: 24),
+              ElevatedButton(
+                onPressed: _isLoading ? null : _submitForm,
+                child: _isLoading
+                    ? const CircularProgressIndicator()
+                    : Text(isEditing ? 'Update Team' : 'Create Team'),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}

frontend_splatournament_manager/lib/pages/home_page.dart

@@ -1,59 +1,145 @@
 import 'package:flutter/material.dart';
 import 'package:frontend_splatournament_manager/providers/tournament_provider.dart';
+import 'package:frontend_splatournament_manager/providers/team_provider.dart';
 import 'package:frontend_splatournament_manager/widgets/available_tournament_list.dart';
+import 'package:frontend_splatournament_manager/widgets/teams_list_widget.dart';
+import 'package:frontend_splatournament_manager/widgets/my_teams_widget.dart';
 import 'package:frontend_splatournament_manager/pages/create_tournament_page.dart';
+import 'package:frontend_splatournament_manager/pages/create_team_page.dart';
 import 'package:go_router/go_router.dart';
 import 'package:provider/provider.dart';
 
-class HomePage extends StatelessWidget {
+class HomePage extends StatefulWidget {
   const HomePage({super.key});
 
+  @override
+  State<HomePage> createState() => _HomePageState();
+}
+
+class _HomePageState extends State<HomePage> with SingleTickerProviderStateMixin {
+  int _selectedIndex = 0;
+  late TabController _tabController;
+
+  @override
+  void initState() {
+    super.initState();
+    _tabController = TabController(length: 2, vsync: this);
+  }
+
+  @override
+  void dispose() {
+    _tabController.dispose();
+    super.dispose();
+  }
+
   @override
   Widget build(BuildContext context) {
     return Scaffold(
       appBar: AppBar(
-        title: Text("Splatournament"),
+        title: Text(_selectedIndex == 0 ? "Tournaments" : "Teams"),
+        bottom: _selectedIndex == 1
+            ? TabBar(
+                controller: _tabController,
+                tabs: const [
+                  Tab(text: 'All Teams'),
+                  Tab(text: 'My Teams'),
+                ],
+              )
+            : null,
         actions: [
           IconButton(
             onPressed: () async {
-              final tournamentProvider = Provider.of<TournamentProvider>(
-                context,
-                listen: false,
-              );
               try {
-                await tournamentProvider.refreshAvailableTournaments();
+                if (_selectedIndex == 0) {
+                  final tournamentProvider = Provider.of<TournamentProvider>(
+                    context,
+                    listen: false,
+                  );
+                  await tournamentProvider.refreshAvailableTournaments();
+                } else {
+                  final teamProvider = Provider.of<TeamProvider>(
+                    context,
+                    listen: false,
+                  );
+                  await teamProvider.refreshTeams();
+                }
               } catch (_) {
                 if (!context.mounted) return;
                 ScaffoldMessenger.of(context).showSnackBar(
-                  SnackBar(content: Text('Failed to refresh tournaments')),
+                  SnackBar(
+                    content: Text(
+                      'Failed to refresh ${_selectedIndex == 0 ? "tournaments" : "teams"}',
+                    ),
+                  ),
                 );
               }
             },
-            icon: Icon(Icons.refresh),
+            icon: const Icon(Icons.refresh),
           ),
           PopupMenuButton(
             onSelected: (value) {
               context.go("/settings");
             },
-            offset: Offset(0, 48),
+            offset: const Offset(0, 48),
             itemBuilder: (context) {
-              return [PopupMenuItem(value: 1, child: Text("Settings"))];
+              return [const PopupMenuItem(value: 1, child: Text("Settings"))];
             },
           ),
         ],
       ),
-      body: Container(
-        padding: EdgeInsets.fromLTRB(0, 12, 0, 36),
-        child: Column(children: [Spacer(), AvailableTournamentList()]),
+      body: IndexedStack(
+        index: _selectedIndex,
+        children: [
+          // Tournaments View
+          Container(
+            padding: const EdgeInsets.fromLTRB(0, 12, 0, 36),
+            child: Column(children: [const Spacer(), const AvailableTournamentList()]),
+          ),
+          // Teams View with tabs
+          TabBarView(
+            controller: _tabController,
+            children: const [
+              TeamsListWidget(),
+              MyTeamsWidget(),
+            ],
+          ),
+        ],
+      ),
+      bottomNavigationBar: BottomNavigationBar(
+        currentIndex: _selectedIndex,
+        onTap: (index) {
+          setState(() {
+            _selectedIndex = index;
+          });
+        },
+        items: const [
+          BottomNavigationBarItem(
+            icon: Icon(Icons.emoji_events),
+            label: 'Tournaments',
+          ),
+          BottomNavigationBarItem(
+            icon: Icon(Icons.groups),
+            label: 'Teams',
+          ),
+        ],
       ),
       floatingActionButton: FloatingActionButton(
         onPressed: () {
-          Navigator.push(
-            context,
-            MaterialPageRoute(
-              builder: (context) => const CreateTournamentPage(),
-            ),
-          );
+          if (_selectedIndex == 0) {
+            Navigator.push(
+              context,
+              MaterialPageRoute(
+                builder: (context) => const CreateTournamentPage(),
+              ),
+            );
+          } else {
+            Navigator.push(
+              context,
+              MaterialPageRoute(
+                builder: (context) => const CreateTeamPage(),
+              ),
+            );
+          }
         },
         child: const Icon(Icons.add),
       ),

frontend_splatournament_manager/lib/pages/teams_page.dart

@@ -0,0 +1,162 @@
+import 'package:flutter/material.dart';
+import 'package:frontend_splatournament_manager/models/team.dart';
+import 'package:frontend_splatournament_manager/pages/create_team_page.dart';
+import 'package:frontend_splatournament_manager/providers/team_provider.dart';
+import 'package:provider/provider.dart';
+
+class TeamsPage extends StatelessWidget {
+  const TeamsPage({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        title: const Text("Teams"),
+        actions: [
+          IconButton(
+            onPressed: () async {
+              final teamProvider = Provider.of<TeamProvider>(
+                context,
+                listen: false,
+              );
+              try {
+                await teamProvider.refreshTeams();
+              } catch (_) {
+                if (!context.mounted) return;
+                ScaffoldMessenger.of(context).showSnackBar(
+                  const SnackBar(content: Text('Failed to refresh teams')),
+                );
+              }
+            },
+            icon: const Icon(Icons.refresh),
+          ),
+        ],
+      ),
+      body: Container(
+        padding: const EdgeInsets.all(16),
+        child: Consumer<TeamProvider>(
+          builder: (context, provider, _) {
+            return FutureBuilder<List<Team>>(
+              future: provider.ensureTeamsLoaded(),
+              builder: (context, snapshot) {
+                final teams = provider.teams;
+
+                if (snapshot.connectionState == ConnectionState.waiting &&
+                    teams.isEmpty) {
+                  return const Center(child: CircularProgressIndicator());
+                }
+
+                if (snapshot.hasError && teams.isEmpty) {
+                  return Center(child: Text('Error: ${snapshot.error}'));
+                }
+
+                if (teams.isEmpty) {
+                  return const Center(child: Text('No teams found'));
+                }
+
+                return ListView.builder(
+                  itemCount: teams.length,
+                  itemBuilder: (context, index) {
+                    final team = teams[index];
+                    return TeamListItem(team: team);
+                  },
+                );
+              },
+            );
+          },
+        ),
+      ),
+      floatingActionButton: FloatingActionButton(
+        onPressed: () {
+          Navigator.push(
+            context,
+            MaterialPageRoute(
+              builder: (context) => const CreateTeamPage(),
+            ),
+          );
+        },
+        child: const Icon(Icons.add),
+      ),
+    );
+  }
+}
+
+class TeamListItem extends StatelessWidget {
+  final Team team;
+
+  const TeamListItem({super.key, required this.team});
+
+  void _showDeleteDialog(BuildContext context) {
+    showDialog(
+      context: context,
+      builder: (BuildContext dialogContext) {
+        return AlertDialog(
+          title: const Text('Delete Team'),
+          content: Text('Are you sure you want to delete "${team.name}"?'),
+          actions: [
+            TextButton(
+              onPressed: () => Navigator.pop(dialogContext),
+              child: const Text('Cancel'),
+            ),
+            TextButton(
+              onPressed: () async {
+                Navigator.pop(dialogContext);
+                try {
+                  final provider = Provider.of<TeamProvider>(
+                    context,
+                    listen: false,
+                  );
+                  await provider.deleteTeam(team.id);
+                  if (!context.mounted) return;
+                  ScaffoldMessenger.of(context).showSnackBar(
+                    const SnackBar(content: Text('Team deleted')),
+                  );
+                } catch (e) {
+                  if (!context.mounted) return;
+                  ScaffoldMessenger.of(context).showSnackBar(
+                    SnackBar(content: Text('Error: $e')),
+                  );
+                }
+              },
+              child: const Text('Delete', style: TextStyle(color: Colors.red)),
+            ),
+          ],
+        );
+      },
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Card(
+      margin: const EdgeInsets.symmetric(vertical: 8),
+      child: ListTile(
+        leading: CircleAvatar(
+          child: Text(team.tag),
+        ),
+        title: Text(team.name),
+        subtitle: Text(team.description.isEmpty ? 'No description' : team.description),
+        trailing: Row(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            IconButton(
+              icon: const Icon(Icons.edit),
+              onPressed: () {
+                Navigator.push(
+                  context,
+                  MaterialPageRoute(
+                    builder: (context) => CreateTeamPage(teamToEdit: team),
+                  ),
+                );
+              },
+            ),
+            IconButton(
+              icon: const Icon(Icons.delete, color: Colors.red),
+              onPressed: () => _showDeleteDialog(context),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

frontend_splatournament_manager/lib/pages/tournament_detail_page.dart

@@ -16,6 +16,90 @@ class TournamentDetailPage extends StatefulWidget {
 class _TournamentDetailPageState extends State<TournamentDetailPage> {
   bool isShowingTeams = false;
 
+  void _showJoinTeamDialog(BuildContext context, int tournamentId) async {
+    final teamProvider = Provider.of<TeamProvider>(context, listen: false);
+    
+    try {
+      final teams = await teamProvider.getUserTeams();
+      
+      if (!context.mounted) return;
+      
+      if (teams.isEmpty) {
+        ScaffoldMessenger.of(context).showSnackBar(
+          const SnackBar(content: Text('You are not a member of any team. Join or create a team first!')),
+        );
+        return;
+      }
+
+      final selectedTeam = await showDialog<Team>(
+        context: context,
+        builder: (BuildContext dialogContext) {
+          return AlertDialog(
+            title: const Text('Select Your Team'),
+            content: SizedBox(
+              width: double.maxFinite,
+              child: ListView.builder(
+                shrinkWrap: true,
+                itemCount: teams.length,
+                itemBuilder: (context, index) {
+                  final team = teams[index];
+                  return ListTile(
+                    leading: CircleAvatar(child: Text(team.tag)),
+                    title: Text(team.name),
+                    subtitle: team.description.isNotEmpty 
+                        ? Text(team.description) 
+                        : null,
+                    onTap: () => Navigator.pop(dialogContext, team),
+                  );
+                },
+              ),
+            ),
+            actions: [
+              TextButton(
+                onPressed: () => Navigator.pop(dialogContext),
+                child: const Text('Cancel'),
+              ),
+            ],
+          );
+        },
+      );
+
+      if (selectedTeam != null && context.mounted) {
+        try {
+          await teamProvider.registerTeamForTournament(
+            tournamentId,
+            selectedTeam.id,
+          );
+          
+          if (!context.mounted) return;
+          
+          ScaffoldMessenger.of(context).showSnackBar(
+            SnackBar(
+              content: Text('${selectedTeam.name} joined the tournament!'),
+            ),
+          );
+          
+          // Refresh teams list if currently showing
+          if (isShowingTeams) {
+            setState(() {});
+          }
+        } catch (e) {
+          if (!context.mounted) return;
+          ScaffoldMessenger.of(context).showSnackBar(
+            SnackBar(
+              content: Text('Failed to join: ${e.toString().replaceAll('Exception: ', '')}'),
+            ),
+          );
+        }
+      }
+    } catch (e) {
+      if (!context.mounted) return;
+      ScaffoldMessenger.of(context).showSnackBar(
+        SnackBar(content: Text('Failed to load your teams: $e')),
+      );
+    }
+  }
+
   @override
   Widget build(BuildContext context) {
     return Scaffold(
@@ -58,13 +142,9 @@ class _TournamentDetailPageState extends State<TournamentDetailPage> {
             child: Padding(
               padding: const EdgeInsets.fromLTRB(12, 0, 12, 24),
               child: ElevatedButton(
-                child: Text("Enter"),
+                child: Text("Join with Team"),
                 onPressed: () {
-                  //TODO: Backend Call
-                  ScaffoldMessenger.of(context).clearSnackBars();
-                  ScaffoldMessenger.of(
-                    context,
-                  ).showSnackBar(SnackBar(content: Text("tournament entered")));
+                  _showJoinTeamDialog(context, widget.tournament.id);
                 },
               ),
             ),

frontend_splatournament_manager/lib/providers/team_provider.dart

@@ -6,6 +6,8 @@ class TeamProvider extends ChangeNotifier {
   final TeamService _teamService = TeamService();
 
   List<Team> _teams = [];
+  Future<List<Team>>? _initialLoadFuture;
+
   List<Team> get teams => _teams;
 
   Future<List<Team>> fetchAllTeams() async {
@@ -14,6 +16,16 @@ class TeamProvider extends ChangeNotifier {
     return _teams;
   }
 
+  Future<List<Team>> ensureTeamsLoaded() {
+    _initialLoadFuture ??= fetchAllTeams();
+    return _initialLoadFuture!;
+  }
+
+  Future<List<Team>> refreshTeams() {
+    _initialLoadFuture = fetchAllTeams();
+    return _initialLoadFuture!;
+  }
+
   Future<Team> createTeam({
     required String name,
     required String tag,
@@ -36,7 +48,7 @@ class TeamProvider extends ChangeNotifier {
     String? description,
   }) async {
     await _teamService.updateTeam(id, name: name, tag: tag, description: description);
-    await fetchAllTeams();
+    await refreshTeams();
   }
 
   Future<void> deleteTeam(int id) async {
@@ -58,5 +70,23 @@ class TeamProvider extends ChangeNotifier {
     await _teamService.removeTeamFromTournament(tournamentId, teamId);
     notifyListeners();
   }
+
+  Future<List<Team>> getUserTeams() {
+    return _teamService.getUserTeams();
+  }
+
+  Future<void> joinTeam(int teamId) async {
+    await _teamService.joinTeam(teamId);
+    notifyListeners();
+  }
+
+  Future<void> leaveTeam(int teamId) async {
+    await _teamService.leaveTeam(teamId);
+    notifyListeners();
+  }
+
+  Future<List<Map<String, dynamic>>> getTeamMembers(int teamId) {
+    return _teamService.getTeamMembers(teamId);
+  }
 }
 

frontend_splatournament_manager/lib/services/team_service.dart

@@ -113,4 +113,41 @@ class TeamService {
     final List<dynamic> list = json.decode(response.body);
     return list.cast<Map<String, dynamic>>();
   }
+
+  Future<List<Team>> getUserTeams() async {
+    final response = await ApiClient.get('/users/me/teams');
+    if (response.statusCode != HttpStatus.ok) {
+      throw Exception('Failed to load user teams (${response.statusCode})');
+    }
+    final List<dynamic> list = json.decode(response.body);
+    return list.map((j) => Team.fromJson(j as Map<String, dynamic>)).toList();
+  }
+
+  Future<void> joinTeam(int teamId) async {
+    final response = await ApiClient.post('/teams/$teamId/members', {});
+    if (response.statusCode == 409) {
+      throw Exception('You are already a member of this team');
+    }
+    if (response.statusCode != HttpStatus.created) {
+      final body = json.decode(response.body);
+      throw Exception(body['error'] ?? 'Failed to join team');
+    }
+  }
+
+  Future<void> leaveTeam(int teamId) async {
+    final response = await ApiClient.delete('/teams/$teamId/members/me');
+    if (response.statusCode != HttpStatus.ok) {
+      final body = json.decode(response.body);
+      throw Exception(body['error'] ?? 'Failed to leave team');
+    }
+  }
+
+  Future<List<Map<String, dynamic>>> getTeamMembers(int teamId) async {
+    final response = await ApiClient.get('/teams/$teamId/members');
+    if (response.statusCode != HttpStatus.ok) {
+      throw Exception('Failed to load team members (${response.statusCode})');
+    }
+    final List<dynamic> list = json.decode(response.body);
+    return list.cast<Map<String, dynamic>>();
+  }
 }

frontend_splatournament_manager/lib/widgets/my_teams_widget.dart

@@ -0,0 +1,108 @@
+import 'package:flutter/material.dart';
+import 'package:frontend_splatournament_manager/models/team.dart';
+import 'package:frontend_splatournament_manager/providers/team_provider.dart';
+import 'package:provider/provider.dart';
+
+class MyTeamsWidget extends StatefulWidget {
+  const MyTeamsWidget({super.key});
+
+  @override
+  State<MyTeamsWidget> createState() => _MyTeamsWidgetState();
+}
+
+class _MyTeamsWidgetState extends State<MyTeamsWidget> {
+  late Future<List<Team>> _myTeamsFuture;
+
+  @override
+  void initState() {
+    super.initState();
+    _loadMyTeams();
+  }
+
+  void _loadMyTeams() {
+    _myTeamsFuture = Provider.of<TeamProvider>(context, listen: false).getUserTeams();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return FutureBuilder<List<Team>>(
+      future: _myTeamsFuture,
+      builder: (context, snapshot) {
+        if (snapshot.connectionState == ConnectionState.waiting) {
+          return const Center(child: CircularProgressIndicator());
+        }
+
+        if (snapshot.hasError) {
+          return Center(child: Text('Error: ${snapshot.error}'));
+        }
+
+        final teams = snapshot.data ?? [];
+        if (teams.isEmpty) {
+          return const Center(
+            child: Text('You are not in any teams yet\nJoin teams from the All Teams tab'),
+          );
+        }
+
+        return ListView.builder(
+          padding: const EdgeInsets.all(16),
+          itemCount: teams.length,
+          itemBuilder: (context, index) => _buildTeamCard(teams[index]),
+        );
+      },
+    );
+  }
+
+  Widget _buildTeamCard(Team team) {
+    return Card(
+      margin: const EdgeInsets.only(bottom: 12),
+      child: ListTile(
+        leading: CircleAvatar(child: Text(team.tag)),
+        title: Text(team.name),
+        subtitle: Text(team.description.isEmpty ? 'No description' : team.description),
+        trailing: IconButton(
+          icon: const Icon(Icons.logout, color: Colors.red),
+          onPressed: () => _leaveTeam(team),
+        ),
+      ),
+    );
+  }
+
+  Future<void> _leaveTeam(Team team) async {
+    final confirmed = await showDialog<bool>(
+      context: context,
+      builder: (context) => AlertDialog(
+        title: const Text('Leave Team?'),
+        content: Text('Leave "${team.name}"?'),
+        actions: [
+          TextButton(
+            onPressed: () => Navigator.pop(context, false),
+            child: const Text('Cancel'),
+          ),
+          TextButton(
+            onPressed: () => Navigator.pop(context, true),
+            child: const Text('Leave', style: TextStyle(color: Colors.red)),
+          ),
+        ],
+      ),
+    );
+
+    if (confirmed == true && mounted) {
+      try {
+        await Provider.of<TeamProvider>(context, listen: false).leaveTeam(team.id);
+        if (mounted) {
+          ScaffoldMessenger.of(context).showSnackBar(
+            const SnackBar(content: Text('Left team')),
+          );
+          _loadMyTeams();
+          setState(() {});
+        }
+      } catch (e) {
+        if (mounted) {
+          ScaffoldMessenger.of(context).showSnackBar(
+            SnackBar(content: Text('Error: $e')),
+          );
+        }
+      }
+    }
+  }
+}

frontend_splatournament_manager/lib/widgets/teams_list_widget.dart

@@ -0,0 +1,141 @@
+import 'package:flutter/material.dart';
+import 'package:frontend_splatournament_manager/models/team.dart';
+import 'package:frontend_splatournament_manager/pages/create_team_page.dart';
+import 'package:frontend_splatournament_manager/providers/team_provider.dart';
+import 'package:provider/provider.dart';
+
+class TeamsListWidget extends StatelessWidget {
+  const TeamsListWidget({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: const EdgeInsets.all(16),
+      child: Consumer<TeamProvider>(
+        builder: (context, provider, _) {
+          return FutureBuilder<List<Team>>(
+            future: provider.ensureTeamsLoaded(),
+            builder: (context, snapshot) {
+              final teams = provider.teams;
+
+              if (snapshot.connectionState == ConnectionState.waiting && teams.isEmpty) {
+                return const Center(child: CircularProgressIndicator());
+              }
+
+              if (snapshot.hasError && teams.isEmpty) {
+                return Center(child: Text('Error: ${snapshot.error}'));
+              }
+
+              if (teams.isEmpty) {
+                return const Center(child: Text('No teams found'));
+              }
+
+              return ListView.builder(
+                itemCount: teams.length,
+                itemBuilder: (context, index) => TeamListItem(team: teams[index]),
+              );
+            },
+          );
+        },
+      ),
+    );
+  }
+}
+
+class TeamListItem extends StatelessWidget {
+  final Team team;
+
+  const TeamListItem({super.key, required this.team});
+
+  @override
+  Widget build(BuildContext context) {
+    return Card(
+      margin: const EdgeInsets.only(bottom: 12),
+      child: ListTile(
+        leading: CircleAvatar(child: Text(team.tag)),
+        title: Text(team.name),
+        subtitle: Text(team.description.isEmpty ? 'No description' : team.description),
+        trailing: PopupMenuButton(
+          icon: const Icon(Icons.more_vert),
+          itemBuilder: (context) => [
+            const PopupMenuItem(value: 'join', child: Text('Join Team')),
+            const PopupMenuItem(value: 'edit', child: Text('Edit Team')),
+            const PopupMenuItem(
+              value: 'delete',
+              child: Text('Delete Team', style: TextStyle(color: Colors.red)),
+            ),
+          ],
+          onSelected: (value) async {
+            switch (value) {
+              case 'join':
+                await _joinTeam(context);
+              case 'edit':
+                Navigator.push(
+                  context,
+                  MaterialPageRoute(
+                    builder: (context) => CreateTeamPage(teamToEdit: team),
+                  ),
+                );
+              case 'delete':
+                await _deleteTeam(context);
+            }
+          },
+        ),
+      ),
+    );
+  }
+
+  Future<void> _joinTeam(BuildContext context) async {
+    try {
+      await Provider.of<TeamProvider>(context, listen: false).joinTeam(team.id);
+      if (context.mounted) {
+        ScaffoldMessenger.of(context).showSnackBar(
+          SnackBar(content: Text('Joined ${team.name}!')),
+        );
+      }
+    } catch (e) {
+      if (context.mounted) {
+        ScaffoldMessenger.of(context).showSnackBar(
+          SnackBar(content: Text(e.toString().replaceAll('Exception: ', ''))),
+        );
+      }
+    }
+  }
+
+  Future<void> _deleteTeam(BuildContext context) async {
+    final confirmed = await showDialog<bool>(
+      context: context,
+      builder: (context) => AlertDialog(
+        title: const Text('Delete Team?'),
+        content: Text('Delete "${team.name}"? This cannot be undone.'),
+        actions: [
+          TextButton(
+            onPressed: () => Navigator.pop(context, false),
+            child: const Text('Cancel'),
+          ),
+          TextButton(
+            onPressed: () => Navigator.pop(context, true),
+            child: const Text('Delete', style: TextStyle(color: Colors.red)),
+          ),
+        ],
+      ),
+    );
+
+    if (confirmed == true && context.mounted) {
+      try {
+        await Provider.of<TeamProvider>(context, listen: false).deleteTeam(team.id);
+        if (context.mounted) {
+          ScaffoldMessenger.of(context).showSnackBar(
+            const SnackBar(content: Text('Team deleted')),
+          );
+        }
+      } catch (e) {
+        if (context.mounted) {
+          ScaffoldMessenger.of(context).showSnackBar(
+            SnackBar(content: Text('Error: $e')),
+          );
+        }
+      }
+    }
+  }
+}