import { useState } from 'react'
import { Eye, EyeOff } from 'lucide-react'
import { Input } from '@/components/ui/Input'
import { Textarea } from '@/components/ui/Textarea'
import { useScriptGeneratorStore } from '@/store/scriptGeneratorStore'
import type { ScriptParameter } from '@/types'

interface Props {
  param: ScriptParameter
  value: string
  error: string | undefined
  disabled: boolean
}

export function ScriptParameterField({ param, value, error, disabled }: Props) {
  const setParamValue = useScriptGeneratorStore(s => s.setParamValue)
  const [showPassword, setShowPassword] = useState(false)

  const id = `param-${param.key}`

  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
    setParamValue(param.key, e.target.value)
  }

  const handleCheckbox = (e: React.ChangeEvent<HTMLInputElement>) => {
    setParamValue(param.key, e.target.checked ? 'true' : 'false')
  }

  let input: React.ReactNode

  // Track whether the shared Input/Textarea component renders the error internally
  // (so we skip the manual <p> at the bottom for these types)
  let errorRenderedByComponent = false

  if (param.type === 'text' || param.type === 'multi_text' || param.type === 'number') {
    errorRenderedByComponent = true
    input = (
      <Input
        id={id}
        type={param.type === 'number' ? 'number' : 'text'}
        value={value}
        onChange={handleChange}
        placeholder={
          param.type === 'multi_text'
            ? 'Comma-separated values'
            : (param.placeholder ?? undefined)
        }
        disabled={disabled}
        error={error}
      />
    )
  } else if (param.type === 'password') {
    errorRenderedByComponent = true
    input = (
      <div className="relative">
        <Input
          id={id}
          type={showPassword ? 'text' : 'password'}
          value={value}
          onChange={handleChange}
          placeholder={param.placeholder ?? undefined}
          disabled={disabled}
          error={error}
        />
        <button
          type="button"
          onClick={() => setShowPassword(v => !v)}
          className="absolute right-2.5 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
          tabIndex={-1}
          aria-label={showPassword ? 'Hide password' : 'Show password'}
        >
          {showPassword ? <EyeOff size={14} /> : <Eye size={14} />}
        </button>
      </div>
    )
  } else if (param.type === 'textarea') {
    errorRenderedByComponent = true
    input = (
      <Textarea
        id={id}
        value={value}
        onChange={handleChange}
        placeholder={param.placeholder ?? undefined}
        disabled={disabled}
        rows={4}
        error={error}
      />
    )
  } else if (param.type === 'select') {
    input = (
      <select
        id={id}
        value={value}
        onChange={handleChange}
        disabled={disabled}
        className="w-full rounded-[10px] border border-border bg-card text-foreground px-3 py-2 text-sm focus:outline-none focus:border-[rgba(249,115,22,0.3)] disabled:cursor-not-allowed disabled:opacity-50"
      >
        <option value="">Select…</option>
        {(param.options ?? []).map(opt => (
          <option key={opt.value} value={opt.value}>
            {opt.label}
          </option>
        ))}
      </select>
    )
  } else if (param.type === 'boolean') {
    input = (
      <div className="flex items-center gap-2">
        <input
          id={id}
          type="checkbox"
          checked={value === 'true'}
          onChange={handleCheckbox}
          disabled={disabled}
          className="rounded border-border disabled:cursor-not-allowed disabled:opacity-50"
        />
        <label htmlFor={id} className="text-sm text-foreground">
          {param.label}
        </label>
      </div>
    )
  } else {
    // Fallback for unknown types
    errorRenderedByComponent = true
    input = (
      <Input
        id={id}
        value={value}
        onChange={handleChange}
        disabled={disabled}
        error={error}
      />
    )
  }

  // Boolean renders its own label inline; all others show the label above
  const showTopLabel = param.type !== 'boolean'

  return (
    <div className="flex flex-col gap-1">
      {showTopLabel && (
        <label htmlFor={id} className="text-sm font-medium text-foreground">
          {param.label}
          {param.required && <span className="text-red-400 ml-0.5">*</span>}
        </label>
      )}
      {input}
      {param.help_text && (
        <p className="text-xs text-muted-foreground mt-1">{param.help_text}</p>
      )}
      {!errorRenderedByComponent && error && (
        <p className="mt-1.5 text-xs text-red-400">{error}</p>
      )}
    </div>
  )
}