'use client';

import { useState, useEffect, useRef, useCallback } from 'react';
import { useSession } from 'next-auth/react';
import { useParams, useRouter } from 'next/navigation';
import Link from 'next/link';
import {
  Video,
  Phone,
  MessageCircle,
  Send,
  ArrowLeft,
  Clock,
  Calendar,
  AlertCircle,
  XCircle,
  Maximize2,
  Minimize2,
} from 'lucide-react';
import VideoCall from '../../../components/VideoCall';

interface TelemedicineSession {
  _id: string;
  sessionNumber: string;
  patientId: {
    _id: string;
    name: string;
    email: string;
    phone?: string;
  };
  doctorId: {
    _id: string;
    name: string;
    specialization?: string;
    email: string;
    profilePhoto?: string;
  };
  consultationType: 'video' | 'audio' | 'chat';
  scheduledStartTime: string;
  scheduledEndTime: string;
  actualStartTime?: string;
  status: string;
  roomId: string;
  chiefComplaint?: string;
  symptoms?: string[];
  chatMessages: ChatMessage[];
  consultationFee: number;
  currency: string;
}

interface ChatMessage {
  _id: string;
  senderId: string;
  senderType: 'doctor' | 'patient';
  senderName: string;
  message: string;
  messageType: 'text' | 'image' | 'file' | 'prescription';
  timestamp: string;
  read: boolean;
}

export default function PatientTelemedicineSessionPage() {
  const { data: authSession } = useSession();
  const params = useParams();
  const router = useRouter();
  const sessionId = params.id as string;

  const [session, setSession] = useState<TelemedicineSession | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  // Call state
  const [isCallActive, setIsCallActive] = useState(false);
  const [isFullscreen, setIsFullscreen] = useState(false);
  const [callDuration, setCallDuration] = useState(0);

  // Chat state
  const [showChat, setShowChat] = useState(true);
  const [newMessage, setNewMessage] = useState('');
  const [messages, setMessages] = useState<ChatMessage[]>([]);
  const chatContainerRef = useRef<HTMLDivElement>(null);
  const lastMessageTimestampRef = useRef<string>('');

  const callTimerRef = useRef<NodeJS.Timeout | null>(null);

  const fetchSession = useCallback(async () => {
    try {
      const res = await fetch(`/api/patient-portal/telemedicine/${sessionId}`);
      if (!res.ok) {
        if (res.status === 403) {
          setError('You do not have access to this session');
        } else if (res.status === 404) {
          setError('Session not found');
        } else {
          throw new Error('Failed to fetch session');
        }
        return;
      }
      const data = await res.json();
      setSession(data);
      const chatMessages = data.chatMessages || [];
      setMessages(chatMessages);
      if (chatMessages.length > 0) {
        lastMessageTimestampRef.current = chatMessages[chatMessages.length - 1].timestamp;
      }
    } catch (err) {
      setError('Failed to load session');
      console.error('Error fetching session:', err);
    } finally {
      setLoading(false);
    }
  }, [sessionId]);

  const pollMessages = useCallback(async () => {
    if (!session) return;
    try {
      const since = lastMessageTimestampRef.current;
      const res = await fetch(
        `/api/patient-portal/telemedicine/${sessionId}/chat${since ? `?since=${since}` : ''}`
      );
      if (res.ok) {
        const data = await res.json();
        if (data.messages && data.messages.length > 0) {
          setMessages(prev => {
            const existingIds = new Set(prev.map(m => m._id));
            const newMessages = data.messages.filter((m: ChatMessage) => !existingIds.has(m._id));
            if (newMessages.length > 0) {
              const lastNew = newMessages[newMessages.length - 1];
              lastMessageTimestampRef.current = lastNew.timestamp;
              return [...prev, ...newMessages];
            }
            return prev;
          });
        }
      }
    } catch (err) {
      console.error('Error polling messages:', err);
    }
  }, [session, sessionId]);

  useEffect(() => {
    fetchSession();
    const messageInterval = setInterval(pollMessages, 3000);
    return () => {
      clearInterval(messageInterval);
      if (callTimerRef.current) {
        clearInterval(callTimerRef.current);
      }
    };
  }, [sessionId, fetchSession, pollMessages]);

  useEffect(() => {
    if (chatContainerRef.current) {
      chatContainerRef.current.scrollTop = chatContainerRef.current.scrollHeight;
    }
  }, [messages]);

  const startCall = async () => {
    try {
      await fetch(`/api/patient-portal/telemedicine/${sessionId}`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ action: 'join' }),
      });

      setIsCallActive(true);
      callTimerRef.current = setInterval(() => {
        setCallDuration(prev => prev + 1);
      }, 1000);
    } catch (err) {
      console.error('Error starting call:', err);
      setError('Failed to join the call.');
    }
  };

  const endCall = async () => {
    setIsCallActive(false);
    if (callTimerRef.current) {
      clearInterval(callTimerRef.current);
    }
    
    await fetch(`/api/patient-portal/telemedicine/${sessionId}`, {
      method: 'PUT',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ action: 'leave' }),
    });
  };

  const handleJitsiReadyToClose = () => {
    endCall();
  };

  const sendMessage = async () => {
    if (!newMessage.trim() || !authSession?.user) return;

    try {
      const res = await fetch(`/api/patient-portal/telemedicine/${sessionId}/chat`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          message: newMessage.trim(),
          messageType: 'text',
        }),
      });

      if (res.ok) {
        const data = await res.json();
        setMessages(prev => {
          const exists = prev.some(m => m._id === data.message._id);
          if (exists) return prev;
          return [...prev, data.message];
        });
        if (data.message.timestamp) {
          lastMessageTimestampRef.current = data.message.timestamp;
        }
        setNewMessage('');
      }
    } catch (err) {
      console.error('Error sending message:', err);
    }
  };

  const formatTime = (seconds: number) => {
    const h = Math.floor(seconds / 3600);
    const m = Math.floor((seconds % 3600) / 60);
    const s = seconds % 60;
    if (h > 0) {
      return `${h}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`;
    }
    return `${m}:${s.toString().padStart(2, '0')}`;
  };

  const formatDate = (dateString: string) => {
    return new Date(dateString).toLocaleDateString('en-US', {
      weekday: 'long',
      month: 'long',
      day: 'numeric',
      year: 'numeric',
    });
  };

  const formatTimeOnly = (dateString: string) => {
    return new Date(dateString).toLocaleTimeString('en-US', {
      hour: '2-digit',
      minute: '2-digit',
    });
  };

  const getStatusColor = (status: string) => {
    switch (status) {
      case 'scheduled': return 'bg-blue-100 text-blue-700';
      case 'waiting': return 'bg-yellow-100 text-yellow-700';
      case 'in-progress': return 'bg-green-100 text-green-700';
      case 'completed': return 'bg-gray-100 text-gray-700';
      case 'cancelled': return 'bg-red-100 text-red-700';
      default: return 'bg-gray-100 text-gray-700';
    }
  };

  const canJoinCall = () => {
    if (!session) return false;
    const now = new Date();
    const scheduledStart = new Date(session.scheduledStartTime);
    const scheduledEnd = new Date(session.scheduledEndTime);
    const joinWindowStart = new Date(scheduledStart.getTime() - 15 * 60 * 1000);
    return (
      now >= joinWindowStart && 
      now <= scheduledEnd && 
      ['scheduled', 'waiting', 'in-progress'].includes(session.status)
    );
  };

  if (loading) {
    return (
      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
        <div className="text-center">
          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-teal-600 mx-auto"></div>
          <p className="mt-4 text-gray-600">Loading session...</p>
        </div>
      </div>
    );
  }

  if (error) {
    return (
      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
        <div className="text-center">
          <XCircle className="h-16 w-16 text-red-400 mx-auto mb-4" />
          <h2 className="text-xl font-semibold text-gray-900 mb-2">Error</h2>
          <p className="text-gray-600 mb-4">{error}</p>
          <Link
            href="/patient-portal/appointments"
            className="inline-flex items-center gap-2 text-teal-600 hover:text-teal-700"
          >
            <ArrowLeft className="h-4 w-4" />
            Back to Appointments
          </Link>
        </div>
      </div>
    );
  }

  if (!session) {
    return (
      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
        <div className="text-center">
          <AlertCircle className="h-16 w-16 text-yellow-400 mx-auto mb-4" />
          <h2 className="text-xl font-semibold text-gray-900 mb-2">Session Not Found</h2>
          <p className="text-gray-600 mb-4">The requested session could not be found.</p>
          <Link
            href="/patient-portal/appointments"
            className="inline-flex items-center gap-2 text-teal-600 hover:text-teal-700"
          >
            <ArrowLeft className="h-4 w-4" />
            Back to Appointments
          </Link>
        </div>
      </div>
    );
  }

  return (
    <div className={`min-h-screen bg-gray-900 ${isFullscreen ? 'fixed inset-0 z-50' : ''}`}>
      {/* Header */}
      <div className="bg-gray-800 border-b border-gray-700 px-4 py-3">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-4">
            <Link
              href="/patient-portal/appointments"
              className="text-gray-400 hover:text-white transition-colors"
            >
              <ArrowLeft className="h-5 w-5" />
            </Link>
            <div>
              <h1 className="text-white font-semibold">
                {session.consultationType === 'video' ? 'Video' : session.consultationType === 'audio' ? 'Audio' : 'Chat'} Consultation
              </h1>
              <p className="text-gray-400 text-sm">
                with Dr. {session.doctorId.name}
                {session.doctorId.specialization && ` • ${session.doctorId.specialization}`}
              </p>
            </div>
          </div>
          <div className="flex items-center gap-4">
            <span className={`px-3 py-1 rounded-full text-xs font-medium ${getStatusColor(session.status)}`}>
              {session.status.replace('-', ' ')}
            </span>
            {isCallActive && (
              <span className="text-white font-mono bg-red-500 px-3 py-1 rounded">
                {formatTime(callDuration)}
              </span>
            )}
            <button
              onClick={() => setIsFullscreen(!isFullscreen)}
              className="text-gray-400 hover:text-white p-2"
            >
              {isFullscreen ? <Minimize2 className="h-5 w-5" /> : <Maximize2 className="h-5 w-5" />}
            </button>
          </div>
        </div>
      </div>

      <div className="flex h-[calc(100vh-64px)]">
        {/* Main Video/Call Area */}
        <div className="flex-1 flex flex-col">
          {/* Video Container */}
          <div className="flex-1 relative bg-gray-900 flex items-center justify-center">
            {isCallActive ? (
              <div className="w-full h-full relative">
                <VideoCall
                  roomId={session.roomId}
                  participantName={authSession?.user?.name || 'Patient'}
                  participantRole="patient"
                  sessionStatus={session.status}
                  onCallEnd={handleJitsiReadyToClose}
                />
                {/* Chat toggle button */}
                <div className="absolute top-4 left-4 z-10">
                  <button
                    onClick={() => setShowChat(!showChat)}
                    className={`p-2 rounded-lg transition-colors ${
                      showChat ? 'bg-teal-600 text-white' : 'bg-gray-800/80 text-gray-300 hover:bg-gray-700'
                    }`}
                    title="Toggle Chat"
                  >
                    <MessageCircle className="w-5 h-5" />
                  </button>
                </div>
              </div>
            ) : (
              <div className="text-center p-8">
                <div className="w-24 h-24 rounded-full bg-gray-700 flex items-center justify-center mx-auto mb-6">
                  <Video className="w-12 h-12 text-gray-400" />
                </div>
                <h2 className="text-xl font-semibold text-white mb-2">
                  Ready to join your consultation?
                </h2>
                <div className="text-gray-400 mb-6 space-y-1">
                  <p className="flex items-center justify-center gap-2">
                    <Calendar className="h-4 w-4" />
                    {formatDate(session.scheduledStartTime)}
                  </p>
                  <p className="flex items-center justify-center gap-2">
                    <Clock className="h-4 w-4" />
                    {formatTimeOnly(session.scheduledStartTime)} - {formatTimeOnly(session.scheduledEndTime)}
                  </p>
                </div>
                {canJoinCall() ? (
                  <button
                    onClick={startCall}
                    className="inline-flex items-center gap-2 px-6 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors font-medium"
                  >
                    {session.consultationType === 'video' ? (
                      <Video className="h-5 w-5" />
                    ) : (
                      <Phone className="h-5 w-5" />
                    )}
                    Join {session.consultationType === 'video' ? 'Video' : 'Audio'} Call
                  </button>
                ) : (
                  <div className="text-center">
                    <p className="text-yellow-400 mb-2">
                      {session.status === 'completed' || session.status === 'cancelled'
                        ? 'This session has ended'
                        : 'You can join 15 minutes before the scheduled time'}
                    </p>
                    {session.status === 'scheduled' && (
                      <p className="text-gray-500 text-sm">
                        Session starts at {formatTimeOnly(session.scheduledStartTime)}
                      </p>
                    )}
                  </div>
                )}
              </div>
            )}
          </div>

          {/* Call info bar - Jitsi has its own controls */}
          {isCallActive && (
            <div className="bg-gray-800 border-t border-gray-700 px-4 py-2">
              <p className="text-center text-gray-400 text-sm">
                Use the controls in the video window to manage your call. Click the red hang-up button to end.
              </p>
            </div>
          )}
        </div>

        {/* Chat Sidebar */}
        {showChat && (
          <div className="w-80 bg-white border-l border-gray-200 flex flex-col">
            <div className="p-4 border-b border-gray-200">
              <h3 className="font-semibold text-gray-900">Chat</h3>
              <p className="text-sm text-gray-500">Send messages to your doctor</p>
            </div>

            {/* Messages */}
            <div
              ref={chatContainerRef}
              className="flex-1 overflow-y-auto p-4 space-y-4"
            >
              {messages.length === 0 ? (
                <div className="text-center text-gray-500 py-8">
                  <MessageCircle className="h-8 w-8 mx-auto mb-2 text-gray-300" />
                  <p>No messages yet</p>
                </div>
              ) : (
                messages.map((msg) => (
                  <div
                    key={msg._id}
                    className={`flex ${msg.senderType === 'patient' ? 'justify-end' : 'justify-start'}`}
                  >
                    <div
                      className={`max-w-[80%] rounded-lg px-4 py-2 ${
                        msg.senderType === 'patient'
                          ? 'bg-teal-600 text-white'
                          : 'bg-gray-100 text-gray-900'
                      }`}
                    >
                      <p className="text-xs font-medium mb-1 opacity-75">
                        {msg.senderName}
                      </p>
                      <p className="text-sm">{msg.message}</p>
                      <p className="text-xs mt-1 opacity-50">
                        {new Date(msg.timestamp).toLocaleTimeString('en-US', {
                          hour: '2-digit',
                          minute: '2-digit',
                        })}
                      </p>
                    </div>
                  </div>
                ))
              )}
            </div>

            {/* Message Input */}
            <div className="p-4 border-t border-gray-200">
              <form
                onSubmit={(e) => {
                  e.preventDefault();
                  sendMessage();
                }}
                className="flex gap-2"
              >
                <input
                  type="text"
                  value={newMessage}
                  onChange={(e) => setNewMessage(e.target.value)}
                  placeholder="Type a message..."
                  className="flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500"
                />
                <button
                  type="submit"
                  disabled={!newMessage.trim()}
                  className="px-4 py-2 bg-teal-600 text-white rounded-lg hover:bg-teal-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
                >
                  <Send className="h-5 w-5" />
                </button>
              </form>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}