'use client';

import { useState, useEffect } from 'react';
import { useSession } from 'next-auth/react';
import Link from 'next/link';
import { useTranslations } from '../../hooks/useTranslations';
import {
  Video,
  Calendar,
  Clock,
  User,
  Phone,
  MessageCircle,
  ChevronRight,
  Search,
  Filter,
} from 'lucide-react';

interface TelemedicineSession {
  _id: string;
  sessionNumber: string;
  status: string;
  consultationType: 'video' | 'audio' | 'chat';
  scheduledStartTime: string;
  scheduledEndTime: string;
  roomId: string;
  chiefComplaint?: string;
  doctorId?: {
    _id: string;
    name: string;
    email: string;
    specialization?: string;
  };
}

export default function PatientTelemedicinePage() {
  const { data: session } = useSession();
  const { t } = useTranslations();
  const [sessions, setSessions] = useState<TelemedicineSession[]>([]);
  const [loading, setLoading] = useState(true);
  const [filter, setFilter] = useState<'all' | 'upcoming' | 'completed'>('all');
  const [searchTerm, setSearchTerm] = useState('');

  useEffect(() => {
    const fetchSessions = async () => {
      try {
        const res = await fetch('/api/patient-portal/telemedicine');
        const data = await res.json();
        setSessions(data.sessions || []);
      } catch (error) {
        console.error('Error fetching telemedicine sessions:', error);
      } finally {
        setLoading(false);
      }
    };

    fetchSessions();
  }, []);

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

  const formatTime = (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 border-blue-200';
      case 'waiting':
        return 'bg-yellow-100 text-yellow-700 border-yellow-200';
      case 'in-progress':
        return 'bg-green-100 text-green-700 border-green-200';
      case 'completed':
        return 'bg-gray-100 text-gray-700 border-gray-200';
      case 'cancelled':
        return 'bg-red-100 text-red-700 border-red-200';
      default:
        return 'bg-gray-100 text-gray-700 border-gray-200';
    }
  };

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

  const canJoinSession = (sessionData: TelemedicineSession): boolean => {
    const now = new Date();
    const scheduledStart = new Date(sessionData.scheduledStartTime);
    const scheduledEnd = new Date(sessionData.scheduledEndTime);
    const joinWindowStart = new Date(scheduledStart.getTime() - 15 * 60 * 1000);
    return (
      now >= joinWindowStart &&
      now <= scheduledEnd &&
      ['scheduled', 'waiting', 'in-progress'].includes(sessionData.status)
    );
  };

  const filteredSessions = sessions.filter((s) => {
    const now = new Date();
    const scheduledDate = new Date(s.scheduledStartTime);

    if (filter === 'upcoming' && (scheduledDate < now || s.status === 'completed' || s.status === 'cancelled')) {
      return false;
    }
    if (filter === 'completed' && s.status !== 'completed') {
      return false;
    }

    if (searchTerm) {
      const search = searchTerm.toLowerCase();
      return (
        s.doctorId?.name.toLowerCase().includes(search) ||
        s.sessionNumber.toLowerCase().includes(search) ||
        s.chiefComplaint?.toLowerCase().includes(search)
      );
    }

    return true;
  });

  if (loading) {
    return (
      <div className="flex items-center justify-center min-h-[400px]">
        <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">{t('common.loading')}</p>
        </div>
      </div>
    );
  }

  return (
    <div className="space-y-6">
      {/* Header */}
      <div>
        <h1 className="text-2xl font-bold text-gray-900">
          {t('patientPortal.navigation.telemedicine') || 'Video Consultations'}
        </h1>
        <p className="text-gray-600 mt-1">
          View and join your scheduled video consultations
        </p>
      </div>

      {/* Filters */}
      <div className="flex flex-col sm:flex-row gap-4">
        <div className="relative flex-1">
          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-400" />
          <input
            type="text"
            placeholder="Search by doctor or session number..."
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
            className="w-full pl-10 pr-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500"
          />
        </div>
        <div className="flex gap-2">
          {(['all', 'upcoming', 'completed'] as const).map((f) => (
            <button
              key={f}
              onClick={() => setFilter(f)}
              className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
                filter === f
                  ? 'bg-teal-600 text-white'
                  : 'bg-white text-gray-700 border border-gray-300 hover:bg-gray-50'
              }`}
            >
              {f.charAt(0).toUpperCase() + f.slice(1)}
            </button>
          ))}
        </div>
      </div>

      {/* Sessions List */}
      <div className="grid gap-4">
        {filteredSessions.length > 0 ? (
          filteredSessions.map((sessionData) => {
            const canJoin = canJoinSession(sessionData);
            const isActive = sessionData.status === 'in-progress' || sessionData.status === 'waiting';

            return (
              <div
                key={sessionData._id}
                className={`bg-white rounded-xl shadow-sm border overflow-hidden hover:shadow-md transition-shadow ${
                  isActive ? 'border-green-200 bg-gradient-to-r from-green-50 to-white' : 'border-gray-100'
                }`}
              >
                <div className="flex">
                  {/* Date Badge */}
                  <div className="hidden sm:flex flex-col items-center justify-center px-6 py-4 bg-gradient-to-b from-indigo-50 to-purple-50 border-r border-gray-100">
                    <div className={`p-3 rounded-full ${
                      sessionData.consultationType === 'video'
                        ? 'bg-indigo-100 text-indigo-600'
                        : sessionData.consultationType === 'audio'
                        ? 'bg-purple-100 text-purple-600'
                        : 'bg-teal-100 text-teal-600'
                    }`}>
                      {getTypeIcon(sessionData.consultationType)}
                    </div>
                    <span className="text-xs text-gray-500 mt-2 uppercase">
                      {sessionData.consultationType}
                    </span>
                  </div>

                  {/* Session Details */}
                  <div className="flex-1 p-4">
                    <div className="flex flex-wrap items-start justify-between gap-2">
                      <div>
                        <div className="flex items-center gap-2">
                          <h3 className="font-semibold text-gray-900">
                            {sessionData.doctorId
                              ? `Dr. ${sessionData.doctorId.name}`
                              : 'Video Consultation'}
                          </h3>
                          {isActive && (
                            <span className="flex items-center gap-1 text-green-600 text-xs font-medium animate-pulse">
                              <span className="w-2 h-2 bg-green-500 rounded-full"></span>
                              Live
                            </span>
                          )}
                        </div>
                        {sessionData.doctorId?.specialization && (
                          <p className="text-sm text-gray-500">{sessionData.doctorId.specialization}</p>
                        )}
                        <p className="text-xs text-gray-400 mt-1">Session: {sessionData.sessionNumber}</p>
                      </div>
                      <span
                        className={`px-3 py-1 rounded-full text-xs font-medium border ${getStatusColor(
                          sessionData.status
                        )}`}
                      >
                        {sessionData.status.replace('-', ' ')}
                      </span>
                    </div>

                    <div className="mt-3 flex flex-wrap gap-4 text-sm text-gray-600">
                      <span className="flex items-center gap-1.5">
                        <Calendar className="h-4 w-4 text-gray-400" />
                        {formatDate(sessionData.scheduledStartTime)}
                      </span>
                      <span className="flex items-center gap-1.5">
                        <Clock className="h-4 w-4 text-gray-400" />
                        {formatTime(sessionData.scheduledStartTime)} -{' '}
                        {formatTime(sessionData.scheduledEndTime)}
                      </span>
                    </div>

                    {sessionData.chiefComplaint && (
                      <p className="mt-2 text-sm text-gray-600">
                        <span className="font-medium">Reason:</span> {sessionData.chiefComplaint}
                      </p>
                    )}

                    {/* Action Buttons */}
                    <div className="mt-4 flex items-center gap-3">
                      {canJoin || isActive ? (
                        <Link
                          href={`/patient-portal/telemedicine/${sessionData._id}`}
                          className="inline-flex items-center gap-2 px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors font-medium"
                        >
                          <Video className="h-4 w-4" />
                          {isActive ? 'Join Now' : 'Join Call'}
                        </Link>
                      ) : sessionData.status === 'scheduled' ? (
                        <Link
                          href={`/patient-portal/telemedicine/${sessionData._id}`}
                          className="inline-flex items-center gap-2 px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors font-medium"
                        >
                          <ChevronRight className="h-4 w-4" />
                          View Details
                        </Link>
                      ) : (
                        <Link
                          href={`/patient-portal/telemedicine/${sessionData._id}`}
                          className="inline-flex items-center gap-2 px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors font-medium"
                        >
                          <ChevronRight className="h-4 w-4" />
                          View Summary
                        </Link>
                      )}

                      {!canJoin && sessionData.status === 'scheduled' && (
                        <span className="text-sm text-gray-500">
                          Join available 15 min before start time
                        </span>
                      )}
                    </div>
                  </div>
                </div>
              </div>
            );
          })
        ) : (
          <div className="text-center py-12 bg-white rounded-xl border border-gray-100">
            <Video className="h-16 w-16 mx-auto text-gray-300 mb-4" />
            <h3 className="text-lg font-medium text-gray-900">No video consultations found</h3>
            <p className="text-gray-500 mt-1">
              You don&apos;t have any scheduled video consultations at the moment.
            </p>
            <Link
              href="/patient-portal/appointments"
              className="inline-flex items-center gap-2 mt-4 text-teal-600 hover:text-teal-700"
            >
              View All Appointments
              <ChevronRight className="h-4 w-4" />
            </Link>
          </div>
        )}
      </div>
    </div>
  );
}