import 'package:flutter/material.dart';
import 'package:flutter_html/flutter_html.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 bodyHtml = notif['body'] as String? ?? '';

    return Scaffold(
      appBar: AppBar(
        title: const Text('Notification Detail'),
      ),
      body: SingleChildScrollView(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            // Header block
            Container(
              padding: const EdgeInsets.symmetric(vertical: 32, horizontal: 24),
              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),
                  Text(
                    title,
                    textAlign: TextAlign.center,
                    style: Theme.of(context).textTheme.headlineMedium?.copyWith(
                          color: AppTheme.onSurface,
                          fontSize: 20,
                        ),
                  ),
                ],
              ),
            ),

            // Full image (authenticated)
            if (notif['has_image'] == true) ...[
              const SizedBox(height: 16),
              Padding(
                padding: const EdgeInsets.symmetric(horizontal: 24),
                child: ClipRect(
                  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: 20),

            // Message label
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 24),
              child: Text(
                'MESSAGE',
                style: Theme.of(context).textTheme.labelLarge?.copyWith(
                      color: AppTheme.onSurfaceVariant,
                      letterSpacing: 1.2,
                    ),
              ),
            ),
            const SizedBox(height: 8),
            const Padding(
              padding: EdgeInsets.symmetric(horizontal: 24),
              child: Divider(
                color: AppTheme.surfaceContainerHighest,
                thickness: 2,
                height: 2,
              ),
            ),
            const SizedBox(height: 8),

            // Rich HTML body
            bodyHtml.isEmpty
                ? Padding(
                    padding: const EdgeInsets.all(24),
                    child: Text(
                      'No additional details.',
                      style: Theme.of(context).textTheme.bodyLarge?.copyWith(
                            color: AppTheme.onSurfaceVariant,
                            fontStyle: FontStyle.italic,
                          ),
                    ),
                  )
                : Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 12),
                    child: Html(
                      data: bodyHtml,
                      style: {
                        'body': Style(
                          color: AppTheme.onSurface,
                          fontFamily: 'Manrope',
                          fontSize: FontSize(15),
                          lineHeight: const LineHeight(1.7),
                        ),
                        'p': Style(margin: Margins.only(bottom: 12)),
                        'h1': Style(
                          color: AppTheme.onSurface,
                          fontSize: FontSize(22),
                          fontWeight: FontWeight.bold,
                        ),
                        'h2': Style(
                          color: AppTheme.onSurface,
                          fontSize: FontSize(18),
                          fontWeight: FontWeight.bold,
                        ),
                        'a': Style(color: AppTheme.secondary),
                      },
                    ),
                  ),

            const SizedBox(height: 40),
          ],
        ),
      ),
    );
  }
}