import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import '../../../core/api/api_client.dart';

class ChatTranscriptScreen extends StatefulWidget {
  final String sessionId;

  const ChatTranscriptScreen({super.key, required this.sessionId});

  @override
  State<ChatTranscriptScreen> createState() => _ChatTranscriptScreenState();
}

class _ChatTranscriptScreenState extends State<ChatTranscriptScreen> {
  List<Map<String, dynamic>> _messages = [];
  List<Map<String, dynamic>> _closures = [];
  bool _loading = true;

  @override
  void initState() {
    super.initState();
    _loadTranscript();
  }

  Future<void> _loadTranscript() async {
    try {
      final api = context.read<ApiClient>();
      final response = await api.get('/api/shared/chat/${widget.sessionId}/transcript');
      final data = response['data'] as Map<String, dynamic>;
      setState(() {
        _messages = (data['messages'] as List<dynamic>).cast<Map<String, dynamic>>();
        _closures = (data['closures'] as List<dynamic>).cast<Map<String, dynamic>>();
        _loading = false;
      });
    } catch (_) {
      setState(() => _loading = false);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Transkrip Chat')),
      body: _loading
          ? const Center(child: CircularProgressIndicator())
          : ListView(
              padding: const EdgeInsets.all(16),
              children: [
                ..._messages.map((m) {
                  final isMe = m['sender_type'] == 'customer';
                  final time = DateTime.parse(m['created_at'] as String).toLocal();
                  return Align(
                    alignment: isMe ? Alignment.centerRight : Alignment.centerLeft,
                    child: Container(
                      margin: const EdgeInsets.symmetric(vertical: 4),
                      padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 10),
                      constraints: BoxConstraints(maxWidth: MediaQuery.of(context).size.width * 0.75),
                      decoration: BoxDecoration(
                        color: isMe ? Colors.blue.shade100 : Colors.grey.shade200,
                        borderRadius: BorderRadius.circular(16),
                      ),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.end,
                        children: [
                          Text(m['content'] as String, style: const TextStyle(fontSize: 15)),
                          const SizedBox(height: 4),
                          Text(
                            '${time.hour.toString().padLeft(2, '0')}:${time.minute.toString().padLeft(2, '0')}',
                            style: const TextStyle(fontSize: 10, color: Colors.grey),
                          ),
                        ],
                      ),
                    ),
                  );
                }),
                if (_closures.isNotEmpty) ...[
                  const Divider(height: 32),
                  const Text('Pesan Penutup', style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16)),
                  const SizedBox(height: 8),
                  ..._closures.map((c) => Card(
                    child: ListTile(
                      title: Text(c['user_type'] == 'customer' ? 'Kamu' : 'Bestie'),
                      subtitle: Text(c['message'] as String),
                    ),
                  )),
                ],
              ],
            ),
    );
  }
}