lib/features/tours/tour_detail_page.dartDart
import 'package:flutter/material.dart';
import '../../core/localization/app_localizations.dart';
import '../../core/theme/app_colors.dart';
import '../../data/app_data_scope.dart';
import '../../data/location_scope.dart';
import '../../models/ad_campaign.dart';
import '../../models/tour.dart';
import '../../models/transport_mode.dart';
import '../../widgets/sponsored_banner.dart';
import '../../widgets/tour_map.dart';
import '../../widgets/tour_featured_header.dart';
import '../../widgets/remote_image.dart';
import '../../widgets/proximity_label.dart';
import '../../widgets/favorite_toggle_button.dart';
import '../../widgets/analytics_view.dart';
import '../../services/analytics_service.dart';
import '../guide/guide_page.dart';
import '../poi/poi_detail_page.dart';
class TourDetailPage extends StatelessWidget {
const TourDetailPage({super.key, required this.tour});
final Tour tour;
@override
Widget build(BuildContext context) {
final l10n = AppLocalizations.of(context);
final lang = Localizations.localeOf(context).languageCode;
final ad = AppDataScope.of(context)
.campaignFor(AdPlacement.tourDetailBanner, category: tour.category);
return AnalyticsView(
event: 'tour_view',
properties: {'tour_id': tour.id, 'tour_category': tour.category},
child: Scaffold(
appBar: AppBar(
actions: [
FavoriteToggleButton(kind: FavoriteKind.tour, id: tour.id),
const SizedBox(width: 6),
],
),
body: ListView(
padding: const EdgeInsets.fromLTRB(20, 6, 20, 110),
children: [
if (tour.imageUrl?.trim().isNotEmpty == true) ...[
TourFeaturedHeader(
imageUrl: tour.imageUrl,
title: tour.title.get(lang),
height: 230,
),
const SizedBox(height: 20),
],
Text(l10n.categoryLabel(tour.category).toUpperCase(),
style: const TextStyle(
color: AppColors.heartRed,
fontWeight: FontWeight.w800,
letterSpacing: 1.2)),
const SizedBox(height: 10),
Text(tour.title.get(lang),
style: Theme.of(context)
.textTheme
.headlineMedium
?.copyWith(fontWeight: FontWeight.w900)),
const SizedBox(height: 10),
Text(tour.subtitle.get(lang),
style: Theme.of(context)
.textTheme
.bodyLarge
?.copyWith(color: AppColors.mutedInk)),
const SizedBox(height: 22),
Wrap(spacing: 8, runSpacing: 8, children: [
_InfoChip(
icon: Icons.schedule,
label: '${tour.durationMinutes} ${l10n.t('minutesShort')}'),
_InfoChip(
icon: Icons.route,
label: '${tour.distanceKm.toStringAsFixed(1)} km'),
_InfoChip(
icon: _transportIcon(tour.recommendedTransport),
label: l10n.transport(tour.recommendedTransport.apiValue),
),
_InfoChip(icon: Icons.headphones, label: l10n.t('audio')),
_InfoChip(icon: Icons.article_outlined, label: l10n.t('text')),
if (tour.offlineReady)
_InfoChip(
icon: Icons.offline_pin_outlined, label: l10n.t('offline')),
]),
const SizedBox(height: 18),
Container(
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: AppColors.softRed,
borderRadius: BorderRadius.circular(20),
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Icon(
_transportIcon(tour.recommendedTransport),
color: AppColors.heartRed,
size: 28,
),
const SizedBox(width: 12),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'${l10n.t('mobility')}: ${l10n.transport(tour.recommendedTransport.apiValue)}',
style: const TextStyle(fontWeight: FontWeight.w900),
),
const SizedBox(height: 4),
Text(
tour.transportNote ?? l10n.t('recommendedRoute'),
style: const TextStyle(color: AppColors.mutedInk),
),
if (tour.supportedTransportModes.length > 1) ...[
const SizedBox(height: 7),
Text(
l10n.tf('alsoSuitable', {
'modes': tour.supportedTransportModes
.where((m) => m != tour.recommendedTransport)
.map((m) => l10n.transport(m.apiValue))
.join(', ')
}),
style: const TextStyle(fontSize: 12),
),
],
],
),
),
],
),
),
const SizedBox(height: 28),
Text(l10n.t('routeLabel'),
style: Theme.of(context)
.textTheme
.titleLarge
?.copyWith(fontWeight: FontWeight.w800)),
const SizedBox(height: 12),
TourMap(tour: tour, height: 300),
if (ad != null) ...[
const SizedBox(height: 18),
SponsoredBanner(
campaign: ad, compact: true, placement: 'tour_detail_banner'),
],
const SizedBox(height: 28),
Text('${tour.stops.length} ${l10n.t('stops')}',
style: Theme.of(context)
.textTheme
.titleLarge
?.copyWith(fontWeight: FontWeight.w800)),
const SizedBox(height: 12),
for (var i = 0; i < tour.stops.length; i++) ...[
_StopRow(index: i + 1, stop: tour.stops[i], languageCode: lang),
if (i < tour.stops.length - 1) const SizedBox(height: 10),
],
],
),
bottomNavigationBar: SafeArea(
minimum: const EdgeInsets.all(16),
child: FilledButton.icon(
onPressed: () async {
await AnalyticsService.instance.tourStart(
tourId: tour.id,
category: tour.category,
stopCount: tour.stops.length,
);
if (!context.mounted) return;
Navigator.of(context).push(
MaterialPageRoute(builder: (_) => GuidePage(tour: tour)),
);
},
icon: const Icon(Icons.play_arrow_rounded),
label: Text(l10n.t('startTour')),
),
),
),
);
}
}
IconData _transportIcon(TransportMode mode) => switch (mode) {
TransportMode.walking => Icons.directions_walk_rounded,
TransportMode.bicycle => Icons.directions_bike_rounded,
TransportMode.carMotorcycle => Icons.directions_car_rounded,
TransportMode.publicTransit => Icons.directions_bus_rounded,
};
class _InfoChip extends StatelessWidget {
const _InfoChip({required this.icon, required this.label});
final IconData icon;
final String label;
@override
Widget build(BuildContext context) =>
Chip(avatar: Icon(icon, size: 18), label: Text(label));
}
class _StopRow extends StatelessWidget {
const _StopRow({
required this.index,
required this.stop,
required this.languageCode,
});
final int index;
final TourStop stop;
final String languageCode;
@override
Widget build(BuildContext context) {
final l10n = AppLocalizations.of(context);
final poi = AppDataScope.of(context).poiById(stop.poiId);
final location = LocationScope.of(context);
final distanceMeters = location.distanceMetersTo(
poi.latitude,
poi.longitude,
);
final walkingMinutes = location.walkingMinutesTo(
poi.latitude,
poi.longitude,
);
return Material(
color: Colors.white,
borderRadius: BorderRadius.circular(20),
child: InkWell(
borderRadius: BorderRadius.circular(20),
onTap: () => Navigator.of(context).push(
MaterialPageRoute(
builder: (_) => PoiDetailPage(poi: poi),
),
),
child: Container(
padding: const EdgeInsets.all(10),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
border: Border.all(color: AppColors.line),
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Stack(
clipBehavior: Clip.none,
children: [
RemoteImage(
url: poi.imageUrl,
width: 94,
height: 94,
fit: BoxFit.cover,
borderRadius: BorderRadius.circular(16),
fallbackIcon: Icons.location_city_rounded,
fallbackIconSize: 34,
semanticLabel: poi.title.get(languageCode),
),
Positioned(
left: -5,
top: -5,
child: Container(
width: 30,
height: 30,
alignment: Alignment.center,
decoration: BoxDecoration(
color: AppColors.heartRed,
shape: BoxShape.circle,
border: Border.all(color: Colors.white, width: 2),
),
child: Text(
'$index',
style: const TextStyle(
color: Colors.white,
fontWeight: FontWeight.w900,
fontSize: 13,
),
),
),
),
],
),
const SizedBox(width: 13),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
poi.title.get(languageCode),
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: const TextStyle(
fontWeight: FontWeight.w900,
fontSize: 16,
),
),
const SizedBox(height: 4),
Text(
poi.shortDescription.get(languageCode),
maxLines: 2,
overflow: TextOverflow.ellipsis,
style: const TextStyle(
color: AppColors.mutedInk,
height: 1.3,
),
),
if (distanceMeters != null) ...[
const SizedBox(height: 7),
ProximityLabel(
distanceMeters: distanceMeters,
walkingMinutes: walkingMinutes,
compact: true,
),
],
const SizedBox(height: 8),
Wrap(
spacing: 10,
runSpacing: 4,
children: [
if (stop.walkMinutesFromPrevious > 0)
_StopMeta(
icon: Icons.directions_walk_rounded,
label:
'${stop.walkMinutesFromPrevious} ${l10n.t('minutesShort')}',
),
if (poi.hasAffiliateTicket)
_StopMeta(
icon: Icons.confirmation_number_outlined,
label: l10n.t('ticketLabel'),
),
],
),
],
),
),
const SizedBox(width: 4),
const Padding(
padding: EdgeInsets.only(top: 33),
child: Icon(
Icons.chevron_right_rounded,
color: AppColors.mutedInk,
),
),
],
),
),
),
);
}
}
class _StopMeta extends StatelessWidget {
const _StopMeta({required this.icon, required this.label});
final IconData icon;
final String label;
@override
Widget build(BuildContext context) {
return Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(icon, size: 15, color: AppColors.heartRed),
const SizedBox(width: 4),
Text(
label,
style: const TextStyle(
color: AppColors.mutedInk,
fontSize: 12,
fontWeight: FontWeight.w700,
),
),
],
);
}
}