'use client';

import { useState, useEffect, Suspense } from 'react';
import { useRouter, useSearchParams } from 'next/navigation';
import Link from 'next/link';
import ProtectedRoute from '@/app/protected-route';
import SidebarLayout from '@/app/components/sidebar-layout';
import { useTranslations } from '@/app/hooks/useTranslations';
import { ArrowLeft, Save } from 'lucide-react';

interface Ward {
  _id: string;
  wardNumber: string;
  name: string;
  type: string;
  dailyRate: number;
}

function NewBedForm() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const { t, translationsLoaded } = useTranslations();
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');
  const [wards, setWards] = useState<Ward[]>([]);

  const preselectedWardId = searchParams.get('wardId') || '';

  const [formData, setFormData] = useState({
    bedNumber: '',
    wardId: preselectedWardId,
    type: 'standard',
    status: 'available',
    features: [] as string[],
    dailyRate: 0,
    position: '',
    notes: '',
    isActive: true,
  });

  const [newFeature, setNewFeature] = useState('');

  useEffect(() => {
    fetchWards();
  }, []);

  useEffect(() => {
    if (preselectedWardId) {
      setFormData(prev => ({ ...prev, wardId: preselectedWardId }));
      // Set daily rate from ward
      const ward = wards.find(w => w._id === preselectedWardId);
      if (ward) {
        setFormData(prev => ({ ...prev, dailyRate: ward.dailyRate }));
      }
    }
  }, [preselectedWardId, wards]);

  const fetchWards = async () => {
    try {
      const response = await fetch('/api/inpatient/wards?isActive=true');
      if (response.ok) {
        const data = await response.json();
        setWards(data);
      }
    } catch (error) {
      console.error('Error fetching wards:', error);
    }
  };

  const handleWardChange = (wardId: string) => {
    const ward = wards.find(w => w._id === wardId);
    setFormData({
      ...formData,
      wardId,
      dailyRate: ward?.dailyRate || 0
    });
  };

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

    try {
      const response = await fetch('/api/inpatient/beds', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(formData),
      });

      if (response.ok) {
        if (preselectedWardId) {
          router.push(`/inpatient/wards/${preselectedWardId}`);
        } else {
          router.push('/inpatient/beds');
        }
      } else {
        const data = await response.json();
        setError(data.error || t('common.error'));
      }
    } catch (err) {
      setError(t('common.error'));
    } finally {
      setLoading(false);
    }
  };

  const addFeature = () => {
    if (newFeature.trim() && !formData.features.includes(newFeature.trim())) {
      setFormData({
        ...formData,
        features: [...formData.features, newFeature.trim()]
      });
      setNewFeature('');
    }
  };

  const removeFeature = (feature: string) => {
    setFormData({
      ...formData,
      features: formData.features.filter(f => f !== feature)
    });
  };

  if (!translationsLoaded) {
    return (
      <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>
    );
  }

  return (
    <div className="max-w-3xl">
      <Link
        href={preselectedWardId ? `/inpatient/wards/${preselectedWardId}` : '/inpatient/beds'}
        className="inline-flex items-center gap-2 text-gray-600 hover:text-gray-900 mb-6"
      >
        <ArrowLeft className="h-5 w-5" />
        <span>{t('common.back')}</span>
      </Link>

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

      <form onSubmit={handleSubmit} className="bg-white rounded-lg shadow-sm p-6 space-y-6">
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          {/* Bed Number */}
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">
              {t('inpatient.bedNumber')} *
            </label>
            <input
              type="text"
              required
              value={formData.bedNumber}
              onChange={(e) => setFormData({ ...formData, bedNumber: e.target.value })}
              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
              placeholder="e.g., B-001"
            />
          </div>

          {/* Ward Selection */}
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">
              {t('inpatient.ward')} *
            </label>
            <select
              required
              value={formData.wardId}
              onChange={(e) => handleWardChange(e.target.value)}
              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
            >
              <option value="">{t('inpatient.selectWard')}</option>
              {wards.map((ward) => (
                <option key={ward._id} value={ward._id}>
                  {ward.name} ({ward.wardNumber})
                </option>
              ))}
            </select>
          </div>

          {/* Bed Type */}
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">
              {t('inpatient.bedType')} *
            </label>
            <select
              required
              value={formData.type}
              onChange={(e) => setFormData({ ...formData, type: e.target.value })}
              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
            >
              <option value="standard">{t('inpatient.bedTypes.standard')}</option>
              <option value="electric">{t('inpatient.bedTypes.electric')}</option>
              <option value="icu">{t('inpatient.bedTypes.icu')}</option>
              <option value="pediatric">{t('inpatient.bedTypes.pediatric')}</option>
              <option value="bariatric">{t('inpatient.bedTypes.bariatric')}</option>
              <option value="stretcher">{t('inpatient.bedTypes.stretcher')}</option>
            </select>
          </div>

          {/* Status */}
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">
              {t('inpatient.status')} *
            </label>
            <select
              required
              value={formData.status}
              onChange={(e) => setFormData({ ...formData, status: e.target.value })}
              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
            >
              <option value="available">{t('inpatient.bedStatus.available')}</option>
              <option value="maintenance">{t('inpatient.bedStatus.maintenance')}</option>
              <option value="cleaning">{t('inpatient.bedStatus.cleaning')}</option>
            </select>
          </div>

          {/* Daily Rate */}
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">
              {t('inpatient.dailyRate')} *
            </label>
            <input
              type="number"
              required
              min="0"
              step="0.01"
              value={formData.dailyRate}
              onChange={(e) => setFormData({ ...formData, dailyRate: parseFloat(e.target.value) })}
              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
            />
          </div>

          {/* Position */}
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">
              {t('inpatient.position')}
            </label>
            <input
              type="text"
              value={formData.position}
              onChange={(e) => setFormData({ ...formData, position: e.target.value })}
              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
              placeholder="e.g., Window, Aisle"
            />
          </div>
        </div>

        {/* Notes */}
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-1">
            {t('inpatient.notes')}
          </label>
          <textarea
            rows={2}
            value={formData.notes}
            onChange={(e) => setFormData({ ...formData, notes: e.target.value })}
            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
          />
        </div>

        {/* Features */}
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-1">
            {t('inpatient.features')}
          </label>
          <div className="flex gap-2 mb-2">
            <input
              type="text"
              value={newFeature}
              onChange={(e) => setNewFeature(e.target.value)}
              onKeyPress={(e) => e.key === 'Enter' && (e.preventDefault(), addFeature())}
              className="flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
              placeholder={t('inpatient.featurePlaceholder')}
            />
            <button
              type="button"
              onClick={addFeature}
              className="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors"
            >
              {t('common.add')}
            </button>
          </div>
          <div className="flex flex-wrap gap-2">
            {formData.features.map((feature, index) => (
              <span
                key={index}
                className="inline-flex items-center gap-1 px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm"
              >
                {feature}
                <button
                  type="button"
                  onClick={() => removeFeature(feature)}
                  className="hover:text-blue-600"
                >
                  ×
                </button>
              </span>
            ))}
          </div>
        </div>

        {/* Active Status */}
        <div className="flex items-center gap-2">
          <input
            type="checkbox"
            id="isActive"
            checked={formData.isActive}
            onChange={(e) => setFormData({ ...formData, isActive: e.target.checked })}
            className="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
          />
          <label htmlFor="isActive" className="text-sm font-medium text-gray-700">
            {t('inpatient.bedActive')}
          </label>
        </div>

        {/* Submit */}
        <div className="flex items-center gap-4 pt-4 border-t border-gray-200">
          <button
            type="submit"
            disabled={loading}
            className="flex items-center gap-2 px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
          >
            <Save className="h-5 w-5" />
            <span>{loading ? t('common.saving') : t('common.save')}</span>
          </button>
          <Link
            href={preselectedWardId ? `/inpatient/wards/${preselectedWardId}` : '/inpatient/beds'}
            className="px-6 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors"
          >
            {t('common.cancel')}
          </Link>
        </div>
      </form>
    </div>
  );
}

export default function NewBedPage() {
  const { t } = useTranslations();

  return (
    <ProtectedRoute>
      <SidebarLayout
        title={t('inpatient.addBed')}
        description={t('inpatient.addBedDescription')}
      >
        <Suspense fallback={
          <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>
        }>
          <NewBedForm />
        </Suspense>
      </SidebarLayout>
    </ProtectedRoute>
  );
}