import 'package:flutter/material.dart';
import '../theme/app_theme.dart';
import '../services/odoo_service.dart';

class NotificationDetailScreen extends StatelessWidget {
  final dynamic notif;

  const NotificationDetailScreen({super.key, required this.notif});

  @override
  Widget build(BuildContext context) {
    final title = notif['title'] as String? ?? 'Notice';
    final body = notif['body'] as String? ?? '';

    return Scaffold(
      appBar: AppBar(
        title: const Text('Notification Detail'),
      ),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(24.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            // Header icon block
            Container(
              padding: const EdgeInsets.symmetric(vertical: 32),
              color: AppTheme.surfaceContainerLow,
              child: Column(
                children: [
                  Container(
                    padding: const EdgeInsets.all(20),
                    decoration: BoxDecoration(
                      color: AppTheme.primary.withValues(alpha: 0.15),
                      shape: BoxShape.rectangle,
                    ),
                    child: const Icon(
                      Icons.campaign_outlined,
                      color: AppTheme.secondary,
                      size: 40,
                    ),
                  ),
                  const SizedBox(height: 20),
                  Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 24),
                    child: Text(
                      title,
                      textAlign: TextAlign.center,
                      style:
                          Theme.of(context).textTheme.headlineMedium?.copyWith(
                                color: AppTheme.onSurface,
                                fontSize: 20,
                              ),
                    ),
                  ),
                ],
              ),
            ),

            if (notif['has_image'] == true) ...[
              const SizedBox(height: 24),
              ClipRRect(
                borderRadius: BorderRadius.circular(8),
                child: Image.network(
                  OdooService().notificationImageUrl(notif['id'] as int),
                  headers: {
                    'Cookie': OdooService().sessionCookie,
                  },
                  fit: BoxFit.cover,
                  loadingBuilder: (context, child, loadingProgress) {
                    if (loadingProgress == null) return child;
                    return Container(
                      height: 200,
                      color: AppTheme.surfaceContainerLow,
                      child: const Center(child: CircularProgressIndicator()),
                    );
                  },
                  errorBuilder: (context, error, stackTrace) {
                    return Container(
                      height: 150,
                      color: AppTheme.surfaceContainerLow,
                      child: const Center(
                        child: Icon(Icons.broken_image_outlined, size: 48, color: AppTheme.onSurfaceVariant),
                      ),
                    );
                  },
                ),
              ),
            ],

            const SizedBox(height: 24),

            // Body label
            Text(
              'Message',
              style: Theme.of(context).textTheme.labelLarge?.copyWith(
                    color: AppTheme.onSurfaceVariant,
                    letterSpacing: 1.2,
                  ),
            ),
            const SizedBox(height: 8),

            // Divider line (editorial style)
            const Divider(
              color: AppTheme.surfaceContainerHighest,
              thickness: 2,
              height: 2,
            ),
            const SizedBox(height: 16),

            // Body text
            body.isEmpty
                ? Text(
                    'No additional details.',
                    style: Theme.of(context).textTheme.bodyLarge?.copyWith(
                          color: AppTheme.onSurfaceVariant,
                          fontStyle: FontStyle.italic,
                        ),
                  )
                : Text(
                    body,
                    style: Theme.of(context).textTheme.bodyLarge?.copyWith(
                          color: AppTheme.onSurface,
                          height: 1.7,
                        ),
                  ),
          ],
        ),
      ),
    );
  }
}