'use client';

import { useState, useEffect, Suspense } from 'react';
import { useRouter, useSearchParams } from 'next/navigation';
import { useSession } from 'next-auth/react';
import Link from 'next/link';
import { 
  ArrowLeft,
  UserPlus,
  Save,
  Phone,
  GraduationCap,
  Building,
  FileText,
  Award,
  Calendar,
  MapPin,
  User
} from 'lucide-react';
import ProtectedRoute from '../../protected-route';
import SidebarLayout from '../../components/sidebar-layout';
import { useTranslations } from '../../hooks/useTranslations';

function NewDoctorForm() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const { data: session } = useSession();
  const { t } = useTranslations();
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState<string | null>(null);
  
  // Get role from query parameter or default to 'doctor'
  const roleParam = searchParams.get('role') as 'doctor' | 'admin' | 'staff' | null;
  const defaultRole = (roleParam && ['doctor', 'admin', 'staff'].includes(roleParam)) ? roleParam : 'doctor';
  
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    password: '',
    role: defaultRole as 'doctor' | 'admin' | 'staff',
    phone: '',
    specialization: '',
    department: '',
    licenseNumber: '',
    qualifications: [] as string[],
    yearsOfExperience: '',
    bio: '',
    address: '',
    dateOfBirth: '',
    gender: '' as 'male' | 'female' | 'other' | 'prefer-not-to-say' | ''
  });
  
  const [newQualification, setNewQualification] = useState('');

  // Update role if query parameter changes
  useEffect(() => {
    if (roleParam && ['doctor', 'admin', 'staff'].includes(roleParam)) {
      setFormData(prev => ({ ...prev, role: roleParam as 'doctor' | 'admin' | 'staff' }));
    }
  }, [roleParam]);

  // Check if user is admin
  const isAdmin = session?.user?.role === 'admin';

  if (!isAdmin) {
    router.push('/');
    return null;
  }

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setSaving(true);
    setError(null);
    
    try {
      const response = await fetch('/api/doctors', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(formData),
      });

      if (response.ok) {
        // Redirect to appropriate page based on role
        if (formData.role === 'admin') {
          router.push('/admins');
        } else if (formData.role === 'staff') {
          router.push('/staff');
        } else {
          router.push('/doctors');
        }
      } else {
        const errorData = await response.json();
        setError(errorData.error || t('doctors.newPage.failedToCreate'));
      }
    } catch (error) {
      console.error('Error creating doctor:', error);
      setError(t('doctors.newPage.errorCreating'));
    } finally {
      setSaving(false);
    }
  };

  return (
    <ProtectedRoute>
      <SidebarLayout 
        title={formData.role === 'admin' ? t('doctors.newPage.addNewAdmin') : formData.role === 'staff' ? t('doctors.newPage.addNewStaff') : t('doctors.newPage.addNewDoctor')}
        description={formData.role === 'admin' ? t('doctors.newPage.createAdminAccount') : formData.role === 'staff' ? t('doctors.newPage.createStaffAccount') : t('doctors.newPage.createDoctorAccount')}
      >
        <div className="max-w-2xl mx-auto">
          {/* Back Button */}
          <div className="mb-6">
            <Link
              href={formData.role === 'admin' ? '/admins' : formData.role === 'staff' ? '/staff' : '/doctors'}
              className="inline-flex items-center space-x-2 text-gray-600 hover:text-gray-900 transition-colors"
            >
              <ArrowLeft className="h-4 w-4" />
              <span>{formData.role === 'admin' ? t('doctors.newPage.backToAdmins') : formData.role === 'staff' ? t('doctors.newPage.backToStaff') : t('doctors.newPage.backToDoctors')}</span>
            </Link>
          </div>

          {/* Error Message */}
          {error && (
            <div className="mb-6 p-4 bg-red-50 border border-red-200 rounded-lg text-red-800">
              {error}
            </div>
          )}

          {/* Form Card */}
          <div className="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
            <div className={`px-6 py-4 ${formData.role === 'admin' ? 'bg-gradient-to-r from-red-600 to-pink-600' : formData.role === 'staff' ? 'bg-gradient-to-r from-green-600 to-emerald-600' : 'bg-gradient-to-r from-blue-600 to-indigo-600'}`}>
              <div className="flex items-center space-x-3">
                <div className="w-10 h-10 bg-white/20 rounded-lg flex items-center justify-center">
                  <UserPlus className="h-6 w-6 text-white" />
                </div>
                <div>
                  <h2 className="text-xl font-semibold text-white">
                    {formData.role === 'admin' ? t('doctors.newPage.addNewAdmin') : formData.role === 'staff' ? t('doctors.newPage.addNewStaff') : t('doctors.newPage.addNewDoctor')}
                  </h2>
                  <p className="text-sm text-white/80">
                    {formData.role === 'admin' ? t('doctors.newPage.createAdminAccount') : formData.role === 'staff' ? t('doctors.newPage.createStaffAccount') : t('doctors.newPage.createDoctorAccount')}
                  </p>
                </div>
              </div>
            </div>

            <form onSubmit={handleSubmit} className="p-6 space-y-6">
              {/* Basic Information Section */}
              <div className="border-b border-gray-200 pb-4">
                <h3 className="text-lg font-semibold text-gray-900 mb-4">{t('doctors.newPage.basicInformation')}</h3>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div>
                    <label htmlFor="name" className="block text-sm font-medium text-gray-700 mb-2">
                      {t('doctors.newPage.fullName')} <span className="text-red-500">*</span>
                    </label>
                    <input
                      type="text"
                      id="name"
                      required
                      value={formData.name}
                      onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                      placeholder={t('doctors.newPage.enterFullName')}
                      className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                    />
                  </div>

                  <div>
                    <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-2">
                      {t('doctors.newPage.emailAddress')} <span className="text-red-500">*</span>
                    </label>
                    <input
                      type="email"
                      id="email"
                      required
                      value={formData.email}
                      onChange={(e) => setFormData({ ...formData, email: e.target.value })}
                      placeholder="doctor@example.com"
                      className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                    />
                    <p className="mt-1 text-xs text-gray-500">{t('doctors.newPage.usedForLogin')}</p>
                  </div>

                  <div>
                    <label htmlFor="phone" className="block text-sm font-medium text-gray-700 mb-2">
                      {t('doctors.newPage.phoneNumber')}
                    </label>
                    <div className="relative">
                      <Phone className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
                      <input
                        type="tel"
                        id="phone"
                        value={formData.phone}
                        onChange={(e) => setFormData({ ...formData, phone: e.target.value })}
                        placeholder="+1-555-0123"
                        className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                      />
                    </div>
                  </div>

                  <div>
                    <label htmlFor="dateOfBirth" className="block text-sm font-medium text-gray-700 mb-2">
                      {t('doctors.newPage.dateOfBirth')}
                    </label>
                    <div className="relative">
                      <Calendar className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
                      <input
                        type="date"
                        id="dateOfBirth"
                        value={formData.dateOfBirth}
                        onChange={(e) => setFormData({ ...formData, dateOfBirth: 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 focus:border-blue-500"
                      />
                    </div>
                  </div>

                  <div>
                    <label htmlFor="gender" className="block text-sm font-medium text-gray-700 mb-2">
                      {t('doctors.newPage.gender')}
                    </label>
                    <select
                      id="gender"
                      value={formData.gender}
                      onChange={(e) => setFormData({ ...formData, gender: e.target.value as any })}
                      className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                    >
                      <option value="">{t('doctors.newPage.selectGender')}</option>
                      <option value="male">{t('doctors.newPage.male')}</option>
                      <option value="female">{t('doctors.newPage.female')}</option>
                      <option value="other">{t('doctors.newPage.other')}</option>
                      <option value="prefer-not-to-say">{t('doctors.newPage.preferNotToSay')}</option>
                    </select>
                  </div>

                  <div>
                    <label htmlFor="address" className="block text-sm font-medium text-gray-700 mb-2">
                      {t('doctors.newPage.address')}
                    </label>
                    <div className="relative">
                      <MapPin className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
                      <input
                        type="text"
                        id="address"
                        value={formData.address}
                        onChange={(e) => setFormData({ ...formData, address: e.target.value })}
                        placeholder={t('doctors.newPage.addressPlaceholder')}
                        className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                      />
                    </div>
                  </div>
                </div>
              </div>

              {/* Professional Information Section - Only for doctors */}
              {(formData.role === 'doctor' || formData.role === 'staff') && (
                <div className="border-b border-gray-200 pb-4">
                  <h3 className="text-lg font-semibold text-gray-900 mb-4">{t('doctors.newPage.professionalInformation')}</h3>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                      <label htmlFor="specialization" className="block text-sm font-medium text-gray-700 mb-2">
                        {t('doctors.newPage.specialization')}
                      </label>
                      <div className="relative">
                        <GraduationCap className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
                        <input
                          type="text"
                          id="specialization"
                          value={formData.specialization}
                          onChange={(e) => setFormData({ ...formData, specialization: e.target.value })}
                          placeholder={t('doctors.newPage.specializationPlaceholder')}
                          className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                        />
                      </div>
                    </div>

                    <div>
                      <label htmlFor="department" className="block text-sm font-medium text-gray-700 mb-2">
                        {t('doctors.newPage.department')}
                      </label>
                      <div className="relative">
                        <Building className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
                        <input
                          type="text"
                          id="department"
                          value={formData.department}
                          onChange={(e) => setFormData({ ...formData, department: e.target.value })}
                          placeholder={t('doctors.newPage.departmentPlaceholder')}
                          className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                        />
                      </div>
                    </div>

                    <div>
                      <label htmlFor="licenseNumber" className="block text-sm font-medium text-gray-700 mb-2">
                        {t('doctors.newPage.licenseNumber')}
                      </label>
                      <div className="relative">
                        <FileText className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
                        <input
                          type="text"
                          id="licenseNumber"
                          value={formData.licenseNumber}
                          onChange={(e) => setFormData({ ...formData, licenseNumber: e.target.value })}
                          placeholder={t('doctors.newPage.licenseNumberPlaceholder')}
                          className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                        />
                      </div>
                    </div>

                    <div>
                      <label htmlFor="yearsOfExperience" className="block text-sm font-medium text-gray-700 mb-2">
                        {t('doctors.newPage.yearsOfExperience')}
                      </label>
                      <input
                        type="number"
                        id="yearsOfExperience"
                        min="0"
                        max="50"
                        value={formData.yearsOfExperience}
                        onChange={(e) => setFormData({ ...formData, yearsOfExperience: e.target.value })}
                        placeholder="0"
                        className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                      />
                    </div>

                    <div className="md:col-span-2">
                      <label htmlFor="qualifications" className="block text-sm font-medium text-gray-700 mb-2">
                        {t('doctors.newPage.qualifications')}
                      </label>
                      <div className="flex gap-2 mb-2">
                        <div className="relative flex-1">
                          <Award className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
                          <input
                            type="text"
                            value={newQualification}
                            onChange={(e) => setNewQualification(e.target.value)}
                            onKeyPress={(e) => {
                              if (e.key === 'Enter') {
                                e.preventDefault();
                                if (newQualification.trim()) {
                                  setFormData({
                                    ...formData,
                                    qualifications: [...formData.qualifications, newQualification.trim()]
                                  });
                                  setNewQualification('');
                                }
                              }
                            }}
                            placeholder={t('doctors.newPage.qualificationsPlaceholder')}
                            className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                          />
                        </div>
                        <button
                          type="button"
                          onClick={() => {
                            if (newQualification.trim()) {
                              setFormData({
                                ...formData,
                                qualifications: [...formData.qualifications, newQualification.trim()]
                              });
                              setNewQualification('');
                            }
                          }}
                          className="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200"
                        >
                          {t('doctors.newPage.add')}
                        </button>
                      </div>
                      {formData.qualifications.length > 0 && (
                        <div className="flex flex-wrap gap-2">
                          {formData.qualifications.map((qual, index) => (
                            <span
                              key={index}
                              className="inline-flex items-center px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm"
                            >
                              {qual}
                              <button
                                type="button"
                                onClick={() => {
                                  setFormData({
                                    ...formData,
                                    qualifications: formData.qualifications.filter((_, i) => i !== index)
                                  });
                                }}
                                className="ml-2 text-blue-600 hover:text-blue-800"
                              >
                                ×
                              </button>
                            </span>
                          ))}
                        </div>
                      )}
                    </div>

                    <div className="md:col-span-2">
                      <label htmlFor="bio" className="block text-sm font-medium text-gray-700 mb-2">
                        {t('doctors.newPage.biography')}
                      </label>
                      <textarea
                        id="bio"
                        value={formData.bio}
                        onChange={(e) => setFormData({ ...formData, bio: e.target.value })}
                        placeholder={t('doctors.newPage.biographyPlaceholder')}
                        rows={4}
                        className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                      />
                    </div>
                  </div>
                </div>
              )}

              {/* Account Information Section */}
              <div>
                <h3 className="text-lg font-semibold text-gray-900 mb-4">{t('doctors.newPage.accountInformation')}</h3>
                <div className="space-y-4">
                  <div>
                    <label htmlFor="password" className="block text-sm font-medium text-gray-700 mb-2">
                      {t('doctors.form.password')} <span className="text-red-500">*</span>
                    </label>
                    <input
                      type="password"
                      id="password"
                      required
                      value={formData.password}
                      onChange={(e) => setFormData({ ...formData, password: e.target.value })}
                      placeholder={t('doctors.newPage.passwordPlaceholder')}
                      minLength={6}
                      className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                    />
                    <p className="mt-1 text-xs text-gray-500">{t('doctors.newPage.passwordRequirements')}</p>
                  </div>

                  {/* Role is automatically set based on the page, no need to show it */}
                  <input type="hidden" value={formData.role} />
                  <div className="bg-gray-50 border border-gray-200 rounded-lg p-4">
                    <p className="text-sm text-gray-700">
                      <span className="font-medium">{t('doctors.newPage.roleLabel')}:</span>{' '}
                      <span className="capitalize">{t(`doctors.roles.${formData.role}`)}</span>
                      {formData.role === 'admin' && ` - ${t('doctors.newPage.adminAccess')}`}
                      {formData.role === 'doctor' && ` - ${t('doctors.newPage.doctorAccess')}`}
                      {formData.role === 'staff' && ` - ${t('doctors.newPage.staffAccess')}`}
                    </p>
                  </div>
                </div>
              </div>

              <div className="flex items-center justify-between pt-6 border-t border-gray-200">
                <Link
                  href="/doctors"
                  className="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors"
                >
                  {t('doctors.newPage.cancel')}
                </Link>
                <button
                  type="submit"
                  disabled={saving}
                  className="inline-flex items-center space-x-2 px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
                >
                  <Save className="h-4 w-4" />
                  <span>{saving ? t('doctors.newPage.creating') : formData.role === 'admin' ? t('doctors.newPage.createAdmin') : formData.role === 'staff' ? t('doctors.newPage.createStaff') : t('doctors.newPage.createDoctor')}</span>
                </button>
              </div>
            </form>
          </div>
        </div>
      </SidebarLayout>
    </ProtectedRoute>
  );
}

export default function NewDoctorPage() {
  return (
    <ProtectedRoute>
      <Suspense fallback={
        <SidebarLayout title="" description="">
          <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-blue-600 mx-auto"></div>
              <p className="mt-4 text-gray-600"></p>
            </div>
          </div>
        </SidebarLayout>
      }>
        <NewDoctorForm />
      </Suspense>
    </ProtectedRoute>
  );
}