import 'package:flutter/material.dart';
import 'package:video_player/video_player.dart';
import '../models/chat_message.dart';
import '../services/chat_service.dart';

class ChatScreen extends StatefulWidget {
  const ChatScreen({Key? key}) : super(key: key);

  @override
  State<ChatScreen> createState() => _ChatScreenState();
}

class _ChatScreenState extends State<ChatScreen> {
  final TextEditingController _textController = TextEditingController();
  final List<ChatMessage> _messages = [];
  final ScrollController _scrollController = ScrollController();

  late VideoPlayerController _videoController;
  bool _isVideoInitialized = false;
  bool _isLoading = false;

  @override
  void initState() {
    super.initState();
    _initializeVideo();
    _addInitialMessage();

  }

  void _initializeVideo() {
    _videoController =
    VideoPlayerController.asset('assets/videos/basic_img.mp4')
      ..initialize()
          .then((_) {
        _videoController.setLooping(true);
        _videoController.setVolume(0.0);
        _videoController.play();
        setState(() {
          _isVideoInitialized = true;
        });
      })
          .catchError((error) {
        print('비디오 로드 오류: $error');
      });
  }

  void _addInitialMessage() {
    setState(() {
      _messages.add(
        ChatMessage(
          text: '상태 분석이 완료되었습니다.\n무엇을 도와드릴까요?',
          isUser: false,
          timestamp: DateTime.now(),
        ),
      );
    });
  }

  void _sendMessage(String text) async {
    if (text.isEmpty) return;

    // 사용자 메시지 추가
    setState(() {
      _messages.add(
        ChatMessage(text: text, isUser: true, timestamp: DateTime.now()),
      );
      _isLoading = true;
    });

    _textController.clear();
    _scrollToBottom();

    // 서버로 메시지 전송
    try {
      final response = await ChatService.sendMessage(text);

      setState(() {
        _messages.add(
          ChatMessage(
            text: response,
            isUser: false,
            timestamp: DateTime.now(),
          ),
        );
        _isLoading = false;
      });
      _scrollToBottom();
    } catch (e) {
      print('메시지 전송 오류: $e');
      setState(() {
        _messages.add(
          ChatMessage(
            text: '오류가 발생했습니다. 다시 시도해주세요.',
            isUser: false,
            timestamp: DateTime.now(),
          ),
        );
        _isLoading = false;
      });
      _scrollToBottom();
    }
  }

  void _scrollToBottom() {
    Future.delayed(const Duration(milliseconds: 100), () {
      _scrollController.animateTo(
        _scrollController.position.maxScrollExtent,
        duration: const Duration(milliseconds: 300),
        curve: Curves.easeOut,
      );
    });
  }

  void _sendQuickQuestion(String question) {
    _textController.text = question;
    _sendMessage(question);
  }

  @override
  void dispose() {
    _textController.dispose();
    _scrollController.dispose();
    _videoController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.transparent,
      body: Stack(
        children: [
          Container(
            decoration: BoxDecoration(
              image: DecorationImage(
                image: AssetImage('assets/images/background1.png'),
                fit: BoxFit.cover,
              ),
            ),
            child: Center(
              child: Container(
                margin: const EdgeInsets.all(30), // 메인 컨테이너 여백 조정
                decoration: BoxDecoration(
                  color: Colors.white.withOpacity(0.8), // 투명도 넣기
                  borderRadius: BorderRadius.circular(36), // 모서리 둥글게
                  // border: Border.all(color: Color(0xFFE0E0E0), width: 1),
                ),
                child: Row(
                  children: [
                    // 좌측 캐릭터 영역 (50%)
                    Expanded(
                      flex: 5,
                      child: Container(
                        margin: const EdgeInsets.fromLTRB(30, 0, 30, 50),
                        // decoration: BoxDecoration(
                        //   color: Colors.white,
                        //   borderRadius: BorderRadius.circular(30),
                        //   border: Border.all(
                        //     color: Color(0xFFE0E0E0),
                        //     width: 1,
                        //   ),
                        // ),
                        child: Column(
                          children: [
                            // 헤더
                            Padding(
                              padding: const EdgeInsets.fromLTRB(30, 66, 30, 30),
                              child: Row(
                                children: [
                                  Container(
                                    width: 44,
                                    height: 44,
                                    decoration: BoxDecoration(
                                      color: Color(0xFFC8E6C9),
                                      borderRadius: BorderRadius.circular(12),
                                    ),
                                    child: const Center(
                                      child: Text(
                                        '🌱',
                                        style: TextStyle(fontSize: 28),
                                      ),
                                    ),
                                  ),
                                  const SizedBox(width: 16),
                                  Column(
                                    crossAxisAlignment:
                                    CrossAxisAlignment.start,
                                    children: [
                                      const Text(
                                        'Smart Garden',
                                        style: TextStyle(
                                          fontSize: 20,
                                          fontWeight: FontWeight.w600,
                                          color: Color(0xFF212121),
                                        ),
                                      ),
                                      Text(
                                        '스마트가든 챗봇',
                                        style: TextStyle(
                                          fontSize: 16,
                                          color: Color(0xFF757575),
                                        ),
                                      ),
                                    ],
                                  ),
                                ],
                              ),
                            ),
                            // 캐릭터 영역
                            Expanded(
                              child: Container(
                                margin: const EdgeInsets.symmetric(
                                  horizontal: 30,
                                ),
                                decoration: BoxDecoration(
                                  color: Color(0xFFF5F5F5),
                                  borderRadius: BorderRadius.circular(30),
                                  boxShadow: [
                                    BoxShadow(
                                      color: Colors.black.withOpacity(0.1), // 그림자 색상 및 투명도
                                      blurRadius: 15, // 그림자가 퍼지는 정도 (숫자가 클수록 부드러움)
                                      offset: const Offset(0, 5), // 그림자 위치 (x: 가로, y: 세로)
                                    ),
                                  ],
                                ),
                                child: _isVideoInitialized
                                    ? ClipRRect(
                                  borderRadius: BorderRadius.circular(30),
                                  child: AspectRatio(
                                    aspectRatio: _videoController
                                        .value
                                        .aspectRatio,
                                    child: VideoPlayer(_videoController),
                                  ),
                                )
                                    : Column(
                                  mainAxisAlignment:
                                  MainAxisAlignment.center,
                                  children: [
                                    Container(
                                      width: 180,
                                      height: 180,
                                      decoration: BoxDecoration(
                                        color: Color(0xFFF1F8E9),
                                        borderRadius:
                                        BorderRadius.circular(12),
                                        border: Border.all(
                                          color: Color(0xFFC8E6C9),
                                          width: 1,
                                        ),
                                      ),
                                      child: const Center(
                                        child: Column(
                                          mainAxisAlignment:
                                          MainAxisAlignment.center,
                                          children: [
                                            CircularProgressIndicator(
                                              color: Color(0xFF81C784),
                                            ),
                                            SizedBox(height: 20),
                                            Text(
                                              '비디오 로딩 중...',
                                              style: TextStyle(
                                                fontSize: 12,
                                                color: Color(0xFF757575),
                                              ),
                                            ),
                                          ],
                                        ),
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                            ),
                            const SizedBox(height: 16),
                            // 캐릭터 정보 + 설명 문구
                            // 1. 가장 바깥쪽 박스 추가
                            Container(
                              margin: const EdgeInsets.fromLTRB(30, 0, 30, 0),
                              padding: const EdgeInsets.all(24),
                              decoration: BoxDecoration(
                                color: Colors.white.withOpacity(0.9),
                                borderRadius: BorderRadius.circular(30),
                                //border: Border.all(color: const Color(0xFFE0E0E0), width: 1),
                                boxShadow: [
                                  BoxShadow(
                                    color: Colors.black.withOpacity(0.1), // 그림자 색상 (투명도 조절)
                                    blurRadius: 10, // 그림자가 퍼지는 정도
                                    offset: const Offset(0, 4), // 그림자의 위치 (x, y) - 아래쪽으로 살짝 그림자
                                  ),
                                ],
                              ),
                              child: Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  Row(
                                    children: [
                                      Container(
                                        width: 48,
                                        height: 48,
                                        decoration: BoxDecoration(
                                          color: const Color(0xFFC8E6C9),
                                          borderRadius: BorderRadius.circular(24),
                                        ),
                                        child: ClipRRect(
                                          borderRadius: BorderRadius.circular(24),
                                          child: Image.asset('assets/images/profile.png', fit: BoxFit.cover),
                                        ),
                                      ),
                                      const SizedBox(width: 12),
                                      const Column(
                                        crossAxisAlignment: CrossAxisAlignment.start,
                                        children: [
                                          Text('푸미', style: TextStyle(fontSize: 20, fontWeight: FontWeight.w600, color: Color(0xFF212121))),
                                          Text('스마트가든 AI 가이드', style: TextStyle(fontSize: 14, color: Color(0xFF757575))),
                                        ],
                                      ),
                                    ],
                                  ),
                                  const SizedBox(height: 20),

                                  Container(
                                    width: double.infinity,
                                    padding: const EdgeInsets.all(16),
                                    decoration: BoxDecoration(
                                      color: const Color(0xFFF1F8E9),
                                      borderRadius: BorderRadius.circular(12),
                                      //border: Border.all(color: const Color(0xFFC8E6C9), width: 1),
                                      boxShadow: [
                                        BoxShadow(
                                          color: Colors.black.withOpacity(0.12), // 그림자 색상 및 투명도
                                          blurRadius: 15, // 그림자가 퍼지는 정도 (숫자가 클수록 부드러움)
                                          offset: const Offset(0, 5), // 그림자 위치 (x: 가로, y: 세로)
                                        ),
                                      ],
                                    ),
                                    child: const Text(
                                      '안녕하세요!\n스마트가든의 식물들이 건강하게 자랄 수 있도록 도와드릴게요.\n궁금한 점을 언제든 물어보세요!',
                                      style: TextStyle(fontSize: 14, color: Colors.black, height: 1.6),
                                    ),
                                  ),
                                ],
                              ),
                            ),
                          ],
                        ),
                      ),
                    ),
                    // 우측 채팅 영역 (50%)
                    Expanded(
                      flex: 5,
                      child: Container(
                        margin: const EdgeInsets.all(50),
                        decoration: BoxDecoration(
                          color: Color(0xFFfbfdf8),
                          borderRadius: BorderRadius.circular(30),
                          // border: Border.all(
                          //   color: Color(0xFFE0E0E0),
                          //   width: 1,
                          // ),
                          boxShadow: [
                            BoxShadow(
                              color: Colors.black.withOpacity(0.1), // 그림자 색상 (투명도 조절)
                              blurRadius: 10, // 그림자가 퍼지는 정도
                              offset: const Offset(0, 0), // 그림자 위치 (x: 가로, y: 세로)
                            ),
                          ],
                        ),
                        child: Column(
                          children: [
                            // 헤더
                            Container(
                              padding: const EdgeInsets.all(20),
                              decoration: BoxDecoration(),
                              child: Row(
                                children: [
                                  const Icon(
                                    Icons.eco,
                                    color: Color(0xFF81C784),
                                    size: 24,
                                  ),
                                  const SizedBox(width: 12),
                                  const Text(
                                    '푸미 일지',
                                    style: TextStyle(
                                      fontSize: 22,
                                      fontWeight: FontWeight.w600,
                                      color: Color(0xFF212121),
                                    ),
                                    textAlign: TextAlign.left,
                                  ),
                                ],
                              ),
                            ),
                            // 채팅 메시지 영역
                            Expanded(
                              child: Container(
                                margin: const EdgeInsets.symmetric(
                                  horizontal: 16,
                                ),
                                // decoration: BoxDecoration(
                                //   image: DecorationImage(
                                //     image: AssetImage(
                                //       'assets/images/chat_img.png',
                                //     ),
                                //     // ← 배경 이미지 추가
                                //     fit: BoxFit.cover,
                                //     colorFilter: ColorFilter.mode(
                                //       Colors.white.withOpacity(0.9),
                                //       // 채팅 배경 이미지 투명도 조정
                                //       BlendMode.lighten,
                                //     ),
                                //   ),
                                //   color: Colors.white.withOpacity(0.5),
                                //   // 채팅창 투명도
                                //   borderRadius: BorderRadius.circular(30),
                                //   border: Border.all(
                                //     color: Color(0xFFE0E0E0),
                                //     width: 0.5,
                                //   ),
                                //   boxShadow: [
                                //     BoxShadow(
                                //       color: Colors.black.withOpacity(0.8), // 그림자 색상 (투명도 조절)
                                //       blurRadius: 10, // 그림자가 퍼지는 정도
                                //       offset: const Offset(0, 0), // 그림자 위치 (x: 가로, y: 세로)
                                //     ),
                                //   ],
                                // ),
                                decoration: BoxDecoration(
                                  // 배경 이미지 설정
                                  image: DecorationImage(
                                    image: AssetImage('assets/images/chat_img.png'),
                                    fit: BoxFit.cover,
                                    colorFilter: ColorFilter.mode(
                                      Colors.white.withOpacity(0.9), // 이미지 투명도
                                      BlendMode.lighten,
                                    ),
                                  ),
                                  borderRadius: BorderRadius.circular(30),
                                  // 테두리(border) 제거됨

                                  // 부드러운 그림자 추가
                                  boxShadow: [
                                    BoxShadow(
                                      color: Colors.black.withOpacity(0.1), // 아주 연한 그림자
                                      blurRadius: 15, // 부드럽게 퍼짐
                                      offset: const Offset(0, 5), // 아래쪽으로 은은하게
                                    ),
                                  ],
                                ),
                                child: ListView.builder(
                                  controller: _scrollController,
                                  padding: const EdgeInsets.all(16),
                                  itemCount: _messages.length,
                                  itemBuilder: (context, index) {
                                    final message = _messages[index];
                                    return _ChatBubble(message: message);
                                  },
                                ),
                              ),
                            ),
                            // 자주하는 질문 버튼들을 감싸는 컨테이너
                            Container(
                              margin: const EdgeInsets.fromLTRB(16, 12, 16, 12),
                              padding: const EdgeInsets.all(12),
                              decoration: BoxDecoration(
                                color: Color(0xFFecf6df).withOpacity(0.8), // 배경
                                borderRadius: BorderRadius.circular(22),
                              ),
                              child: Row(
                                children: [
                                  // 온도 정보
                                  Expanded(
                                    child: Container(
                                      decoration: BoxDecoration(
                                        color: Colors.white, // ← 흰색
                                        borderRadius: BorderRadius.circular(25),

                                      ),
                                      child: Material(
                                        color: Colors.transparent,
                                        child: InkWell(
                                          onTap: () =>
                                              _sendQuickQuestion('현재 온도는?'),
                                          borderRadius: BorderRadius.circular(
                                            25,
                                          ),
                                          child: Padding(
                                            padding: const EdgeInsets.symmetric(
                                              horizontal: 12,
                                              vertical: 12,
                                            ),
                                            child: Row(
                                              mainAxisAlignment:
                                              MainAxisAlignment.center,
                                              children: [
                                                Container(
                                                  width: 32,
                                                  height: 32,
                                                  decoration: BoxDecoration(
                                                    borderRadius:
                                                    BorderRadius.circular(
                                                      6,
                                                    ),
                                                  ),
                                                  child: const Center(
                                                    child: Icon(
                                                      Icons.thermostat,
                                                      color: Color(0xFF4CAF50),
                                                      size: 25,
                                                    ),
                                                  ),
                                                ),
                                                const SizedBox(width: 8),
                                                Text(
                                                  '온도 정보',
                                                  style: TextStyle(
                                                    fontSize: 18,
                                                    fontWeight: FontWeight.w600,
                                                    color: Colors.black,
                                                  ),
                                                ),
                                              ],
                                            ),
                                          ),
                                        ),
                                      ),
                                    ),
                                  ),
                                  const SizedBox(width: 8),
                                  // 습도 정보
                                  Expanded(
                                    child: Container(
                                      decoration: BoxDecoration(
                                        color: Colors.white, // ← 흰색
                                        borderRadius: BorderRadius.circular(25),

                                      ),
                                      child: Material(
                                        color: Colors.transparent,
                                        child: InkWell(
                                          onTap: () =>
                                              _sendQuickQuestion('현재 습도는?'),
                                          borderRadius: BorderRadius.circular(
                                            25,
                                          ),
                                          child: Padding(
                                            padding: const EdgeInsets.symmetric(
                                              horizontal: 12,
                                              vertical: 12,
                                            ),
                                            child: Row(
                                              mainAxisAlignment:
                                              MainAxisAlignment.center,
                                              children: [
                                                Container(
                                                  width: 32,
                                                  height: 32,
                                                  decoration: BoxDecoration(
                                                    borderRadius:
                                                    BorderRadius.circular(
                                                      6,
                                                    ),
                                                  ),
                                                  child: const Center(
                                                    child: Icon(
                                                      Icons.water_drop,
                                                      color: Color(0xFF4CAF50),
                                                      size: 25,
                                                    ),
                                                  ),
                                                ),
                                                const SizedBox(width: 8),
                                                Text(
                                                  '습도 정보',
                                                  style: TextStyle(
                                                    fontSize: 18,
                                                    fontWeight: FontWeight.w600,
                                                    color: Color(0xFF000000),
                                                  ),
                                                ),
                                              ],
                                            ),
                                          ),
                                        ),
                                      ),
                                    ),
                                  ),
                                  const SizedBox(width: 8),
                                  // 물 주기
                                  Expanded(
                                    child: Container(
                                      decoration: BoxDecoration(
                                        color: Colors.white, // ← 흰색
                                        borderRadius: BorderRadius.circular(25),
                                      ),
                                      child: Material(
                                        color: Colors.transparent,
                                        child: InkWell(
                                          onTap: () =>
                                              _sendQuickQuestion('물을 주세요'),
                                          borderRadius: BorderRadius.circular(
                                            25,
                                          ),
                                          child: Padding(
                                            padding: const EdgeInsets.symmetric(
                                              horizontal: 12,
                                              vertical: 12,
                                            ),
                                            child: Row(
                                              mainAxisAlignment:
                                              MainAxisAlignment.center,
                                              children: [
                                                Container(
                                                  width: 32,
                                                  height: 32,
                                                  decoration: BoxDecoration(
                                                    borderRadius:
                                                    BorderRadius.circular(
                                                      6,
                                                    ),
                                                  ),
                                                  child: const Center(
                                                    child: Icon(
                                                      Icons.waves,
                                                      color: Color(0xFF4CAF50),
                                                      size: 25,
                                                    ),
                                                  ),
                                                ),
                                                const SizedBox(width: 8),
                                                Text(
                                                  '물 주기',
                                                  style: TextStyle(
                                                    fontSize: 18,
                                                    fontWeight: FontWeight.w600,
                                                    color: Color(0xFF000000),
                                                  ),
                                                ),
                                              ],
                                            ),
                                          ),
                                        ),
                                      ),
                                    ),
                                  ),
                                ],
                              ),
                            ),
                            // 입력 필드 + 전송 버튼 (같은 줄)
                            Padding(
                              padding: const EdgeInsets.fromLTRB(16, 0, 16, 16),
                              child: Row(
                                children: [
                                  // 입력 필드
                                  Expanded(
                                    child: Container(
                                      decoration: BoxDecoration(
                                        color: Colors.white,
                                        borderRadius: BorderRadius.circular(22),
                                        // border: Border.all(
                                        //   color: Color(0xFFE0E0E0),
                                        //   width: 0.5,
                                        // ),
                                        boxShadow: [
                                          BoxShadow(
                                            color: Colors.black.withOpacity(0.1), // 그림자 색상(연한 검정)
                                            blurRadius: 8,                        // 그림자가 퍼지는 정도
                                            offset: const Offset(0, 2),           // 그림자 위치 (x: 0, y: 2) - 아래로 살짝
                                          ),
                                        ],
                                      ),
                                      child: TextField(
                                        controller: _textController,
                                        onSubmitted: (value) {
                                          _sendMessage(
                                            _textController.text,
                                          ); // 엔터로 전송
                                        },
                                        decoration: InputDecoration(
                                          hintText: '메시지를 입력하세요...',
                                          hintStyle: TextStyle(
                                            fontSize: 16,
                                            color: Color(0xFF9E9E9E),
                                          ),
                                          border: InputBorder.none,
                                          contentPadding:
                                          const EdgeInsets.symmetric(
                                            horizontal: 16,
                                            vertical: 22,
                                          ),
                                        ),
                                        style: const TextStyle(fontSize: 20),
                                        maxLines: 1,
                                      ),
                                    ),
                                  ),
                                  const SizedBox(width: 12),
                                  // 전송 버튼
                                  SizedBox(
                                    height: 60,
                                    width: 60,
                                    child: ElevatedButton(
                                      onPressed: () => _sendMessage(_textController.text),
                                      style: ElevatedButton.styleFrom(
                                        backgroundColor: const Color(0xFF81C784),
                                        elevation: 6, // 그림자 깊이
                                        shadowColor: Colors.black.withOpacity(0.4), // 그림자 색상
                                        shape: RoundedRectangleBorder(
                                          borderRadius: BorderRadius.circular(100),
                                        ),
                                        padding: EdgeInsets.zero,
                                      ),
                                      child: ImageIcon(
                                        AssetImage('assets/images/send.png'),
                                        color: Colors.white,
                                        size: 28,
                                      ),
                                    ),
                                  ),
                                ],
                              ),
                            ),
                          ],
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
          // Layer 이미지 (화면 전체)
          IgnorePointer(
            child: Image.asset(
              'assets/images/layer_img1.png',
              fit: BoxFit.cover,
              width: double.infinity,
              height: double.infinity,
            ),
          ),
        ],
      ),
    );
  }
}

class _ChatBubble extends StatelessWidget {
  final ChatMessage message;

  const _ChatBubble({required this.message});

  String _formatTime(DateTime dateTime) {
    final hour = dateTime.hour;
    final minute = dateTime.minute;
    final period = hour >= 12 ? '오후' : '오전';
    final displayHour = hour > 12 ? hour - 12 : (hour == 0 ? 12 : hour);

    return '$period ${displayHour.toString().padLeft(2, '0')}:${minute.toString().padLeft(2, '0')}';
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(bottom: 30),
      child: Row(
        mainAxisAlignment: message.isUser
            ? MainAxisAlignment.end
            : MainAxisAlignment.start,
        children: [
          if (!message.isUser) ...[
            Container(
              width: 40,
              height: 40,
              decoration: BoxDecoration(
                color: Color(0xFFC8E6C9),
                borderRadius: BorderRadius.circular(20),
              ),
              child: ClipRRect(
                borderRadius: BorderRadius.circular(20),
                child: Image.asset(
                  'assets/images/profile.png',
                  fit: BoxFit.cover,
                ),
              ),
            ),
            const SizedBox(width: 10),
          ],
          Flexible(
            child: Row(
              mainAxisAlignment: message.isUser
                  ? MainAxisAlignment.end
                  : MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.end,
              children: [
                if (message.isUser)
                  Text(
                    _formatTime(message.timestamp),
                    style: TextStyle(fontSize: 12, color: Color(0xFF9E9E9E)),
                  ),
                if (message.isUser) const SizedBox(width: 8),
                Flexible(
                  child: Container(
                    padding: const EdgeInsets.symmetric(
                      horizontal: 16,
                      vertical: 10,
                    ),
                    decoration: BoxDecoration(
                      color: message.isUser
                          ? Color(0xFFecf6df)
                          : Colors.white,
                      borderRadius: BorderRadius.circular(8),
                      boxShadow: [
                        BoxShadow(
                          color: Colors.black.withOpacity(0.1),
                          blurRadius: 4,
                          offset: const Offset(0, 2),
                        ),
                      ],
                    ),
                    child: SelectableText(
                      message.text,
                      style: TextStyle(
                        fontSize: 20,
                        color: message.isUser
                            ? Colors.black
                            : Colors.black,
                        height: 1.4,
                      ),
                    ),
                  ),
                ),
                if (!message.isUser) const SizedBox(width: 8),
                if (!message.isUser)
                  Text(
                    _formatTime(message.timestamp),
                    style: TextStyle(fontSize: 12, color: Color(0xFF9E9E9E)),
                  ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}