'use client';

import { useState, useEffect } from 'react';
import { useSession } from 'next-auth/react';
import Link from 'next/link';
import {
  Video,
  Phone,
  MessageCircle,
  Clock,
  User,
  ArrowLeft,
  PlayCircle,
  Bell,
  RefreshCw,
} from 'lucide-react';
import SidebarLayout from '../../components/sidebar-layout';
import { useTranslations } from '../../hooks/useTranslations';

interface WaitingSession {
  _id: string;
  sessionNumber: string;
  patientId: {
    _id: string;
    name: string;
    patientId: string;
    profilePhoto?: string;
  };
  doctorId: {
    _id: string;
    name: string;
    specialization?: string;
  };
  consultationType: 'video' | 'audio' | 'chat';
  scheduledStartTime: string;
  status: string;
  chiefComplaint?: string;
}

export default function WaitingRoomPage() {
  const { data: authSession } = useSession();
  const { t } = useTranslations();
  const [sessions, setSessions] = useState<WaitingSession[]>([]);
  const [loading, setLoading] = useState(true);
  const [lastRefresh, setLastRefresh] = useState(new Date());

  useEffect(() => {
    fetchWaitingSessions();
    const interval = setInterval(fetchWaitingSessions, 10000); // Refresh every 10 seconds
    return () => clearInterval(interval);
  }, []);

  const fetchWaitingSessions = async () => {
    try {
      const res = await fetch('/api/telemedicine/sessions?status=waiting&limit=50');
      if (res.ok) {
        const data = await res.json();
        setSessions(data.sessions);
        setLastRefresh(new Date());
      }
    } catch (error) {
      console.error('Error fetching waiting sessions:', error);
    } finally {
      setLoading(false);
    }
  };

  const getConsultationIcon = (type: string) => {
    switch (type) {
      case 'video': return <Video className="w-5 h-5" />;
      case 'audio': return <Phone className="w-5 h-5" />;
      case 'chat': return <MessageCircle className="w-5 h-5" />;
      default: return <Video className="w-5 h-5" />;
    }
  };

  const getConsultationLabel = (type: string) => {
    switch (type) {
      case 'video': return t('telemedicine.videoCall');
      case 'audio': return t('telemedicine.audioCall');
      case 'chat': return t('telemedicine.chatConsultation');
      default: return type;
    }
  };

  const getWaitTime = (scheduledTime: string) => {
    const scheduled = new Date(scheduledTime);
    const now = new Date();
    const diffMs = now.getTime() - scheduled.getTime();
    
    if (diffMs < 0) {
      const mins = Math.abs(Math.round(diffMs / 60000));
      if (mins > 60) {
        return `${Math.round(mins / 60)}h`;
      }
      return `${mins}m`;
    }
    
    const mins = Math.round(diffMs / 60000);
    if (mins < 1) return t('telemedicine.waitingRoomPage.justNow');
    if (mins === 1) return `1 ${t('telemedicine.waitingRoomPage.min')}`;
    if (mins < 60) return `${mins} ${t('telemedicine.waitingRoomPage.mins')}`;
    const hours = Math.round(mins / 60);
    return `${hours}h ${mins % 60}m`;
  };

  const getWaitTimeColor = (scheduledTime: string) => {
    const scheduled = new Date(scheduledTime);
    const now = new Date();
    const diffMs = now.getTime() - scheduled.getTime();
    const mins = Math.round(diffMs / 60000);
    
    if (mins < 0) return 'text-gray-500';
    if (mins < 5) return 'text-green-600';
    if (mins < 15) return 'text-yellow-600';
    return 'text-red-600';
  };

  return (
    <SidebarLayout title={t('telemedicine.waitingRoomPage.title')} description={t('telemedicine.waitingRoomPage.description')}>
      <div className="space-y-6">
        {/* Header */}
        <div className="flex flex-col sm:flex-row gap-4 justify-between">
          <Link
            href="/telemedicine"
            className="inline-flex items-center gap-2 text-gray-500 hover:text-gray-700"
          >
            <ArrowLeft className="w-4 h-4" />
            {t('telemedicine.waitingRoomPage.backToTelemedicine')}
          </Link>
          <div className="flex items-center gap-4">
            <span className="text-sm text-gray-500 flex items-center gap-2">
              <RefreshCw className="w-4 h-4" />
              {t('telemedicine.waitingRoomPage.updated')}: {lastRefresh.toLocaleTimeString()}
            </span>
            <button
              onClick={fetchWaitingSessions}
              className="px-4 py-2 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 flex items-center gap-2"
            >
              <RefreshCw className="w-4 h-4" />
              {t('telemedicine.waitingRoomPage.refresh')}
            </button>
          </div>
        </div>

        {/* Stats */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
          <div className="bg-white rounded-lg shadow-sm p-4">
            <div className="flex items-center gap-3">
              <div className="w-10 h-10 bg-yellow-100 rounded-full flex items-center justify-center">
                <Clock className="h-5 w-5 text-yellow-600" />
              </div>
              <div>
                <p className="text-sm text-gray-500">{t('telemedicine.waitingRoomPage.currentlyWaiting')}</p>
                <p className="text-2xl font-bold text-yellow-800">{sessions.length}</p>
              </div>
            </div>
          </div>
          <div className="bg-white rounded-lg shadow-sm p-4">
            <div className="flex items-center gap-3">
              <div className="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center">
                <Video className="h-5 w-5 text-blue-600" />
              </div>
              <div>
                <p className="text-sm text-gray-500">{t('telemedicine.waitingRoomPage.videoCalls')}</p>
                <p className="text-2xl font-bold text-blue-800">
                  {sessions.filter(s => s.consultationType === 'video').length}
                </p>
              </div>
            </div>
          </div>
          <div className="bg-white rounded-lg shadow-sm p-4">
            <div className="flex items-center gap-3">
              <div className="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center">
                <Phone className="h-5 w-5 text-green-600" />
              </div>
              <div>
                <p className="text-sm text-gray-500">{t('telemedicine.waitingRoomPage.audioChat')}</p>
                <p className="text-2xl font-bold text-green-800">
                  {sessions.filter(s => s.consultationType !== 'video').length}
                </p>
              </div>
            </div>
          </div>
        </div>

        {/* Waiting List */}
        {loading ? (
          <div className="flex items-center justify-center h-64">
            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
          </div>
        ) : sessions.length === 0 ? (
          <div className="bg-white rounded-lg shadow-sm p-12 text-center">
            <Clock className="w-16 h-16 text-gray-300 mx-auto mb-4" />
            <h3 className="text-lg font-medium text-gray-900 mb-2">{t('telemedicine.waitingRoomPage.noPatientsWaiting')}</h3>
            <p className="text-gray-500">{t('telemedicine.waitingRoomPage.noPatientsDesc')}</p>
          </div>
        ) : (
          <div className="space-y-4">
            {sessions.map((session, index) => (
              <div
                key={session._id}
                className="bg-white rounded-lg shadow-sm p-6 hover:shadow-md transition-shadow border border-gray-200"
              >
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-4">
                    {/* Queue Number */}
                    <div className="w-12 h-12 bg-yellow-100 rounded-full flex items-center justify-center">
                      <span className="text-xl font-bold text-yellow-800">#{index + 1}</span>
                    </div>

                    {/* Patient Info */}
                    <div>
                      <div className="flex items-center gap-3">
                        <h3 className="font-semibold text-gray-900">
                          {session.patientId.name}
                        </h3>
                        <span className={`inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium ${
                          session.consultationType === 'video' ? 'bg-blue-100 text-blue-800' :
                          session.consultationType === 'audio' ? 'bg-green-100 text-green-800' :
                          'bg-purple-100 text-purple-800'
                        }`}>
                          {getConsultationIcon(session.consultationType)}
                          {getConsultationLabel(session.consultationType)}
                        </span>
                      </div>
                      <p className="text-sm text-gray-500">
                        {session.patientId.patientId} • Dr. {session.doctorId.name}
                      </p>
                      {session.chiefComplaint && (
                        <p className="text-sm text-gray-600 mt-1">
                          {t('telemedicine.waitingRoomPage.complaint')}: {session.chiefComplaint}
                        </p>
                      )}
                    </div>
                  </div>

                  <div className="flex items-center gap-6">
                    {/* Wait Time */}
                    <div className="text-right">
                      <p className="text-sm text-gray-500">{t('telemedicine.waitTime')}</p>
                      <p className={`text-lg font-semibold ${getWaitTimeColor(session.scheduledStartTime)}`}>
                        {getWaitTime(session.scheduledStartTime)}
                      </p>
                    </div>

                    {/* Actions */}
                    <Link
                      href={`/telemedicine/sessions/${session._id}?start=true`}
                      className="flex items-center gap-2 px-6 py-3 bg-green-500 hover:bg-green-600 text-white rounded-lg font-medium transition-colors"
                    >
                      <PlayCircle className="w-5 h-5" />
                      {t('telemedicine.startSession')}
                    </Link>
                  </div>
                </div>
              </div>
            ))}
          </div>
        )}

        {/* Auto-refresh notice */}
        <div className="text-center text-sm text-gray-500">
          <Bell className="w-4 h-4 inline mr-1" />
          {t('telemedicine.waitingRoomPage.autoRefreshNotice')}
        </div>
      </div>
    </SidebarLayout>
  );
}