import { useState } from 'react'
import type { IntakeFormField } from '@/types'
import { PasswordInput } from '@/components/common/PasswordInput'
import { cn } from '@/lib/utils'
import { Button } from '@/components/ui/Button'

interface IntakeFormModalProps {
  isOpen: boolean
  fields: IntakeFormField[]
  treeName: string
  onSubmit: (variables: Record<string, string>) => void
  onCancel: () => void
}

export function IntakeFormModal({ isOpen, fields, treeName, onSubmit, onCancel }: IntakeFormModalProps) {
  const [values, setValues] = useState<Record<string, string>>(() => {
    const initial: Record<string, string> = {}
    for (const field of fields) {
      initial[field.variable_name] = field.default_value || ''
    }
    return initial
  })
  const [errors, setErrors] = useState<Record<string, string>>({})

  if (!isOpen) return null

  const setValue = (variableName: string, value: string) => {
    setValues((prev) => ({ ...prev, [variableName]: value }))
    if (errors[variableName]) {
      setErrors((prev) => {
        const next = { ...prev }
        delete next[variableName]
        return next
      })
    }
  }

  const validate = (): boolean => {
    const newErrors: Record<string, string> = {}
    for (const field of fields) {
      const val = values[field.variable_name]?.trim()
      if (field.required && !val) {
        newErrors[field.variable_name] = `${field.label} is required`
      }
    }
    setErrors(newErrors)
    return Object.keys(newErrors).length === 0
  }

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    if (validate()) {
      // Only include non-empty values
      const cleanValues: Record<string, string> = {}
      for (const [key, val] of Object.entries(values)) {
        if (val.trim()) cleanValues[key] = val.trim()
      }
      onSubmit(cleanValues)
    }
  }

  // Group fields by group_name
  const groups = new Map<string, IntakeFormField[]>()
  for (const field of fields) {
    const group = field.group_name || ''
    if (!groups.has(group)) groups.set(group, [])
    groups.get(group)!.push(field)
  }

  const renderField = (field: IntakeFormField) => {
    const value = values[field.variable_name] || ''
    const error = errors[field.variable_name]

    const baseInputClass = cn(
      'w-full rounded-lg border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-hidden focus:ring-1',
      error
        ? 'border-red-400/50 focus:border-red-400 focus:ring-red-400/20'
        : 'border-border focus:border-primary focus:ring-primary/20'
    )

    let input: React.ReactNode

    switch (field.field_type) {
      case 'textarea':
        input = (
          <textarea
            value={value}
            onChange={(e) => setValue(field.variable_name, e.target.value)}
            placeholder={field.placeholder}
            rows={3}
            className={baseInputClass}
          />
        )
        break

      case 'number':
        input = (
          <input
            type="number"
            value={value}
            onChange={(e) => setValue(field.variable_name, e.target.value)}
            placeholder={field.placeholder}
            className={baseInputClass}
          />
        )
        break

      case 'checkbox':
        input = (
          <label className="flex items-center gap-2">
            <input
              type="checkbox"
              checked={value === 'true'}
              onChange={(e) => setValue(field.variable_name, e.target.checked ? 'true' : 'false')}
              className="rounded border-border"
            />
            <span className="text-sm text-muted-foreground">{field.placeholder || field.label}</span>
          </label>
        )
        break

      case 'password':
        input = (
          <PasswordInput
            value={value}
            onChange={(e) => setValue(field.variable_name, e.target.value)}
            placeholder={field.placeholder}
            className={baseInputClass}
          />
        )
        break

      case 'select':
        input = (
          <select
            value={value}
            onChange={(e) => setValue(field.variable_name, e.target.value)}
            className={baseInputClass}
          >
            <option value="">{field.placeholder || 'Select...'}</option>
            {(field.options || []).map((opt) => (
              <option key={opt} value={opt}>{opt}</option>
            ))}
          </select>
        )
        break

      case 'multi_select':
        input = (
          <div className="space-y-1">
            {(field.options || []).map((opt) => {
              const selected = value.split(',').filter(Boolean)
              const isChecked = selected.includes(opt)
              return (
                <label key={opt} className="flex items-center gap-2">
                  <input
                    type="checkbox"
                    checked={isChecked}
                    onChange={() => {
                      const next = isChecked
                        ? selected.filter((s) => s !== opt)
                        : [...selected, opt]
                      setValue(field.variable_name, next.join(','))
                    }}
                    className="rounded border-border"
                  />
                  <span className="text-sm text-muted-foreground">{opt}</span>
                </label>
              )
            })}
          </div>
        )
        break

      case 'url':
        input = (
          <input
            type="url"
            value={value}
            onChange={(e) => setValue(field.variable_name, e.target.value)}
            placeholder={field.placeholder || 'https://...'}
            className={baseInputClass}
          />
        )
        break

      default: // text, ip_address, email
        input = (
          <input
            type={field.field_type === 'email' ? 'email' : 'text'}
            value={value}
            onChange={(e) => setValue(field.variable_name, e.target.value)}
            placeholder={field.placeholder}
            className={baseInputClass}
          />
        )
    }

    return (
      <div key={field.variable_name}>
        <label className="mb-1 flex items-center gap-1 text-sm font-medium text-muted-foreground">
          {field.label}
          {field.required && <span className="text-red-400">*</span>}
        </label>
        {field.help_text && (
          <p className="mb-1.5 text-xs text-muted-foreground">{field.help_text}</p>
        )}
        {input}
        {error && <p className="mt-1 text-xs text-red-400">{error}</p>}
      </div>
    )
  }

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-xs">
      <div className="mx-4 w-full max-w-lg rounded-2xl border border-border bg-background shadow-xl">
        {/* Header */}
        <div className="border-b border-border px-6 py-4">
          <h2 className="text-lg font-semibold text-foreground">Project Information</h2>
          <p className="mt-0.5 text-sm text-muted-foreground">
            Fill in the details for <span className="text-muted-foreground">{treeName}</span>
          </p>
        </div>

        {/* Form */}
        <form onSubmit={handleSubmit}>
          <div className="max-h-[60vh] space-y-4 overflow-y-auto px-6 py-4">
            {Array.from(groups.entries()).map(([groupName, groupFields]) => (
              <div key={groupName}>
                {groupName && (
                  <h3 className="mb-3 border-b border-border pb-1 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
                    {groupName}
                  </h3>
                )}
                <div className="space-y-3">
                  {groupFields.map(renderField)}
                </div>
              </div>
            ))}
          </div>

          {/* Footer */}
          <div className="flex items-center justify-end gap-2 border-t border-border px-6 py-4">
            <Button
              type="button"
              variant="secondary"
              onClick={onCancel}
            >
              Cancel
            </Button>
            <Button type="submit">
              Start Procedure
            </Button>
          </div>
        </form>
      </div>
    </div>
  )
}