MotorSignal-App/lib/features/social/clubs/create_club_screen.dart

727 lines
27 KiB
Dart

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:go_router/go_router.dart';
import '../../../core/error_mapper.dart';
import '../../../core/responsive/responsive_layout.dart';
import '../../../core/theme/app_typography.dart';
import '../../../core/theme/theme_extensions.dart';
import '../../../services/auth/auth_providers.dart';
import '../../../services/clubs/club_models.dart';
import '../../../services/clubs/club_providers.dart';
import '../../../services/clubs/club_service.dart';
import 'widgets/slug_input_field.dart';
/// Screen allowing authenticated riders to create a new Club.
/// Features live slug availability verification and atomic creation.
class CreateClubScreen extends ConsumerStatefulWidget {
const CreateClubScreen({super.key});
@override
ConsumerState<CreateClubScreen> createState() => _CreateClubScreenState();
}
class _CreateClubScreenState extends ConsumerState<CreateClubScreen> {
final _formKey = GlobalKey<FormState>();
final _nameController = TextEditingController();
final _slugController = TextEditingController();
final _descController = TextEditingController();
final _regionController = TextEditingController();
final _focusController = TextEditingController();
ClubVisibility _visibility = ClubVisibility.public;
ClubAdmissionPolicy _admissionPolicy = ClubAdmissionPolicy.request;
bool _isSlugValidAndAvailable = false;
bool _isSubmitting = false;
String? _submissionError;
@override
void dispose() {
_nameController.dispose();
_slugController.dispose();
_descController.dispose();
_regionController.dispose();
_focusController.dispose();
super.dispose();
}
Future<void> _submitForm() async {
if (_isSubmitting) return;
if (!_formKey.currentState!.validate()) return;
if (!_isSlugValidAndAvailable) {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
content: Text('Please choose a valid and available club handle.'),
behavior: SnackBarBehavior.floating,
),
);
return;
}
setState(() {
_isSubmitting = true;
_submissionError = null;
});
try {
final user = ref.read(currentUserProvider);
if (user == null || user.isAnonymous) {
throw const ClubOperationException(
'You must be signed in with a registered account to create a club.',
code: 'unauthenticated',
);
}
final service = ref.read(clubServiceProvider);
final createdClub = await service.createClub(
name: _nameController.text.trim(),
slug: _slugController.text.trim(),
description: _descController.text.trim(),
visibility: _visibility,
admissionPolicy: _admissionPolicy,
homeRegion: _regionController.text.trim().isEmpty
? null
: _regionController.text.trim(),
motorcycleFocus: _focusController.text.trim().isEmpty
? null
: _focusController.text.trim(),
callerUid: user.uid,
);
// Invalidate relevant providers to reflect new club
ref.invalidate(myClubsProvider);
ref.invalidate(publicClubsProvider);
if (!mounted) return;
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text('Club "${createdClub.name}" created successfully!'),
behavior: SnackBarBehavior.floating,
),
);
context.pushReplacement('/social/clubs/${createdClub.id}');
} on ClubOperationException catch (e) {
if (!mounted) return;
setState(() {
_isSubmitting = false;
if (e.code == 'slug-taken') {
_submissionError =
'This handle was just taken by another club. Please pick a different handle.';
} else {
_submissionError = e.message;
}
});
} catch (e) {
if (!mounted) return;
setState(() {
_isSubmitting = false;
_submissionError =
'An unexpected error occurred while creating the club: ${ErrorMapper.map(e)}';
});
}
}
@override
Widget build(BuildContext context) {
final colors = context.motorColors;
final theme = Theme.of(context);
final user = ref.watch(currentUserProvider);
final isAuthenticated = user != null && !user.isAnonymous;
if (!isAuthenticated) {
return Scaffold(
appBar: AppBar(title: const Text('Create Club')),
body: Center(
child: Padding(
padding: const EdgeInsets.all(24.0),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Icon(Icons.shield_outlined, size: 48, color: colors.cyberCyan),
const SizedBox(height: 16),
const Text(
'Account Required',
style: TextStyle(
fontFamily: AppTypography.fontHeadline,
fontSize: 18,
fontWeight: FontWeight.w700,
),
),
const SizedBox(height: 8),
Text(
'Sign in or create a MotorSignal account to join and manage riding clubs.',
textAlign: TextAlign.center,
style: TextStyle(
fontFamily: AppTypography.fontBody,
fontSize: 13,
color: theme.colorScheme.onSurfaceVariant,
),
),
const SizedBox(height: 20),
FilledButton.icon(
onPressed: () => context.push('/account'),
style: FilledButton.styleFrom(
backgroundColor: colors.cyberCyan,
foregroundColor: Colors.black,
),
icon: const Icon(Icons.login, size: 18),
label: const Text('Sign In / Register'),
),
],
),
),
),
);
}
final mediaSize = MediaQuery.sizeOf(context);
final isCompactScreen = mediaSize.height < 500;
return Scaffold(
appBar: AppBar(
toolbarHeight: isCompactScreen ? 44 : null,
title: Text(
'Create Club',
style: TextStyle(
fontFamily: AppTypography.fontHeadline,
fontSize: isCompactScreen ? 16 : null,
fontWeight: FontWeight.w700,
),
),
),
body: SafeArea(
child: ResponsiveLayout(
builder: (context, responsive) {
final isCompact =
responsive.isLandscape || responsive.isShortViewport;
final isTwoColumn =
responsive.isLandscape && responsive.width >= 600;
final bottomInset = MediaQuery.viewInsetsOf(context).bottom;
final nameField = TextFormField(
controller: _nameController,
enabled: !_isSubmitting,
textCapitalization: TextCapitalization.words,
scrollPadding: const EdgeInsets.only(bottom: 120, top: 24),
decoration: InputDecoration(
labelText: 'Club Name *',
hintText: 'e.g. Ridge Runners MC',
filled: true,
fillColor: colors.surfaceContainer,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
borderSide: BorderSide(
color: colors.outlineVariant,
width: 0.8,
),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
borderSide: BorderSide(
color: colors.outlineVariant,
width: 0.8,
),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
borderSide: BorderSide(
color: colors.cyberCyan,
width: 1.5,
),
),
),
validator: (val) {
final clean = val?.trim() ?? '';
if (clean.length < 3) {
return 'Name must be at least 3 characters';
}
if (clean.length > 50) {
return 'Name cannot exceed 50 characters';
}
return null;
},
);
final slugField = SlugInputField(
controller: _slugController,
enabled: !_isSubmitting,
onValidationChanged: (isValid) {
setState(() {
_isSlugValidAndAvailable = isValid;
});
},
);
final regionSection = Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
_buildFieldLabel(
'Home base',
'Where this club primarily rides or organizes from.',
colors,
),
SizedBox(height: isCompact ? 6 : 8),
TextFormField(
controller: _regionController,
enabled: !_isSubmitting,
textCapitalization: TextCapitalization.words,
scrollPadding: const EdgeInsets.only(bottom: 120, top: 24),
decoration: InputDecoration(
labelText: 'Home region (optional)',
hintText: 'e.g. North Georgia, NorCal, Phoenix Metro',
prefixIcon: const Icon(Icons.location_on_outlined),
filled: true,
fillColor: colors.surfaceContainer,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
borderSide: BorderSide(
color: colors.outlineVariant,
width: 0.8,
),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
borderSide: BorderSide(
color: colors.outlineVariant,
width: 0.8,
),
),
),
),
],
);
final focusSection = Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
_buildFieldLabel(
'Rider community',
'Name the motorcycle types or riding style this club is for.',
colors,
),
SizedBox(height: isCompact ? 6 : 8),
TextFormField(
controller: _focusController,
enabled: !_isSubmitting,
textCapitalization: TextCapitalization.words,
scrollPadding: const EdgeInsets.only(bottom: 120, top: 24),
decoration: InputDecoration(
labelText: 'Motorcycle focus (optional)',
hintText: 'e.g. Sport bikes, ADV, Cruisers, Mixed rides',
prefixIcon: const Icon(Icons.two_wheeler_outlined),
filled: true,
fillColor: colors.surfaceContainer,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
borderSide: BorderSide(
color: colors.outlineVariant,
width: 0.8,
),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
borderSide: BorderSide(
color: colors.outlineVariant,
width: 0.8,
),
),
),
),
],
);
final visibilitySection = Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Club Visibility',
style: TextStyle(
fontFamily: AppTypography.fontHeadline,
fontSize: 13,
fontWeight: FontWeight.w700,
color: colors.cyberCyan,
),
),
SizedBox(height: isCompact ? 6 : 8),
_buildVisibilitySelector(colors, theme),
],
);
final admissionSection = Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Admission Policy',
style: TextStyle(
fontFamily: AppTypography.fontHeadline,
fontSize: 13,
fontWeight: FontWeight.w700,
color: colors.cyberCyan,
),
),
SizedBox(height: isCompact ? 6 : 8),
_buildAdmissionSelector(colors, theme),
],
);
return Center(
child: ConstrainedBox(
constraints: BoxConstraints(maxWidth: isTwoColumn ? 860 : 700),
child: Form(
key: _formKey,
child: Scrollbar(
thumbVisibility: isCompact,
child: ListView(
keyboardDismissBehavior:
ScrollViewKeyboardDismissBehavior.onDrag,
padding: EdgeInsets.fromLTRB(
isCompact ? 16.0 : 18.0,
isCompact ? 10.0 : 18.0,
isCompact ? 16.0 : 18.0,
(isCompact ? 16.0 : 32.0) +
(bottomInset > 0 ? 16.0 : 0.0),
),
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
// Header card explaining Club identity
Container(
padding: EdgeInsets.all(isCompact ? 10.0 : 14.0),
decoration: BoxDecoration(
color: colors.surfaceContainer,
borderRadius: BorderRadius.circular(12),
border: Border.all(
color: colors.outlineVariant,
width: 0.8,
),
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Icon(
Icons.shield_outlined,
color: colors.cyberCyan,
size: isCompact ? 20 : 24,
),
const SizedBox(width: 12),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'Found a Motorcycle Club',
style: TextStyle(
fontFamily: AppTypography.fontHeadline,
fontSize: 14,
fontWeight: FontWeight.w700,
),
),
const SizedBox(height: 3),
Text(
'As the founder, you will be designated the Club Owner with administrative authority over admissions, group rides, and club settings.',
style: TextStyle(
fontFamily: AppTypography.fontBody,
fontSize: 12,
color:
theme.colorScheme.onSurfaceVariant,
height: 1.3,
),
),
],
),
),
],
),
),
SizedBox(height: isCompact ? 12 : 20),
// Submission error alert if present
if (_submissionError != null) ...[
Container(
padding: const EdgeInsets.all(12),
decoration: BoxDecoration(
color: colors.raceRed.withValues(alpha: 0.12),
borderRadius: BorderRadius.circular(10),
border: Border.all(
color: colors.raceRed.withValues(alpha: 0.4),
),
),
child: Row(
children: [
Icon(
Icons.error_outline,
color: colors.raceRed,
size: 20,
),
const SizedBox(width: 8),
Expanded(
child: Text(
_submissionError!,
style: TextStyle(
fontFamily: AppTypography.fontBody,
fontSize: 12.5,
color: colors.raceRed,
),
),
),
],
),
),
SizedBox(height: isCompact ? 12 : 16),
],
// Club Name & Slug / Handle
if (isTwoColumn)
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(child: nameField),
const SizedBox(width: 16),
Expanded(child: slugField),
],
)
else ...[
nameField,
const SizedBox(height: 18),
slugField,
],
SizedBox(height: isCompact ? 12 : 18),
// Description
TextFormField(
controller: _descController,
enabled: !_isSubmitting,
maxLines: isCompact ? 2 : 3,
maxLength: 500,
textCapitalization: TextCapitalization.sentences,
scrollPadding:
const EdgeInsets.only(bottom: 120, top: 24),
decoration: InputDecoration(
labelText: 'Description (Optional)',
hintText:
'Share your club mission, riding style, or club guidelines...',
filled: true,
fillColor: colors.surfaceContainer,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
borderSide: BorderSide(
color: colors.outlineVariant,
width: 0.8,
),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
borderSide: BorderSide(
color: colors.outlineVariant,
width: 0.8,
),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
borderSide: BorderSide(
color: colors.cyberCyan,
width: 1.5,
),
),
),
),
SizedBox(height: isCompact ? 10 : 14),
// Home base & Rider community
if (isTwoColumn)
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(child: regionSection),
const SizedBox(width: 16),
Expanded(child: focusSection),
],
)
else ...[
regionSection,
const SizedBox(height: 18),
focusSection,
],
SizedBox(height: isCompact ? 14 : 24),
// Visibility & Admission Policy Selection
if (isTwoColumn)
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(child: visibilitySection),
const SizedBox(width: 16),
Expanded(child: admissionSection),
],
)
else ...[
visibilitySection,
const SizedBox(height: 20),
admissionSection,
],
SizedBox(height: isCompact ? 16 : 32),
// Submit Button
SizedBox(
height: isCompact ? 46 : 50,
child: FilledButton(
key: const ValueKey('create_club_submit_button'),
onPressed:
(_isSubmitting || !_isSlugValidAndAvailable)
? null
: _submitForm,
style: FilledButton.styleFrom(
backgroundColor: colors.cyberCyan,
foregroundColor: Colors.black,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12),
),
),
child: _isSubmitting
? const SizedBox(
width: 24,
height: 24,
child: CircularProgressIndicator(
strokeWidth: 2.5,
valueColor: AlwaysStoppedAnimation<Color>(
Colors.black,
),
),
)
: const Text(
'Create Club',
style: TextStyle(
fontFamily: AppTypography.fontHeadline,
fontSize: 15,
fontWeight: FontWeight.w800,
letterSpacing: 0.3,
),
),
),
),
SizedBox(height: isCompact ? 12 : 32),
],
),
],
),
),
),
),
);
},
),
),
);
}
Widget _buildVisibilitySelector(
MotorSignalThemeColors colors,
ThemeData theme,
) {
return DropdownButtonFormField<ClubVisibility>(
initialValue: _visibility,
isExpanded: true,
decoration: _choiceDecoration('Who can find this club', colors),
dropdownColor: colors.surfaceContainerHigh,
style: TextStyle(color: theme.colorScheme.onSurface),
items: ClubVisibility.values
.map(
(value) => DropdownMenuItem(
value: value,
child: Text(
value.label,
overflow: TextOverflow.ellipsis,
),
),
)
.toList(),
onChanged: _isSubmitting
? null
: (value) {
if (value != null) setState(() => _visibility = value);
},
);
}
Widget _buildAdmissionSelector(
MotorSignalThemeColors colors,
ThemeData theme,
) {
return DropdownButtonFormField<ClubAdmissionPolicy>(
initialValue: _admissionPolicy,
isExpanded: true,
decoration: _choiceDecoration('How riders join', colors),
dropdownColor: colors.surfaceContainerHigh,
style: TextStyle(color: theme.colorScheme.onSurface),
items: ClubAdmissionPolicy.values
.map(
(value) => DropdownMenuItem(
value: value,
child: Text(
value.label,
overflow: TextOverflow.ellipsis,
),
),
)
.toList(),
onChanged: _isSubmitting
? null
: (value) {
if (value != null) setState(() => _admissionPolicy = value);
},
);
}
Widget _buildFieldLabel(
String title,
String description,
MotorSignalThemeColors colors,
) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
title,
style: TextStyle(
color: colors.cyberCyan,
fontWeight: FontWeight.w700,
fontSize: 13,
),
),
const SizedBox(height: 3),
Text(
description,
style: TextStyle(
color: Theme.of(context).colorScheme.onSurfaceVariant,
fontSize: 12,
height: 1.25,
),
),
],
);
}
InputDecoration _choiceDecoration(
String label,
MotorSignalThemeColors colors,
) {
return InputDecoration(
labelText: label,
prefixIcon: const Icon(Icons.tune),
filled: true,
fillColor: colors.surfaceContainer,
border: OutlineInputBorder(borderRadius: BorderRadius.circular(10)),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: BorderSide(color: colors.outlineVariant),
),
);
}
}