import 'package:flutter/material.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:shadcn_ui/shadcn_ui.dart';

import '../../../common/widgets/prototype_ui.dart';
import '../application/news_controller.dart';

class NewsDetailPage extends ConsumerWidget {
  const NewsDetailPage({super.key, this.id});

  final String? id;

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final news = ref.watch(newsControllerProvider).items;
    final item = news.firstWhere(
      (item) => id == null || item.id == id,
      orElse: () => news.first,
    );
    final cs = ShadTheme.of(context).colorScheme;

    return Scaffold(
      backgroundColor: const Color(0xFFFBFAF7),
      appBar: AppBar(
        backgroundColor: const Color(0xFFFBFAF7),
        surfaceTintColor: Colors.transparent,
        elevation: 0,
        scrolledUnderElevation: 0,
        centerTitle: true,
        leading: IconButton(
          onPressed: () => Navigator.of(context).pop(),
          icon: const Icon(Icons.chevron_left, size: 20),
        ),
        title: Text(
          item.metal.label,
          style: const TextStyle(fontSize: 17, fontWeight: FontWeight.w600),
        ),
      ),
      body: SafeArea(
        child: ListView(
          padding: const EdgeInsets.fromLTRB(0, 8, 0, 24),
          children: [
            PrototypeFrame(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: [
                  const SizedBox(height: 4),
                  PrototypeCard(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Row(
                          children: [
                            Container(
                              padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 3),
                              decoration: BoxDecoration(
                                color: item.metal.color.withValues(alpha: 0.12),
                                borderRadius: BorderRadius.circular(999),
                              ),
                              child: Text(
                                item.metal.label,
                                style: TextStyle(
                                  color: item.metal.color,
                                  fontWeight: FontWeight.w700,
                                  fontSize: 12,
                                ),
                              ),
                            ),
                            const SizedBox(width: 8),
                            Text(
                              '${item.source} · ${_timeLabel(item.publishedAt)}',
                              style: TextStyle(fontSize: 12, color: cs.mutedForeground),
                            ),
                          ],
                        ),
                        const SizedBox(height: 12),
                        Text(
                          item.title,
                          style: const TextStyle(fontSize: 18, fontWeight: FontWeight.w700, height: 1.4),
                        ),
                        const SizedBox(height: 12),
                        for (final paragraph in item.body) ...[
                          Text(
                            paragraph,
                            style: TextStyle(
                              fontSize: 15,
                              height: 1.7,
                              color: cs.foreground,
                            ),
                          ),
                          const SizedBox(height: 12),
                        ],
                        Text(
                          '本资讯为原型示意内容，信息整理 · 非投资建议。',
                          style: TextStyle(fontSize: 12, color: cs.mutedForeground, height: 1.5),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

String _timeLabel(DateTime value) {
  return '${value.hour.toString().padLeft(2, '0')}:${value.minute.toString().padLeft(2, '0')}';
}