'use client';

import { useState, useEffect } from 'react';
import { useSession } from 'next-auth/react';
import { useRouter } from 'next/navigation';
import Link from 'next/link';
import {
  Video,
  Phone,
  MessageCircle,
  ArrowLeft,
  Calendar,
  Clock,
  User,
  Stethoscope,
  DollarSign,
  FileText,
  AlertCircle,
} from 'lucide-react';
import SidebarLayout from '../../../components/sidebar-layout';

interface Patient {
  _id: string;
  name: string;
  patientId: string;
  email: string;
  phone: string;
}

interface Doctor {
  _id: string;
  name: string;
  specialization?: string;
  email: string;
  consultationFee?: number;
}

export default function NewSessionPage() {
  const { data: authSession } = useSession();
  const router = useRouter();
  
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [patients, setPatients] = useState<Patient[]>([]);
  const [doctors, setDoctors] = useState<Doctor[]>([]);
  const [patientSearch, setPatientSearch] = useState('');
  const [doctorSearch, setDoctorSearch] = useState('');
  
  // Form state
  const [formData, setFormData] = useState({
    patientId: '',
    doctorId: '',
    consultationType: 'video' as 'video' | 'audio' | 'chat',
    scheduledDate: '',
    scheduledTime: '',
    duration: 30,
    chiefComplaint: '',
    consultationFee: 0,
    notes: '',
  });

  useEffect(() => {
    fetchPatients();
    fetchDoctors();
    
    // Set default date to today
    const today = new Date().toISOString().split('T')[0];
    setFormData(prev => ({ ...prev, scheduledDate: today }));
  }, []);

  const fetchPatients = async () => {
    try {
      const res = await fetch('/api/patients?limit=100');
      if (res.ok) {
        const data = await res.json();
        // API returns array directly, not wrapped in { patients: [...] }
        setPatients(Array.isArray(data) ? data : (data.patients || []));
      }
    } catch (error) {
      console.error('Error fetching patients:', error);
    }
  };

  const fetchDoctors = async () => {
    try {
      // Fetch doctors from /api/doctors endpoint
      const res = await fetch('/api/doctors');
      if (res.ok) {
        const data = await res.json();
        // API returns array directly
        const doctorsList = Array.isArray(data) ? data : (data.doctors || []);
        setDoctors(doctorsList);
      }
    } catch (error) {
      console.error('Error fetching doctors:', error);
    }
  };

  const handleDoctorSelect = (doctorId: string) => {
    const doctor = doctors.find(d => d._id === doctorId);
    setFormData(prev => ({
      ...prev,
      doctorId,
      consultationFee: doctor?.consultationFee || prev.consultationFee,
    }));
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setError(null);
    setLoading(true);

    try {
      // Validate
      if (!formData.patientId || !formData.doctorId) {
        throw new Error('Please select both patient and doctor');
      }
      if (!formData.scheduledDate || !formData.scheduledTime) {
        throw new Error('Please set scheduled date and time');
      }

      // Build scheduled times
      const scheduledStartTime = new Date(`${formData.scheduledDate}T${formData.scheduledTime}`);
      const scheduledEndTime = new Date(scheduledStartTime.getTime() + formData.duration * 60 * 1000);

      const payload = {
        patientId: formData.patientId,
        doctorId: formData.doctorId,
        consultationType: formData.consultationType,
        scheduledStartTime: scheduledStartTime.toISOString(),
        scheduledEndTime: scheduledEndTime.toISOString(),
        chiefComplaint: formData.chiefComplaint,
        consultationFee: formData.consultationFee,
        doctorNotes: formData.notes,
      };

      const res = await fetch('/api/telemedicine/sessions', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload),
      });

      if (!res.ok) {
        const data = await res.json();
        throw new Error(data.error || 'Failed to create session');
      }

      const session = await res.json();
      router.push(`/telemedicine/sessions/${session._id}`);
    } catch (error: any) {
      setError(error.message);
    } finally {
      setLoading(false);
    }
  };

  const filteredPatients = patients.filter(p => {
    if (!p || !p.name) return false;
    const search = patientSearch.toLowerCase();
    return (
      (p.name?.toLowerCase() || '').includes(search) ||
      (p.patientId?.toLowerCase() || '').includes(search) ||
      (p.email?.toLowerCase() || '').includes(search)
    );
  });

  const filteredDoctors = doctors.filter(d => {
    if (!d || !d.name) return false;
    const search = doctorSearch.toLowerCase();
    return (
      (d.name?.toLowerCase() || '').includes(search) ||
      (d.specialization?.toLowerCase() || '').includes(search)
    );
  });

  return (
    <SidebarLayout title="Schedule New Session" description="Create a new telemedicine consultation">
      <div className="space-y-6">
        <Link
          href="/telemedicine"
          className="inline-flex items-center gap-2 text-gray-500 hover:text-gray-700"
        >
          <ArrowLeft className="w-4 h-4" />
          Back to Telemedicine
        </Link>

        {error && (
          <div className="bg-red-50 border border-red-200 rounded-lg p-4 flex items-center gap-2">
            <AlertCircle className="w-5 h-5 text-red-500" />
            <span className="text-red-700">{error}</span>
          </div>
        )}

        <form onSubmit={handleSubmit} className="max-w-4xl space-y-6">
          <div className="bg-white rounded-lg shadow-sm p-6">
            <h2 className="text-lg font-semibold text-gray-900 mb-4">Consultation Type</h2>
            <div className="grid grid-cols-3 gap-4">
              {[
                { type: 'video', icon: Video, label: 'Video Call', desc: 'Face-to-face video consultation' },
                { type: 'audio', icon: Phone, label: 'Audio Call', desc: 'Voice-only consultation' },
                { type: 'chat', icon: MessageCircle, label: 'Chat', desc: 'Text-based consultation' },
              ].map(({ type, icon: Icon, label, desc }) => (
                <button
                  key={type}
                  type="button"
                  onClick={() => setFormData(prev => ({ ...prev, consultationType: type as any }))}
                  className={`p-4 rounded-lg border-2 text-left transition-all ${
                    formData.consultationType === type
                      ? 'border-blue-500 bg-blue-50'
                      : 'border-gray-200 hover:border-gray-300'
                  }`}
                >
                  <Icon className={`w-8 h-8 mb-2 ${
                    formData.consultationType === type ? 'text-blue-600' : 'text-gray-400'
                  }`} />
                  <p className="font-medium text-gray-900">{label}</p>
                  <p className="text-sm text-gray-500">{desc}</p>
                </button>
              ))}
            </div>
          </div>

          <div className="grid grid-cols-2 gap-6">
            {/* Patient Selection */}
            <div className="bg-white rounded-lg shadow-sm p-6">
              <h2 className="text-lg font-semibold text-gray-900 mb-4 flex items-center gap-2">
                <User className="w-5 h-5 text-blue-600" />
                Select Patient
              </h2>
              <input
                type="text"
                placeholder="Search patients..."
                value={patientSearch}
                onChange={(e) => setPatientSearch(e.target.value)}
                className="w-full px-4 py-2 border border-gray-300 rounded-lg mb-4 focus:ring-2 focus:ring-blue-500"
              />
              <div className="max-h-60 overflow-y-auto space-y-2">
                {filteredPatients.map(patient => (
                  <button
                    key={patient._id}
                    type="button"
                    onClick={() => setFormData(prev => ({ ...prev, patientId: patient._id }))}
                    className={`w-full p-3 rounded-lg border text-left transition-colors ${
                      formData.patientId === patient._id
                        ? 'border-blue-500 bg-blue-50'
                        : 'border-gray-200 hover:bg-gray-50'
                    }`}
                  >
                    <p className="font-medium text-gray-900">
                      {patient.name}
                    </p>
                    <p className="text-sm text-gray-500">{patient.patientId}</p>
                  </button>
                ))}
              </div>
            </div>

            {/* Doctor Selection */}
            <div className="bg-white rounded-lg shadow-sm p-6">
              <h2 className="text-lg font-semibold text-gray-900 mb-4 flex items-center gap-2">
                <Stethoscope className="w-5 h-5 text-green-600" />
                Select Doctor
              </h2>
              <input
                type="text"
                placeholder="Search doctors..."
                value={doctorSearch}
                onChange={(e) => setDoctorSearch(e.target.value)}
                className="w-full px-4 py-2 border border-gray-300 rounded-lg mb-4 focus:ring-2 focus:ring-blue-500"
              />
              <div className="max-h-60 overflow-y-auto space-y-2">
                {filteredDoctors.map(doctor => (
                  <button
                    key={doctor._id}
                    type="button"
                    onClick={() => handleDoctorSelect(doctor._id)}
                    className={`w-full p-3 rounded-lg border text-left transition-colors ${
                      formData.doctorId === doctor._id
                        ? 'border-blue-500 bg-blue-50'
                        : 'border-gray-200 hover:bg-gray-50'
                    }`}
                  >
                    <p className="font-medium text-gray-900">Dr. {doctor.name}</p>
                    <p className="text-sm text-gray-500">{doctor.specialization || 'General'}</p>
                    {doctor.consultationFee && (
                      <p className="text-sm text-green-600">${doctor.consultationFee}</p>
                    )}
                  </button>
                ))}
              </div>
            </div>
          </div>

          {/* Schedule */}
          <div className="bg-white rounded-lg shadow-sm p-6">
            <h2 className="text-lg font-semibold text-gray-900 mb-4 flex items-center gap-2">
              <Calendar className="w-5 h-5 text-purple-600" />
              Schedule
            </h2>
            <div className="grid grid-cols-3 gap-4">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Date</label>
                <input
                  type="date"
                  value={formData.scheduledDate}
                  onChange={(e) => setFormData(prev => ({ ...prev, scheduledDate: e.target.value }))}
                  className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
                  required
                />
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Time</label>
                <input
                  type="time"
                  value={formData.scheduledTime}
                  onChange={(e) => setFormData(prev => ({ ...prev, scheduledTime: e.target.value }))}
                  className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
                  required
                />
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Duration</label>
                <select
                  value={formData.duration}
                  onChange={(e) => setFormData(prev => ({ ...prev, duration: parseInt(e.target.value) }))}
                  className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
                >
                  <option value={15}>15 minutes</option>
                  <option value={30}>30 minutes</option>
                  <option value={45}>45 minutes</option>
                  <option value={60}>1 hour</option>
                  <option value={90}>1.5 hours</option>
                </select>
              </div>
            </div>
          </div>

          {/* Additional Details */}
          <div className="bg-white rounded-lg shadow-sm p-6">
            <h2 className="text-lg font-semibold text-gray-900 mb-4 flex items-center gap-2">
              <FileText className="w-5 h-5 text-orange-600" />
              Additional Details
            </h2>
            <div className="space-y-4">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Chief Complaint</label>
                <input
                  type="text"
                  value={formData.chiefComplaint}
                  onChange={(e) => setFormData(prev => ({ ...prev, chiefComplaint: e.target.value }))}
                  placeholder="e.g., Follow-up consultation, New symptoms..."
                  className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
                />
              </div>
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    Consultation Fee (USD)
                  </label>
                  <div className="relative">
                    <DollarSign className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
                    <input
                      type="number"
                      value={formData.consultationFee}
                      onChange={(e) => setFormData(prev => ({ ...prev, consultationFee: parseFloat(e.target.value) || 0 }))}
                      className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
                      min="0"
                      step="0.01"
                    />
                  </div>
                </div>
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Notes</label>
                <textarea
                  value={formData.notes}
                  onChange={(e) => setFormData(prev => ({ ...prev, notes: e.target.value }))}
                  placeholder="Any additional notes for this session..."
                  rows={3}
                  className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
                />
              </div>
            </div>
          </div>

          {/* Submit */}
          <div className="flex items-center justify-end gap-4">
            <Link
              href="/telemedicine"
              className="px-6 py-2 text-gray-600 hover:text-gray-800"
            >
              Cancel
            </Link>
            <button
              type="submit"
              disabled={loading}
              className="px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-medium transition-colors disabled:opacity-50"
            >
              {loading ? 'Creating...' : 'Schedule Session'}
            </button>
          </div>
        </form>
      </div>
    </SidebarLayout>
  );
}