import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

import '../../design/pencil_theme.dart';
import '../../widgets/pencil_chrome.dart';
import '../report/report_screen.dart';

class GenerateResultScreen extends StatelessWidget {
  const GenerateResultScreen({
    super.key,
    required this.taskId,
    required this.resultUrl,
  });

  final String taskId;
  final String resultUrl;

  bool get _hasUrl =>
      resultUrl.startsWith('http://') || resultUrl.startsWith('https://');

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: const BoxDecoration(
        gradient: PencilTheme.yellowWhitePageGradient,
      ),
      child: Scaffold(
        backgroundColor: Colors.transparent,
        body: SafeArea(
          child: Column(
            children: [
              Padding(
                padding: const EdgeInsets.fromLTRB(2, 0, 14, 10),
                child: SizedBox(
                  height: 56,
                  child: Row(
                    children: [
                      PencilRoundBackButton(
                        onPressed: () {
                          Navigator.of(context)
                              .popUntil((r) => r.isFirst);
                        },
                      ),
                      Expanded(
                        child: Center(
                          child: Text(
                            'Done',
                            style: GoogleFonts.inter(
                              fontSize: 19,
                              fontWeight: FontWeight.w700,
                              fontStyle: FontStyle.italic,
                              color: PencilTheme.stone900,
                            ),
                          ),
                        ),
                      ),
                      const SizedBox(width: 44),
                    ],
                  ),
                ),
              ),
              Expanded(
                child: ListView(
                  padding: const EdgeInsets.all(20),
                  children: [
                    if (_hasUrl)
                      ClipRRect(
                        borderRadius: BorderRadius.circular(16),
                        child: AspectRatio(
                          aspectRatio: 3 / 4,
                          child: CachedNetworkImage(
                            imageUrl: resultUrl,
                            fit: BoxFit.cover,
                            progressIndicatorBuilder: (_, _, _) => const Center(
                              child: CircularProgressIndicator(),
                            ),
                            errorWidget: (_, _, _) =>
                                const Icon(Icons.broken_image),
                          ),
                        ),
                      )
                    else
                      Text(
                        'The result is not ready yet. Check History later.\nTask: $taskId',
                        style: GoogleFonts.inter(color: PencilTheme.stone600),
                      ),
                    const SizedBox(height: 24),
                    OutlinedButton.icon(
                      onPressed: () {
                        Navigator.of(context).push(
                          MaterialPageRoute<void>(
                            builder: (_) => ReportScreen(taskId: taskId),
                          ),
                        );
                      },
                      icon: const Icon(Icons.flag_outlined),
                      label: const Text('Report / feedback'),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}