/// Detail route opened from a list card, with a [Hero] matching the list badge.
library;

import 'package:flutter/material.dart';

import '../models/item.dart';
import '../utils/helpers.dart';
import '../widgets/item_hero_badge.dart';
import '../widgets/responsive_body.dart';

class ItemDetailScreen extends StatelessWidget {
  const ItemDetailScreen({
    super.key,
    required this.item,
    required this.heroTag,
  });

  final Item item;
  final String heroTag;

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    final colors = theme.colorScheme;

    return Scaffold(
      appBar: AppBar(title: const Text('Details')),
      body: ResponsiveBody(
        child: ListView(
          children: [
            const SizedBox(height: 16),
            Center(
              child: ItemHeroBadge(item: item, size: 96, heroTag: heroTag),
            ),
            const SizedBox(height: 24),
            Text(item.title, style: theme.textTheme.headlineMedium),
            const SizedBox(height: 12),
            Wrap(
              spacing: 8,
              runSpacing: 8,
              children: [
                Chip(
                  avatar: Icon(
                    item.category.icon,
                    size: 16,
                    color: item.category.accent,
                  ),
                  label: Text(item.category.label),
                  side: BorderSide(
                    color: item.category.accent.withValues(alpha: 0.4),
                  ),
                ),
                Chip(
                  avatar: Icon(
                    Icons.calendar_today_outlined,
                    size: 16,
                    color: colors.onSurfaceVariant,
                  ),
                  label: Text(formatDate(item.createdAt)),
                ),
              ],
            ),
            const SizedBox(height: 20),
            Text('Summary', style: theme.textTheme.titleMedium),
            const SizedBox(height: 8),
            Text(item.subtitle, style: theme.textTheme.bodyLarge),
            const SizedBox(height: 20),
            Text('Description', style: theme.textTheme.titleMedium),
            const SizedBox(height: 8),
            Text(item.description, style: theme.textTheme.bodyLarge),
            const SizedBox(height: 32),
            FilledButton.tonal(
              onPressed: () => Navigator.of(context).pop(),
              child: const Text('Back to list'),
            ),
            const SizedBox(height: 24),
          ],
        ),
      ),
    );
  }
}