import React, { useState, useEffect, useRef } from 'react';
import { X, Send, MessageSquare, User, Loader2, Calendar, MapPin, Download } from 'lucide-react';
import { io } from 'socket.io-client';

interface Comment {
  id: string;
  userName: string;
  content: string;
  createdAt: string;
  userId: string;
}

interface PublicPhotoModalProps {
  isOpen: boolean;
  onClose: () => void;
  photo: {
    id: string;
    imageUrl: string;
    originalUrl?: string;
    capturedAt: string;
    metadata?: {
      lat?: number;
      lng?: number;
    };
    uploader?: {
      id: string;
      name: string;
    };
  };
  photoGroup?: any[];
  onSelectPhoto?: (photo: any) => void;
  onLoginSuccess?: (user: any) => void;
}

export const PublicPhotoModal: React.FC<PublicPhotoModalProps> = ({
  isOpen,
  onClose,
  photo,
  photoGroup = [],
  onSelectPhoto,
  onLoginSuccess
}) => {
  const [comments, setComments] = useState<Comment[]>([]);
  const [newComment, setNewComment] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  const [isSending, setIsSending] = useState(false);
  const commentsEndRef = useRef<HTMLDivElement>(null);


  const fetchComments = async () => {
    setIsLoading(true);
    try {
      const res = await fetch(`/api/v1/public-photos/${photo.id}/comments`);
      if (res.ok) {
        const data = await res.json();
        setComments(
          data.map((c: any) => ({
            id: c.id,
            userName: c.user?.name || 'Ẩn danh',
            content: c.content,
            createdAt: c.createdAt,
            userId: c.userId
          }))
        );
      }
    } catch (error) {
      console.error('Lỗi khi tải bình luận:', error);
    } finally {
      setIsLoading(false);
    }
  };

  useEffect(() => {
    if (!isOpen || !photo.id) return;

    fetchComments();

    const socket = io();
    socket.emit('joinPhoto', photo.id);

    socket.on('photoCommentAdded', (newCommentData: any) => {
      if (newCommentData.photoId === photo.id) {
        setComments(prev => {
          if (prev.find(c => c.id === newCommentData.id)) return prev;
          return [
            ...prev,
            {
              id: newCommentData.id,
              userName: newCommentData.user?.name || 'Ẩn danh',
              content: newCommentData.content,
              createdAt: newCommentData.createdAt,
              userId: newCommentData.userId
            }
          ];
        });
      }
    });

    return () => {
      socket.disconnect();
    };
  }, [isOpen, photo.id]);

  useEffect(() => {
    commentsEndRef.current?.scrollIntoView({ behavior: 'smooth' });
  }, [comments]);

  const handleSend = async () => {
    if (!newComment.trim()) return;

    setIsSending(true);
    try {
      let token = localStorage.getItem('token');
      let currentUser = JSON.parse(localStorage.getItem('user') || 'null');

      // Nếu chưa có token, tự động tạo tài khoản khách
      if (!token) {
        const guestRes = await fetch('/api/v1/auth/create-guest', { method: 'POST' });
        if (!guestRes.ok) throw new Error('Không thể tạo tài khoản khách tự động.');
        const guestData = await guestRes.json();
        token = guestData.access_token;
        currentUser = guestData.user;
        localStorage.setItem('guest_token', token!);
        localStorage.setItem('guest_user', JSON.stringify(currentUser));
        localStorage.setItem('token', token!);
        localStorage.setItem('user', JSON.stringify(currentUser));
        
        if (onLoginSuccess) {
          onLoginSuccess(currentUser);
        }
      }

      let res = await fetch(`/api/v1/public-photos/${photo.id}/comments`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${token}`
        },
        body: JSON.stringify({ content: newComment })
      });
 
      if (res.status === 401) {
        console.warn('Token invalid or expired. Creating a new guest user and retrying comment...');
        localStorage.removeItem('guest_token');
        localStorage.removeItem('guest_user');
        localStorage.removeItem('token');
        localStorage.removeItem('user');

        const guestRes = await fetch('/api/v1/auth/create-guest', { method: 'POST' });
        if (!guestRes.ok) throw new Error('Không thể tạo lại phiên khách.');
        const guestData = await guestRes.json();
        token = guestData.access_token;
        currentUser = guestData.user;
        localStorage.setItem('guest_token', token!);
        localStorage.setItem('guest_user', JSON.stringify(currentUser));
        localStorage.setItem('token', token!);
        localStorage.setItem('user', JSON.stringify(currentUser));

        if (onLoginSuccess) {
          onLoginSuccess(currentUser);
        }

        res = await fetch(`/api/v1/public-photos/${photo.id}/comments`, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${token}`
          },
          body: JSON.stringify({ content: newComment })
        });
      }

      if (res.ok) {
        setNewComment('');
        fetchComments();
      } else {
        const err = await res.json();
        console.error('Lỗi khi gửi bình luận:', err.message);
      }
    } catch (error) {
      console.error('Lỗi khi gửi bình luận:', error);
    } finally {
      setIsSending(false);
    }
  };

  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 z-[5000] flex items-center justify-center p-4">
      {/* Backdrop */}
      <div
        className="absolute inset-0 bg-slate-950/80 backdrop-blur-md animate-in fade-in duration-300"
        onClick={onClose}
      />

      {/* Container */}
      <div className="relative w-full max-w-5xl h-[85vh] bg-slate-900 border border-slate-800 rounded-[32px] shadow-2xl overflow-hidden flex flex-col md:flex-row animate-in zoom-in-95 duration-300 text-slate-100">
        
        {/* Close Button Mobile/Desktop */}
        <button
          onClick={onClose}
          className="absolute top-4 right-4 z-50 p-2 bg-slate-950/60 hover:bg-slate-800/80 border border-slate-700/50 rounded-full text-slate-300 hover:text-white transition-colors"
        >
          <X className="w-5 h-5" />
        </button>

        {/* Left Side: Photo Detail */}
        <div className="relative w-full md:w-3/5 h-2/5 md:h-full bg-slate-950 flex items-center justify-center overflow-hidden group">
          <img
            src={photo.imageUrl}
            alt="Public Map Upload"
            className="w-full h-full object-contain"
          />
          {/* Info & Timeline overlay inside photo panel */}
          <div className="absolute bottom-0 left-0 right-0 p-6 bg-gradient-to-t from-slate-950 via-slate-950/90 to-transparent flex flex-col gap-4">
            
            {/* Timeline scroll */}
            {photoGroup && photoGroup.length > 1 && (
              <div className="flex flex-col gap-2 border-b border-slate-800/80 pb-3">
                <span className="text-[10px] font-bold uppercase tracking-wider text-slate-400 flex items-center gap-1.5">
                  <span className="inline-block w-1.5 h-1.5 rounded-full bg-emerald-500 animate-ping"></span>
                  Lịch sử ảnh tại vị trí này ({photoGroup.length})
                </span>
                <div className="flex gap-3 overflow-x-auto no-scrollbar py-1">
                  {photoGroup.map((p) => {
                    const isActive = p.id === photo.id;
                    return (
                      <button
                        key={p.id}
                        onClick={() => onSelectPhoto?.(p)}
                        className={`relative w-12 h-12 rounded-xl overflow-hidden border-2 transition-all active:scale-95 shrink-0 ${
                          isActive ? 'border-emerald-500 scale-110 shadow-lg' : 'border-slate-700 hover:border-slate-500'
                        }`}
                      >
                        <img src={p.imageUrl} alt="Timeline thumbnail" className="w-full h-full object-cover" />
                        <div className="absolute bottom-0 inset-x-0 bg-slate-950/70 text-[8px] text-center font-bold text-slate-300 py-0.5">
                          {new Date(p.capturedAt).toLocaleDateString('vi-VN', { month: '2-digit', day: '2-digit' })}
                        </div>
                      </button>
                    );
                  })}
                </div>
              </div>
            )}

            {/* Photo Metadata */}
            <div className="flex flex-wrap items-center gap-4 text-xs text-slate-300">
              <span className="flex items-center gap-1.5 font-semibold text-emerald-400">
                <User className="w-4 h-4" />
                {photo.uploader?.name || 'Ẩn danh'}
              </span>
              <span className="flex items-center gap-1.5 text-slate-400">
                <Calendar className="w-4 h-4" />
                {new Date(photo.capturedAt).toLocaleDateString('vi-VN', {
                  day: '2-digit',
                  month: '2-digit',
                  year: 'numeric',
                  hour: '2-digit',
                  minute: '2-digit'
                })}
              </span>
              {photo.metadata?.lat && photo.metadata?.lng && (
                <span className="flex items-center gap-1.5 text-slate-400">
                  <MapPin className="w-4 h-4 text-rose-500" />
                  {photo.metadata.lat.toFixed(4)}, {photo.metadata.lng.toFixed(4)}
                </span>
              )}
              {photo.originalUrl && (
                <a
                  href={photo.originalUrl}
                  download
                  target="_blank"
                  rel="noopener noreferrer"
                  className="flex items-center gap-1.5 bg-slate-800/80 hover:bg-slate-700/80 border border-slate-700/50 text-slate-200 hover:text-white font-bold py-1 px-3 rounded-full transition-all active:scale-95 text-[10px]"
                >
                  <Download className="w-3.5 h-3.5 text-emerald-500" />
                  Tải ảnh gốc
                </a>
              )}
            </div>

            <style>{`
              .no-scrollbar::-webkit-scrollbar {
                display: none;
              }
              .no-scrollbar {
                -ms-overflow-style: none;
                scrollbar-width: none;
              }
            `}</style>
          </div>
        </div>

        {/* Right Side: Comments */}
        <div className="w-full md:w-2/5 h-3/5 md:h-full flex flex-col bg-slate-900 border-t md:border-t-0 md:border-l border-slate-800">
          
          {/* Comments Header */}
          <div className="p-6 border-b border-slate-800 flex items-center justify-between">
            <div>
              <h3 className="text-lg font-black tracking-tight text-white flex items-center gap-2">
                <MessageSquare className="w-5 h-5 text-emerald-500" />
                Bình luận cộng đồng
              </h3>
              <p className="text-xs text-slate-400 mt-1">Ảnh chia sẻ công khai trên bản đồ</p>
            </div>
          </div>

          {/* Comments list scroll area */}
          <div className="flex-1 overflow-y-auto p-6 space-y-4 bg-slate-900/50">
            {isLoading ? (
              <div className="flex flex-col items-center justify-center py-12 text-slate-500 gap-2">
                <Loader2 className="w-8 h-8 animate-spin text-emerald-500" />
                <span className="text-xs font-semibold">Đang tải bình luận...</span>
              </div>
            ) : comments.length === 0 ? (
              <div className="flex flex-col items-center justify-center py-16 text-slate-500 gap-3">
                <div className="p-4 bg-slate-800/40 rounded-full text-slate-600">
                  <MessageSquare className="w-8 h-8" />
                </div>
                <span className="text-sm font-semibold italic">Chưa có bình luận nào. Hãy bắt đầu cuộc trò chuyện!</span>
              </div>
            ) : (
              comments.map((c) => {
                return (
                  <div key={c.id} className="flex gap-3 items-start animate-in fade-in slide-in-from-bottom-2 duration-200">
                    <div className="w-8 h-8 rounded-full bg-slate-800 flex items-center justify-center flex-shrink-0 border border-slate-700/60">
                      <User className="w-4.5 h-4.5 text-slate-400" />
                    </div>
                    <div className="flex-1 min-w-0">
                      <div className="bg-slate-800/55 p-3.5 rounded-2xl rounded-tl-none border border-slate-800 shadow-lg">
                        <div className="flex justify-between items-center mb-1">
                          <span className="text-xs font-black text-slate-200 truncate">{c.userName}</span>
                          <span className="text-[9px] font-medium text-slate-500">
                            {new Date(c.createdAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
                          </span>
                        </div>
                        <p className="text-sm text-slate-300 leading-relaxed break-words">{c.content}</p>
                      </div>
                    </div>
                  </div>
                );
              })
            )}
            <div ref={commentsEndRef} />
          </div>

          {/* Comment Input Area */}
          <div className="p-4 bg-slate-950/40 border-t border-slate-800/80">
            <div className="relative flex items-center gap-2">
              <input
                type="text"
                value={newComment}
                onChange={(e) => setNewComment(e.target.value)}
                onKeyDown={(e) => e.key === 'Enter' && !isSending && handleSend()}
                placeholder="Viết bình luận công khai..."
                className="flex-1 bg-slate-800/65 border border-slate-700/70 text-slate-100 placeholder-slate-500 rounded-2xl px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-transparent transition-all"
                disabled={isSending}
              />
              <button
                onClick={handleSend}
                disabled={!newComment.trim() || isSending}
                className="p-3 bg-emerald-600 hover:bg-emerald-500 disabled:bg-slate-800 disabled:opacity-40 text-white rounded-2xl transition-all active:scale-95 shadow-lg shadow-emerald-950/30 flex items-center justify-center"
              >
                {isSending ? (
                  <Loader2 className="w-4.5 h-4.5 animate-spin" />
                ) : (
                  <Send className="w-4.5 h-4.5" />
                )}
              </button>
            </div>
          </div>

        </div>

      </div>
    </div>
  );
};