'use client';

import { useState, useEffect } from 'react';
import Link from 'next/link';
import { 
  Calendar, 
  Plus, 
  Search, 
  Filter,
  Clock,
  Users,
  MapPin,
  MoreVertical,
  CheckCircle,
  XCircle,
  X,
} from 'lucide-react';
import ProtectedRoute from '../protected-route';
import SidebarLayout from '../components/sidebar-layout';
import { useTranslations } from '../hooks/useTranslations';

export default function AppointmentsPage() {
  const { t } = useTranslations();
  const [searchTerm, setSearchTerm] = useState('');
  const [filterStatus, setFilterStatus] = useState('all');
  const [filterDate, setFilterDate] = useState('all');
  const [selectedAppointment, setSelectedAppointment] = useState<any>(null);
  const [showActionsMenu, setShowActionsMenu] = useState<string | null>(null);

  const [appointments, setAppointments] = useState<any[]>([]);
  const [loading, setLoading] = useState(true);
  const [deleteModalAppointment, setDeleteModalAppointment] = useState<any | null>(null);
  const [deleting, setDeleting] = useState(false);
  const [toast, setToast] = useState<{ message: string; type: 'success' | 'error' } | null>(null);

  useEffect(() => {
    const fetchAppointments = async () => {
      try {
        const response = await fetch('/api/appointments');
        if (response.ok) {
          const data = await response.json();
          setAppointments(data);
        }
      } catch (error) {
        console.error('Error fetching appointments:', error);
      } finally {
        setLoading(false);
      }
    };

    fetchAppointments();
  }, []);

  const filteredAppointments = appointments.filter(appointment => {
    const matchesSearch = appointment.patientName?.toLowerCase().includes(searchTerm.toLowerCase()) ||
                         appointment.doctorName?.toLowerCase().includes(searchTerm.toLowerCase()) ||
                         appointment.patientId?.toLowerCase().includes(searchTerm.toLowerCase());
    const matchesStatus = filterStatus === 'all' || appointment.status?.toLowerCase() === filterStatus.toLowerCase();
    const matchesDate = filterDate === 'all' || appointment.appointmentDate === filterDate;
    return matchesSearch && matchesStatus && matchesDate;
  });

  const getStatusColor = (status: string) => {
    switch (status.toLowerCase()) {
      case 'confirmed':
        return 'bg-green-100 text-green-800';
      case 'pending':
        return 'bg-yellow-100 text-yellow-800';
      case 'cancelled':
        return 'bg-red-100 text-red-800';
      default:
        return 'bg-gray-100 text-gray-800';
    }
  };

  const getTypeColor = (type: string) => {
    switch (type.toLowerCase()) {
      case 'consultation':
        return 'bg-blue-100 text-blue-800';
      case 'follow-up':
        return 'bg-purple-100 text-purple-800';
      case 'examination':
        return 'bg-orange-100 text-orange-800';
      default:
        return 'bg-gray-100 text-gray-800';
    }
  };

  const handleViewAppointment = (appointment: any) => {
    setSelectedAppointment(appointment);
    // Navigate to appointment view page
    window.location.href = `/appointments/${appointment._id}`;
  };

  const handleEditAppointment = (appointment: any) => {
    setSelectedAppointment(appointment);
    // Navigate to appointment edit page
    window.location.href = `/appointments/${appointment._id}/edit`;
  };

  const handleRescheduleAppointment = (appointment: any) => {
    setSelectedAppointment(appointment);
    // Navigate to appointment reschedule page
    window.location.href = `/appointments/${appointment._id}/reschedule`;
  };

  const handleCancelAppointment = async (appointment: any) => {
    if (confirm(`Are you sure you want to cancel the appointment for ${appointment.patientName}?`)) {
      try {
        const response = await fetch(`/api/appointments/${appointment._id}`, {
          method: 'PUT',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({
            ...appointment,
            status: 'cancelled'
          }),
        });

        if (response.ok) {
          // Update the local state
          setAppointments(prev => 
            prev.map(apt => 
              apt._id === appointment._id 
                ? { ...apt, status: 'cancelled' }
                : apt
            )
          );
          alert(`Appointment for ${appointment.patientName} cancelled successfully`);
        } else {
          alert('Failed to cancel appointment. Please try again.');
        }
      } catch (error) {
        console.error('Error cancelling appointment:', error);
        alert('An error occurred while cancelling the appointment.');
      }
    }
  };

  const handleDeleteClick = (appointment: any) => {
    requestAnimationFrame(() => setShowActionsMenu(null));
    setDeleteModalAppointment(appointment);
  };

  const doDeleteAppointment = async (appointment: any) => {
    setDeleting(true);
    try {
      const response = await fetch(`/api/appointments/${appointment._id}`, {
        method: 'DELETE',
      });

      if (response.ok) {
        setAppointments(prev => prev.filter(apt => apt._id !== appointment._id));
        setDeleteModalAppointment(null);
        setToast({ message: `Appointment for ${appointment.patientName} deleted successfully`, type: 'success' });
      } else {
        setToast({ message: 'Failed to delete appointment. Please try again.', type: 'error' });
      }
    } catch (error) {
      console.error('Error deleting appointment:', error);
      setToast({ message: 'An error occurred while deleting the appointment.', type: 'error' });
    } finally {
      setDeleting(false);
    }
  };

  const handleDeleteConfirmModal = () => {
    if (deleteModalAppointment) {
      doDeleteAppointment(deleteModalAppointment);
    }
  };

  const toggleActionsMenu = (appointmentId: string) => {
    setShowActionsMenu(showActionsMenu === appointmentId ? null : appointmentId);
  };

  // Auto-dismiss toast after 4 seconds
  useEffect(() => {
    if (!toast) return;
    const t = setTimeout(() => setToast(null), 4000);
    return () => clearTimeout(t);
  }, [toast]);

  // Close actions menu when clicking outside any menu or its trigger
  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      const target = event.target as HTMLElement;
      if (target.closest('[data-appointment-actions]')) return;
      setShowActionsMenu(null);
    };

    document.addEventListener('click', handleClickOutside);
    return () => document.removeEventListener('click', handleClickOutside);
  }, []);

  // Close menu when pressing Escape key
  useEffect(() => {
    const handleEscape = (event: KeyboardEvent) => {
      if (event.key === 'Escape') {
        setShowActionsMenu(null);
      }
    };

    document.addEventListener('keydown', handleEscape);
    return () => {
      document.removeEventListener('keydown', handleEscape);
    };
  }, []);

  return (
    <ProtectedRoute>
      <SidebarLayout 
        title={t('appointments.title')} 
        description={t('appointments.description')}
      >
        <div className="space-y-6">
          {/* Header: search + filters + Add */}
          <div className="flex flex-col sm:flex-row gap-4 justify-between">
            <div className="flex flex-col sm:flex-row gap-4 flex-1 flex-wrap">
              <div className="relative flex-1 max-w-md">
                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-gray-400" />
                <input
                  type="text"
                  placeholder={t('appointments.searchPlaceholder')}
                  value={searchTerm}
                  onChange={(e) => setSearchTerm(e.target.value)}
                  className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
                />
              </div>
              <div className="flex gap-2 flex-wrap items-center">
                <Filter className="h-4 w-4 text-gray-400" />
                <select
                  value={filterStatus}
                  onChange={(e) => setFilterStatus(e.target.value)}
                  className="px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
                >
                  <option value="all">{t('appointments.allStatus')}</option>
                  <option value="confirmed">{t('appointments.upcoming')}</option>
                  <option value="pending">{t('appointments.upcoming')}</option>
                  <option value="cancelled">{t('appointments.cancelled')}</option>
                </select>
                <select
                  value={filterDate}
                  onChange={(e) => setFilterDate(e.target.value)}
                  className="px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
                >
                  <option value="all">{t('appointments.allDates')}</option>
                  <option value="2024-02-20">{t('appointments.today')} (Feb 20)</option>
                  <option value="2024-02-21">Tomorrow (Feb 21)</option>
                </select>
                <span className="text-sm text-gray-500 bg-gray-100 px-2 py-1 rounded-full">
                  {filteredAppointments.length} {t('appointments.title').toLowerCase()}
                </span>
              </div>
            </div>
            <Link
              href="/appointments/new"
              className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
            >
              <Plus className="h-5 w-5" />
              <span>{t('appointments.addNew')}</span>
            </Link>
          </div>

          {/* Appointments List */}
          <div className="bg-white rounded-lg shadow-sm overflow-hidden">
          <div className="overflow-x-auto">
            {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>
            ) : filteredAppointments.length === 0 ? (
              <div className="p-12 text-center">
                <Calendar className="h-12 w-12 text-gray-400 mx-auto mb-4" />
                <h3 className="text-lg font-medium text-gray-900 mb-2">{t('appointments.noAppointments')}</h3>
                <p className="text-gray-500 mb-4">
                  {searchTerm || filterStatus !== 'all' || filterDate !== 'all'
                    ? 'Try adjusting your search or filter criteria.'
                    : t('appointments.noAppointmentsDesc')}
                </p>
                {!searchTerm && filterStatus === 'all' && filterDate === 'all' && (
                  <Link
                    href="/appointments/new"
                    className="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
                  >
                    <Plus className="h-5 w-5" />
                    <span>{t('appointments.addNew')}</span>
                  </Link>
                )}
              </div>
            ) : (
            <table className="min-w-full divide-y divide-gray-200">
              <thead className="bg-gray-50">
                <tr>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">
                    {t('appointments.patientDoctor')}
                  </th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">
                    {t('appointments.dateTime')}
                  </th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">
                    {t('appointments.type')}
                  </th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">
                    {t('appointments.status')}
                  </th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">
                    Location
                  </th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">
                    {t('appointments.actions')}
                  </th>
                </tr>
              </thead>
              <tbody className="bg-white divide-y divide-gray-200">
                {filteredAppointments.map((appointment) => (
                  <tr key={appointment._id || appointment.id} className="hover:bg-gray-50">
                    <td className="px-6 py-4 whitespace-nowrap">
                      <div className="flex items-center">
                        <div className="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center">
                          <Users className="h-5 w-5 text-blue-600" />
                        </div>
                        <div className="ml-4">
                          <div className="text-sm font-medium text-gray-900">{appointment.patientName}</div>
                          <div className="text-sm text-gray-500">ID: {appointment.patientId || 'N/A'}</div>
                          <div className="text-sm text-gray-700 font-medium">
                            {appointment.doctorName || 'No doctor assigned'}
                          </div>
                        </div>
                      </div>
                    </td>
                                        <td className="px-6 py-4 whitespace-nowrap">
                      <div className="text-sm text-gray-900">{new Date(appointment.appointmentDate).toLocaleDateString()}</div>
                      <div className="text-sm text-gray-700 flex items-center">
                        <Clock className="h-3 w-3 mr-1" />
                        {appointment.appointmentTime}
                      </div>
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap">
                      <span className={`inline-flex px-2 py-1 text-xs font-medium rounded-full ${getTypeColor(appointment.appointmentType)}`}>
                        {appointment.appointmentType}
                      </span>
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap">
                      <span className={`inline-flex px-2 py-1 text-xs font-medium rounded-full ${getStatusColor(appointment.status)}`}>
                        {appointment.status}
                      </span>
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap">
                      <div className="flex items-center text-sm text-gray-900">
                        <MapPin className="h-3 w-3 mr-1" />
                        {appointment.location}
                      </div>
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
                      <div className="flex items-center space-x-2">
                        <button 
                          onClick={() => handleViewAppointment(appointment)}
                          className="text-blue-600 hover:text-blue-900 hover:underline"
                        >
                          {t('appointments.view')}
                        </button>
                        <button 
                          onClick={() => handleEditAppointment(appointment)}
                          className="text-green-600 hover:text-green-900 hover:underline"
                        >
                          {t('appointments.edit')}
                        </button>
                        <div className="relative" data-appointment-actions>
                        <button
                          type="button"
                          onClick={() => toggleActionsMenu(appointment._id)}
                          className="text-gray-400 hover:text-gray-600 p-1 rounded hover:bg-gray-100"
                        >
                            <MoreVertical className="h-4 w-4" />
                          </button>
                          
                          {showActionsMenu === appointment._id && (
                            <div className="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg z-10 border border-gray-200" data-appointment-actions>
                              <div className="py-1">
                                <button
                                  type="button"
                                  onClick={() => handleViewAppointment(appointment)}
                                  className="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
                                >
                                  {t('appointments.viewDetails')}
                                </button>
                                <button
                                  type="button"
                                  onClick={() => handleEditAppointment(appointment)}
                                  className="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
                                >
                                  {t('appointments.editAppointment')}
                                </button>
                                <button
                                  type="button"
                                  onClick={() => handleRescheduleAppointment(appointment)}
                                  className="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
                                >
                                  {t('appointments.reschedule')}
                                </button>
                                <button
                                  type="button"
                                  onClick={() => handleCancelAppointment(appointment)}
                                  className="block w-full text-left px-4 py-2 text-sm text-red-600 hover:bg-red-50"
                                >
                                  {t('appointments.cancelAppointment')}
                                </button>
                                <button
                                  type="button"
                                  onClick={(e) => {
                                    e.stopPropagation();
                                    handleDeleteClick(appointment);
                                  }}
                                  className="block w-full text-left px-4 py-2 text-sm text-red-600 hover:bg-red-50"
                                >
                                  Delete Appointment
                                </button>
                              </div>
                            </div>
                          )}
                        </div>
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
            )}
          </div>
        </div>
        </div>

        {/* Delete appointment modal */}
        {deleteModalAppointment && (
          <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50">
            <div className="bg-white rounded-xl shadow-xl max-w-md w-full p-6">
              <h3 className="text-lg font-semibold text-gray-900 mb-2">Delete Appointment</h3>
              {deleteModalAppointment.telemedicineSessionId ? (
                <p className="text-gray-600 mb-4">
                  This appointment has a linked video consultation session. Deleting this appointment will also permanently delete the linked telemedicine session.
                </p>
              ) : null}
              <p className="text-gray-700 mb-6">
                Are you sure you want to permanently delete the appointment for <strong>{deleteModalAppointment.patientName}</strong>? This action cannot be undone.
              </p>
              <div className="flex justify-end gap-3">
                <button
                  type="button"
                  onClick={() => setDeleteModalAppointment(null)}
                  disabled={deleting}
                  className="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 disabled:opacity-50"
                >
                  Cancel
                </button>
                <button
                  type="button"
                  onClick={handleDeleteConfirmModal}
                  disabled={deleting}
                  className="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 disabled:opacity-50 flex items-center gap-2"
                >
                  {deleting ? (
                    <>
                      <span className="animate-spin rounded-full h-4 w-4 border-2 border-white border-t-transparent" />
                      Deleting...
                    </>
                  ) : deleteModalAppointment.telemedicineSessionId ? (
                    'Delete Appointment & Video Session'
                  ) : (
                    'Delete Appointment'
                  )}
                </button>
              </div>
            </div>
          </div>
        )}

        {/* Toast notification */}
        {toast && (
          <div
            className={`fixed bottom-6 right-6 z-[60] flex items-center gap-3 px-4 py-3 rounded-lg shadow-lg border ${
              toast.type === 'success'
                ? 'bg-green-50 border-green-200 text-green-800'
                : 'bg-red-50 border-red-200 text-red-800'
            }`}
            role="alert"
          >
            {toast.type === 'success' ? (
              <CheckCircle className="h-5 w-5 text-green-600 shrink-0" />
            ) : (
              <XCircle className="h-5 w-5 text-red-600 shrink-0" />
            )}
            <p className="text-sm font-medium">{toast.message}</p>
            <button
              type="button"
              onClick={() => setToast(null)}
              className="ml-2 text-current opacity-70 hover:opacity-100"
              aria-label="Dismiss"
            >
              <X className="h-4 w-4" />
            </button>
          </div>
        )}
      </SidebarLayout>
    </ProtectedRoute>
  );
}