import { useEffect, useState } from 'react'
import type { CreateExperimentRequest, UpdateExperimentRequest, ScheduleStatus, ResultsStatus, ExperimentPhase, MachineType } from '../lib/supabase'
import { experimentPhaseManagement, machineTypeManagement } from '../lib/supabase'

interface ExperimentFormProps {
  initialData?: Partial<CreateExperimentRequest & { schedule_status: ScheduleStatus; results_status: ResultsStatus; completion_status: boolean }>
  onSubmit: (data: CreateExperimentRequest | UpdateExperimentRequest) => Promise<void>
  onCancel: () => void
  isEditing?: boolean
  loading?: boolean
  phaseId?: string
}

export function ExperimentForm({ initialData, onSubmit, onCancel, isEditing = false, loading = false, phaseId }: ExperimentFormProps) {
  const [formData, setFormData] = useState<CreateExperimentRequest & { schedule_status: ScheduleStatus; results_status: ResultsStatus; completion_status: boolean }>({
    experiment_number: initialData?.experiment_number || 0,
    reps_required: initialData?.reps_required || 1,
    weight_per_repetition_lbs: (initialData as any)?.weight_per_repetition_lbs || 1,
    soaking_duration_hr: initialData?.soaking_duration_hr || 0,
    air_drying_time_min: initialData?.air_drying_time_min || 0,
    plate_contact_frequency_hz: initialData?.plate_contact_frequency_hz || 1,
    throughput_rate_pecans_sec: initialData?.throughput_rate_pecans_sec || 1,
    crush_amount_in: initialData?.crush_amount_in || 0,
    entry_exit_height_diff_in: initialData?.entry_exit_height_diff_in || 0,
    // Meyer-specific (UI only)
    motor_speed_hz: (initialData as any)?.motor_speed_hz || 1,
    jig_displacement_inches: (initialData as any)?.jig_displacement_inches || 0,
    spring_stiffness_nm: (initialData as any)?.spring_stiffness_nm || 1,
    schedule_status: initialData?.schedule_status || 'pending schedule',
    results_status: initialData?.results_status || 'valid',
    completion_status: initialData?.completion_status || false,
    phase_id: initialData?.phase_id || phaseId
  })

  const [errors, setErrors] = useState<Record<string, string>>({})
  const [phase, setPhase] = useState<ExperimentPhase | null>(null)
  const [crackingMachine, setCrackingMachine] = useState<MachineType | null>(null)
  const [metaLoading, setMetaLoading] = useState<boolean>(false)

  useEffect(() => {
    const loadMeta = async () => {
      if (!phaseId) return
      try {
        setMetaLoading(true)
        const p = await experimentPhaseManagement.getExperimentPhaseById(phaseId)
        setPhase(p)
        if (p?.has_cracking && p.cracking_machine_type_id) {
          const mt = await machineTypeManagement.getMachineTypeById(p.cracking_machine_type_id)
          setCrackingMachine(mt)
        } else {
          setCrackingMachine(null)
        }
      } catch (e) {
        console.warn('Failed to load phase/machine metadata', e)
      } finally {
        setMetaLoading(false)
      }
    }
    loadMeta()
  }, [phaseId])

  const validateForm = (): boolean => {
    const newErrors: Record<string, string> = {}

    // Required field validation
    if (!formData.experiment_number || formData.experiment_number <= 0) {
      newErrors.experiment_number = 'Experiment number must be a positive integer'
    }

    if (!formData.reps_required || formData.reps_required <= 0) {
      newErrors.reps_required = 'Repetitions required must be a positive integer'
    }

    if (!formData.weight_per_repetition_lbs || formData.weight_per_repetition_lbs <= 0) {
      newErrors.weight_per_repetition_lbs = 'Weight per repetition must be positive'
    }


    if (formData.soaking_duration_hr < 0) {
      newErrors.soaking_duration_hr = 'Soaking duration cannot be negative'
    }

    if (formData.air_drying_time_min < 0) {
      newErrors.air_drying_time_min = 'Air drying time cannot be negative'
    }

    // Validate cracking fields depending on machine
    if (phase?.has_cracking) {
      if (crackingMachine?.name === 'JC Cracker') {
        if (!formData.plate_contact_frequency_hz || formData.plate_contact_frequency_hz <= 0) {
          newErrors.plate_contact_frequency_hz = 'Plate contact frequency must be positive'
        }
        if (!formData.throughput_rate_pecans_sec || formData.throughput_rate_pecans_sec <= 0) {
          newErrors.throughput_rate_pecans_sec = 'Throughput rate must be positive'
        }
        if (formData.crush_amount_in < 0) {
          newErrors.crush_amount_in = 'Crush amount cannot be negative'
        }
      }
      if (crackingMachine?.name === 'Meyer Cracker') {
        if (!(formData as any).motor_speed_hz || (formData as any).motor_speed_hz <= 0) {
          newErrors.motor_speed_hz = 'Motor speed must be positive'
        }
        if ((formData as any).jig_displacement_inches === undefined) {
          newErrors.jig_displacement_inches = 'Jig displacement is required'
        }
        if (!(formData as any).spring_stiffness_nm || (formData as any).spring_stiffness_nm <= 0) {
          newErrors.spring_stiffness_nm = 'Spring stiffness must be positive'
        }
      }
    }

    setErrors(newErrors)
    return Object.keys(newErrors).length === 0
  }

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()

    if (!validateForm()) {
      return
    }

    try {
      // Prepare data for submission
      const submitData = isEditing ? formData : {
        experiment_number: formData.experiment_number,
        reps_required: formData.reps_required,
        weight_per_repetition_lbs: formData.weight_per_repetition_lbs,
        results_status: formData.results_status,
        completion_status: formData.completion_status,
        phase_id: formData.phase_id
      }

      await onSubmit(submitData)
    } catch (error) {
      console.error('Form submission error:', error)
    }
  }

  const handleInputChange = (field: keyof typeof formData, value: string | number | boolean) => {
    setFormData(prev => ({
      ...prev,
      [field]: value
    }))

    // Clear error for this field when user starts typing
    if (errors[field]) {
      setErrors(prev => ({
        ...prev,
        [field]: ''
      }))
    }
  }

  return (
    <form onSubmit={handleSubmit} className="space-y-6">
      {/* Basic Information */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div>
          <label htmlFor="experiment_number" className="block text-sm font-medium text-gray-700 mb-2">
            Experiment Number *
          </label>
          <input
            type="number"
            id="experiment_number"
            value={formData.experiment_number}
            onChange={(e) => handleInputChange('experiment_number', parseInt(e.target.value) || 0)}
            className={`max-w-xs px-3 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors text-sm ${errors.experiment_number ? 'border-red-300' : 'border-gray-300'
              }`}
            placeholder="Enter unique experiment number"
            min="1"
            step="1"
            required
          />
          {errors.experiment_number && (
            <p className="mt-1 text-sm text-red-600">{errors.experiment_number}</p>
          )}
        </div>

        <div>
          <label htmlFor="reps_required" className="block text-sm font-medium text-gray-700 mb-2">
            Repetitions Required *
          </label>
          <input
            type="number"
            id="reps_required"
            value={formData.reps_required}
            onChange={(e) => handleInputChange('reps_required', parseInt(e.target.value) || 1)}
            className={`max-w-xs px-3 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors text-sm ${errors.reps_required ? 'border-red-300' : 'border-gray-300'
              }`}
            placeholder="Total repetitions needed"
            min="1"
            step="1"
            required
          />
          {errors.reps_required && (
            <p className="mt-1 text-sm text-red-600">{errors.reps_required}</p>
          )}
        </div>

        <div>
          <label htmlFor="weight_per_repetition_lbs" className="block text-sm font-medium text-gray-700 mb-2">
            Weight per Repetition (lbs) *
          </label>
          <input
            type="number"
            id="weight_per_repetition_lbs"
            value={formData.weight_per_repetition_lbs}
            onChange={(e) => handleInputChange('weight_per_repetition_lbs' as any, parseFloat(e.target.value) || 0)}
            className={`max-w-xs px-3 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors text-sm ${errors.weight_per_repetition_lbs ? 'border-red-300' : 'border-gray-300'}`}
            placeholder="e.g. 10.0"
            min="0.1"
            step="0.1"
            required
          />
          {errors.weight_per_repetition_lbs && (
            <p className="mt-1 text-sm text-red-600">{errors.weight_per_repetition_lbs}</p>
          )}
        </div>

      </div>

      {/* Dynamic Sections by Phase */}
      <div className="border-t pt-6 space-y-8">
        {/* Soaking */}
        {phase?.has_soaking && (
          <div>
            <h3 className="text-lg font-medium text-gray-900 mb-4">Soaking</h3>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <label htmlFor="soaking_duration_hr" className="block text-sm font-medium text-gray-700 mb-2">
                  Soaking Duration (hours) *
                </label>
                <input
                  type="number"
                  id="soaking_duration_hr"
                  value={formData.soaking_duration_hr}
                  onChange={(e) => handleInputChange('soaking_duration_hr', parseFloat(e.target.value) || 0)}
                  className={`max-w-xs px-3 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors text-sm ${errors.soaking_duration_hr ? 'border-red-300' : 'border-gray-300'}`}
                  placeholder="0.0"
                  min="0"
                  step="0.1"
                  required
                />
                {errors.soaking_duration_hr && (
                  <p className="mt-1 text-sm text-red-600">{errors.soaking_duration_hr}</p>
                )}
              </div>
            </div>
          </div>
        )}

        {/* Air-Drying */}
        {phase?.has_airdrying && (
          <div>
            <h3 className="text-lg font-medium text-gray-900 mb-4">Air-Drying</h3>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <label htmlFor="air_drying_time_min" className="block text-sm font-medium text-gray-700 mb-2">
                  Air Drying Time (minutes) *
                </label>
                <input
                  type="number"
                  id="air_drying_time_min"
                  value={formData.air_drying_time_min}
                  onChange={(e) => handleInputChange('air_drying_time_min', parseInt(e.target.value) || 0)}
                  className={`max-w-xs px-3 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors text-sm ${errors.air_drying_time_min ? 'border-red-300' : 'border-gray-300'}`}
                  placeholder="0"
                  min="0"
                  step="1"
                  required
                />
                {errors.air_drying_time_min && (
                  <p className="mt-1 text-sm text-red-600">{errors.air_drying_time_min}</p>
                )}
              </div>
            </div>
          </div>
        )}

        {/* Cracking - machine specific */}
        {phase?.has_cracking && (
          <div>
            <h3 className="text-lg font-medium text-gray-900 mb-4">Cracking {crackingMachine ? `(${crackingMachine.name})` : ''}</h3>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              {crackingMachine?.name === 'JC Cracker' && (
                <>
                  <div>
                    <label htmlFor="plate_contact_frequency_hz" className="block text-sm font-medium text-gray-700 mb-2">
                      Plate Contact Frequency (Hz) *
                    </label>
                    <input
                      type="number"
                      id="plate_contact_frequency_hz"
                      value={formData.plate_contact_frequency_hz}
                      onChange={(e) => handleInputChange('plate_contact_frequency_hz', parseFloat(e.target.value) || 1)}
                      className={`max-w-xs px-3 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors text-sm ${errors.plate_contact_frequency_hz ? 'border-red-300' : 'border-gray-300'}`}
                      placeholder="1.0"
                      min="0.1"
                      step="0.1"
                      required
                    />
                    {errors.plate_contact_frequency_hz && (
                      <p className="mt-1 text-sm text-red-600">{errors.plate_contact_frequency_hz}</p>
                    )}
                  </div>

                  <div>
                    <label htmlFor="throughput_rate_pecans_sec" className="block text-sm font-medium text-gray-700 mb-2">
                      Throughput Rate (pecans/sec) *
                    </label>
                    <input
                      type="number"
                      id="throughput_rate_pecans_sec"
                      value={formData.throughput_rate_pecans_sec}
                      onChange={(e) => handleInputChange('throughput_rate_pecans_sec', parseFloat(e.target.value) || 1)}
                      className={`max-w-xs px-3 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors text-sm ${errors.throughput_rate_pecans_sec ? 'border-red-300' : 'border-gray-300'}`}
                      placeholder="1.0"
                      min="0.1"
                      step="0.1"
                      required
                    />
                    {errors.throughput_rate_pecans_sec && (
                      <p className="mt-1 text-sm text-red-600">{errors.throughput_rate_pecans_sec}</p>
                    )}
                  </div>

                  <div>
                    <label htmlFor="crush_amount_in" className="block text-sm font-medium text-gray-700 mb-2">
                      Crush Amount (thousandths of inch) *
                    </label>
                    <input
                      type="number"
                      id="crush_amount_in"
                      value={formData.crush_amount_in}
                      onChange={(e) => handleInputChange('crush_amount_in', parseFloat(e.target.value) || 0)}
                      className={`max-w-xs px-3 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors text-sm ${errors.crush_amount_in ? 'border-red-300' : 'border-gray-300'}`}
                      placeholder="0.0"
                      min="0"
                      step="0.001"
                      required
                    />
                    {errors.crush_amount_in && (
                      <p className="mt-1 text-sm text-red-600">{errors.crush_amount_in}</p>
                    )}
                  </div>

                  <div className="md:col-span-2">
                    <label htmlFor="entry_exit_height_diff_in" className="block text-sm font-medium text-gray-700 mb-2">
                      Entry/Exit Height Difference (inches) *
                    </label>
                    <input
                      type="number"
                      id="entry_exit_height_diff_in"
                      value={formData.entry_exit_height_diff_in}
                      onChange={(e) => handleInputChange('entry_exit_height_diff_in', parseFloat(e.target.value) || 0)}
                      className={`max-w-sm px-3 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors text-sm ${errors.entry_exit_height_diff_in ? 'border-red-300' : 'border-gray-300'}`}
                      placeholder="0.0 (can be negative)"
                      step="0.1"
                      required
                    />
                    {errors.entry_exit_height_diff_in && (
                      <p className="mt-1 text-sm text-red-600">{errors.entry_exit_height_diff_in}</p>
                    )}
                    <p className="mt-1 text-sm text-gray-500">Positive values indicate entry is higher than exit</p>
                  </div>
                </>
              )}

              {crackingMachine?.name === 'Meyer Cracker' && (
                <>
                  <div>
                    <label htmlFor="motor_speed_hz" className="block text-sm font-medium text-gray-700 mb-2">
                      Motor Speed (Hz) *
                    </label>
                    <input
                      type="number"
                      id="motor_speed_hz"
                      value={(formData as any).motor_speed_hz}
                      onChange={(e) => handleInputChange('motor_speed_hz' as any, parseFloat(e.target.value) || 1)}
                      className={`max-w-xs px-3 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors text-sm ${errors.motor_speed_hz ? 'border-red-300' : 'border-gray-300'}`}
                      placeholder="1.0"
                      min="0.1"
                      step="0.1"
                      required
                    />
                    {errors.motor_speed_hz && (
                      <p className="mt-1 text-sm text-red-600">{errors.motor_speed_hz}</p>
                    )}
                  </div>

                  <div>
                    <label htmlFor="jig_displacement_inches" className="block text-sm font-medium text-gray-700 mb-2">
                      Jig Displacement (inches) *
                    </label>
                    <input
                      type="number"
                      id="jig_displacement_inches"
                      value={(formData as any).jig_displacement_inches}
                      onChange={(e) => handleInputChange('jig_displacement_inches' as any, parseFloat(e.target.value) || 0)}
                      className={`max-w-xs px-3 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors text-sm ${errors.jig_displacement_inches ? 'border-red-300' : 'border-gray-300'}`}
                      placeholder="0.0"
                      min="0"
                      step="0.01"
                      required
                    />
                    {errors.jig_displacement_inches && (
                      <p className="mt-1 text-sm text-red-600">{errors.jig_displacement_inches}</p>
                    )}
                  </div>

                  <div>
                    <label htmlFor="spring_stiffness_nm" className="block text-sm font-medium text-gray-700 mb-2">
                      Spring Stiffness (N·m) *
                    </label>
                    <input
                      type="number"
                      id="spring_stiffness_nm"
                      value={(formData as any).spring_stiffness_nm}
                      onChange={(e) => handleInputChange('spring_stiffness_nm' as any, parseFloat(e.target.value) || 1)}
                      className={`max-w-xs px-3 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors text-sm ${errors.spring_stiffness_nm ? 'border-red-300' : 'border-gray-300'}`}
                      placeholder="1.0"
                      min="0.1"
                      step="0.1"
                      required
                    />
                    {errors.spring_stiffness_nm && (
                      <p className="mt-1 text-sm text-red-600">{errors.spring_stiffness_nm}</p>
                    )}
                  </div>
                </>
              )}
            </div>
          </div>
        )}

        {/* Shelling */}
        {phase?.has_shelling && (
          <div>
            <h3 className="text-lg font-medium text-gray-900 mb-4">Shelling</h3>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">
                  Shelling Start Offset (minutes)
                </label>
                <input
                  type="number"
                  value={(formData as any).shelling_start_offset_min || 0}
                  onChange={(e) => handleInputChange('shelling_start_offset_min' as any, parseInt(e.target.value) || 0)}
                  className="max-w-xs px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors text-sm"
                  placeholder="0"
                  min="0"
                  step="1"
                />
              </div>
            </div>
          </div>
        )}
      </div>

      {/* Status Fields (only show when editing) */}
      {isEditing && (
        <div className="border-t pt-6">
          <h3 className="text-lg font-medium text-gray-900 mb-4">Status</h3>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
              <label htmlFor="schedule_status" className="block text-sm font-medium text-gray-700 mb-2">
                Schedule Status
              </label>
              <select
                id="schedule_status"
                value={formData.schedule_status}
                onChange={(e) => handleInputChange('schedule_status', e.target.value as ScheduleStatus)}
                className="max-w-xs px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors text-sm"
              >
                <option value="pending schedule">Pending Schedule</option>
                <option value="scheduled">Scheduled</option>
                <option value="canceled">Canceled</option>
                <option value="aborted">Aborted</option>
              </select>
            </div>

            <div>
              <label htmlFor="results_status" className="block text-sm font-medium text-gray-700 mb-2">
                Results Status
              </label>
              <select
                id="results_status"
                value={formData.results_status}
                onChange={(e) => handleInputChange('results_status', e.target.value as ResultsStatus)}
                className="max-w-xs px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors text-sm"
              >
                <option value="valid">Valid</option>
                <option value="invalid">Invalid</option>
              </select>
            </div>

            <div>
              <label htmlFor="completion_status" className="block text-sm font-medium text-gray-700 mb-2">
                Completion Status
              </label>
              <div className="flex items-center">
                <input
                  type="checkbox"
                  id="completion_status"
                  checked={formData.completion_status}
                  onChange={(e) => handleInputChange('completion_status', e.target.checked)}
                  className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
                />
                <label htmlFor="completion_status" className="ml-2 text-sm text-gray-700">
                  Mark as completed
                </label>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* Form Actions */}
      <div className="flex justify-end space-x-4 pt-6 border-t">
        <button
          type="button"
          onClick={onCancel}
          className="px-6 py-3 border border-gray-300 rounded-lg text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors"
        >
          Cancel
        </button>
        <button
          type="submit"
          disabled={loading}
          className="px-6 py-3 border border-transparent rounded-lg text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
        >
          {loading ? (isEditing ? 'Updating...' : 'Creating...') : (isEditing ? 'Update Experiment' : 'Create Experiment')}
        </button>
      </div>
    </form>
  )
}