import { useState } from 'react'
import { ChevronDown, ChevronRight, GripVertical, Trash2, Plus, X } from 'lucide-react'
import { Input } from '@/components/ui/Input'
import type { ScriptParameter, ScriptParameterOption, ScriptParameterValidation } from '@/types'

const PARAM_TYPES = [
  { value: 'text', label: 'Text' },
  { value: 'password', label: 'Password' },
  { value: 'textarea', label: 'Textarea' },
  { value: 'number', label: 'Number' },
  { value: 'boolean', label: 'Boolean' },
  { value: 'select', label: 'Select' },
  { value: 'multi_text', label: 'Multi-text' },
] as const

interface Props {
  param: ScriptParameter
  index: number
  onChange: (index: number, updated: ScriptParameter) => void
  onRemove: (index: number) => void
  onMoveUp: (index: number) => void
  onMoveDown: (index: number) => void
  isFirst: boolean
  isLast: boolean
  disabled?: boolean
}

export function ParameterCard({
  param, index, onChange, onRemove, onMoveUp, onMoveDown, isFirst, isLast, disabled,
}: Props) {
  const [expanded, setExpanded] = useState(true)

  const update = (patch: Partial<ScriptParameter>) => {
    onChange(index, { ...param, ...patch })
  }

  const updateOption = (optIndex: number, patch: Partial<ScriptParameterOption>) => {
    const options = [...(param.options ?? [])]
    options[optIndex] = { ...options[optIndex], ...patch }
    update({ options })
  }

  const addOption = () => {
    const options = [...(param.options ?? []), { value: '', label: '' }]
    update({ options })
  }

  const removeOption = (optIndex: number) => {
    const options = (param.options ?? []).filter((_, i) => i !== optIndex)
    update({ options })
  }

  const updateValidation = (patch: Partial<ScriptParameterValidation>) => {
    update({ validation: { ...(param.validation ?? {}), ...patch } })
  }

  return (
    <div className="border border-border rounded-xl overflow-hidden">
      {/* Header */}
      <button
        type="button"
        onClick={() => setExpanded(v => !v)}
        className="w-full flex items-center gap-2 px-3 py-2.5 bg-white/[0.02] hover:bg-white/[0.04] transition-colors"
      >
        <GripVertical size={14} className="text-muted-foreground/50 shrink-0" />
        {expanded ? <ChevronDown size={14} className="text-muted-foreground" /> : <ChevronRight size={14} className="text-muted-foreground" />}
        <span className="text-sm font-medium text-foreground flex-1 text-left">
          {param.label || param.key || `Parameter ${index + 1}`}
        </span>
        <span className="font-label text-[0.625rem] text-muted-foreground uppercase">{param.type}</span>
        {param.required && <span className="text-red-400 text-xs">*</span>}
      </button>

      {/* Body */}
      {expanded && (
        <div className="px-3 py-3 space-y-3 border-t border-border">
          {/* Row 1: key + label */}
          <div className="grid grid-cols-2 gap-3">
            <div>
              <label className="text-xs text-muted-foreground mb-1 block">Key (used in &#123;&#123;key&#125;&#125;)</label>
              <Input
                value={param.key}
                onChange={e => update({ key: e.target.value.replace(/[^a-zA-Z0-9_]/g, '') })}
                placeholder="param_key"
                disabled={disabled}
              />
            </div>
            <div>
              <label className="text-xs text-muted-foreground mb-1 block">Label</label>
              <Input
                value={param.label}
                onChange={e => update({ label: e.target.value })}
                placeholder="Display Label"
                disabled={disabled}
              />
            </div>
          </div>

          {/* Row 2: type + group */}
          <div className="grid grid-cols-2 gap-3">
            <div>
              <label className="text-xs text-muted-foreground mb-1 block">Type</label>
              <select
                value={param.type}
                onChange={e => update({ type: e.target.value as ScriptParameter['type'] })}
                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(6,182,212,0.3)] disabled:cursor-not-allowed disabled:opacity-50"
              >
                {PARAM_TYPES.map(t => (
                  <option key={t.value} value={t.value}>{t.label}</option>
                ))}
              </select>
            </div>
            <div>
              <label className="text-xs text-muted-foreground mb-1 block">Group (optional)</label>
              <Input
                value={param.group ?? ''}
                onChange={e => update({ group: e.target.value || null })}
                placeholder="e.g. User Identity"
                disabled={disabled}
              />
            </div>
          </div>

          {/* Row 3: placeholder + help text */}
          <div className="grid grid-cols-2 gap-3">
            <div>
              <label className="text-xs text-muted-foreground mb-1 block">Placeholder</label>
              <Input
                value={param.placeholder ?? ''}
                onChange={e => update({ placeholder: e.target.value || null })}
                placeholder="Placeholder text"
                disabled={disabled}
              />
            </div>
            <div>
              <label className="text-xs text-muted-foreground mb-1 block">Help text</label>
              <Input
                value={param.help_text ?? ''}
                onChange={e => update({ help_text: e.target.value || null })}
                placeholder="Help text shown below field"
                disabled={disabled}
              />
            </div>
          </div>

          {/* Row 4: toggles */}
          <div className="flex items-center gap-4">
            <label className="flex items-center gap-2 text-sm text-foreground">
              <input
                type="checkbox"
                checked={param.required}
                onChange={e => update({ required: e.target.checked })}
                disabled={disabled}
                className="rounded border-border"
              />
              Required
            </label>
            <label className="flex items-center gap-2 text-sm text-foreground">
              <input
                type="checkbox"
                checked={param.sensitive}
                onChange={e => update({ sensitive: e.target.checked })}
                disabled={disabled}
                className="rounded border-border"
              />
              Sensitive (redacted in logs)
            </label>
          </div>

          {/* Default value */}
          <div>
            <label className="text-xs text-muted-foreground mb-1 block">Default value</label>
            <Input
              value={param.default !== null && param.default !== undefined ? String(param.default) : ''}
              onChange={e => update({ default: e.target.value || null })}
              placeholder="Default value"
              disabled={disabled}
            />
          </div>

          {/* Select options (only for select type) */}
          {param.type === 'select' && (
            <div>
              <label className="text-xs text-muted-foreground mb-1 block">Options</label>
              <div className="space-y-1.5">
                {(param.options ?? []).map((opt, i) => (
                  <div key={i} className="flex items-center gap-2">
                    <Input
                      value={opt.value}
                      onChange={e => updateOption(i, { value: e.target.value })}
                      placeholder="value"
                      disabled={disabled}
                    />
                    <Input
                      value={opt.label}
                      onChange={e => updateOption(i, { label: e.target.value })}
                      placeholder="label"
                      disabled={disabled}
                    />
                    <button
                      type="button"
                      onClick={() => removeOption(i)}
                      disabled={disabled}
                      className="p-1 text-muted-foreground hover:text-rose-500 transition-colors"
                    >
                      <X size={14} />
                    </button>
                  </div>
                ))}
                <button
                  type="button"
                  onClick={addOption}
                  disabled={disabled}
                  className="flex items-center gap-1 text-xs text-primary hover:underline"
                >
                  <Plus size={12} /> Add option
                </button>
              </div>
            </div>
          )}

          {/* Validation (for text/number types) */}
          {(param.type === 'text' || param.type === 'number' || param.type === 'textarea') && (
            <div>
              <label className="text-xs text-muted-foreground mb-1 block">Validation (optional)</label>
              <div className="grid grid-cols-3 gap-2">
                {param.type === 'number' ? (
                  <>
                    <div>
                      <label className="text-[0.625rem] text-muted-foreground">Min value</label>
                      <Input
                        type="number"
                        value={param.validation?.min_value ?? ''}
                        onChange={e => updateValidation({ min_value: e.target.value ? Number(e.target.value) : undefined })}
                        disabled={disabled}
                      />
                    </div>
                    <div>
                      <label className="text-[0.625rem] text-muted-foreground">Max value</label>
                      <Input
                        type="number"
                        value={param.validation?.max_value ?? ''}
                        onChange={e => updateValidation({ max_value: e.target.value ? Number(e.target.value) : undefined })}
                        disabled={disabled}
                      />
                    </div>
                  </>
                ) : (
                  <>
                    <div>
                      <label className="text-[0.625rem] text-muted-foreground">Min length</label>
                      <Input
                        type="number"
                        value={param.validation?.min_length ?? ''}
                        onChange={e => updateValidation({ min_length: e.target.value ? Number(e.target.value) : undefined })}
                        disabled={disabled}
                      />
                    </div>
                    <div>
                      <label className="text-[0.625rem] text-muted-foreground">Max length</label>
                      <Input
                        type="number"
                        value={param.validation?.max_length ?? ''}
                        onChange={e => updateValidation({ max_length: e.target.value ? Number(e.target.value) : undefined })}
                        disabled={disabled}
                      />
                    </div>
                  </>
                )}
                <div>
                  <label className="text-[0.625rem] text-muted-foreground">Pattern (regex)</label>
                  <Input
                    value={param.validation?.pattern ?? ''}
                    onChange={e => updateValidation({ pattern: e.target.value || undefined })}
                    placeholder="^[a-z]+$"
                    disabled={disabled}
                  />
                </div>
              </div>
            </div>
          )}

          {/* Actions row */}
          <div className="flex items-center justify-between pt-1 border-t border-border">
            <div className="flex items-center gap-1">
              <button
                type="button"
                onClick={() => onMoveUp(index)}
                disabled={isFirst || disabled}
                className="text-xs text-muted-foreground hover:text-foreground disabled:opacity-30 px-1.5 py-0.5"
              >
                ↑ Up
              </button>
              <button
                type="button"
                onClick={() => onMoveDown(index)}
                disabled={isLast || disabled}
                className="text-xs text-muted-foreground hover:text-foreground disabled:opacity-30 px-1.5 py-0.5"
              >
                ↓ Down
              </button>
            </div>
            <button
              type="button"
              onClick={() => onRemove(index)}
              disabled={disabled}
              className="flex items-center gap-1 text-xs text-rose-500 hover:text-rose-400 transition-colors px-1.5 py-0.5"
            >
              <Trash2 size={12} /> Remove
            </button>
          </div>
        </div>
      )}
    </div>
  )
}