resolutionflow/frontend/src/components/procedural-editor/StepEditor.tsx

import { useState } from 'react'
import { ChevronUp, ChevronDown, AlertTriangle, Clock, ExternalLink, CheckSquare, Terminal, Settings2 } from 'lucide-react'
import type { ProceduralStep, StepContentType, IntakeFormField } from '@/types'
import { cn } from '@/lib/utils'

const CONTENT_TYPE_OPTIONS: { value: StepContentType; label: string; color: string }[] = [
  { value: 'action', label: 'Action', color: 'text-blue-400' },
  { value: 'informational', label: 'Info', color: 'text-muted-foreground' },
  { value: 'verification', label: 'Verify', color: 'text-emerald-400' },
  { value: 'warning', label: 'Warning', color: 'text-yellow-400' },
]

interface StepEditorProps {
  step: ProceduralStep
  stepNumber: number
  onUpdate: (updates: Partial<ProceduralStep>) => void
  onCollapse: () => void
  availableVariables: IntakeFormField[]
}

export function StepEditor({ step, stepNumber, onUpdate, onCollapse, availableVariables }: StepEditorProps) {
  const [showMore, setShowMore] = useState(false)

  // Section header steps get a minimal editor
  if (step.type === 'section_header') {
    return (
      <div className="bg-card border border-border rounded-xl p-4">
        <div className="mb-4 flex items-center justify-between">
          <span className="text-sm font-medium text-muted-foreground">Edit Section Header</span>
          <button
            onClick={onCollapse}
            className="rounded p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
          >
            <ChevronUp className="h-4 w-4" />
          </button>
        </div>
        <div>
          <label className="mb-1 block text-xs font-medium text-muted-foreground">Title</label>
          <input
            type="text"
            value={step.title}
            onChange={(e) => onUpdate({ title: e.target.value })}
            placeholder="Section title"
            className="w-full rounded border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
          />
        </div>
      </div>
    )
  }

  return (
    <div className="bg-card border border-border rounded-xl p-4">
      {/* Header */}
      <div className="mb-4 flex items-center justify-between">
        <div className="flex items-center gap-2">
          <span className="flex h-6 w-6 items-center justify-center rounded-full bg-accent text-xs font-medium text-foreground">
            {stepNumber}
          </span>
          <span className="text-sm font-medium text-foreground">Edit Step</span>
        </div>
        <button
          onClick={onCollapse}
          className="rounded p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
        >
          <ChevronUp className="h-4 w-4" />
        </button>
      </div>

      <div className="space-y-4">
        {/* Title */}
        <div>
          <label className="mb-1 block text-xs font-medium text-muted-foreground">Title</label>
          <input
            type="text"
            value={step.title}
            onChange={(e) => onUpdate({ title: e.target.value })}
            className="w-full rounded border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
          />
        </div>

        {/* Est. Minutes */}
        <div className="w-40">
          <label className="mb-1 flex items-center gap-1 text-xs font-medium text-muted-foreground">
            <Clock className="h-3 w-3" />
            Est. Minutes
          </label>
          <input
            type="number"
            value={step.estimated_minutes || ''}
            onChange={(e) => onUpdate({ estimated_minutes: e.target.value ? parseInt(e.target.value) : undefined })}
            placeholder="—"
            min={1}
            className="w-full rounded border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
          />
        </div>

        {/* Description */}
        <div>
          <label className="mb-1 block text-xs font-medium text-muted-foreground">Description / Instructions</label>
          <textarea
            value={step.description || ''}
            onChange={(e) => onUpdate({ description: e.target.value })}
            placeholder="Step instructions. Use [VAR:name] for variables."
            rows={4}
            className="w-full rounded border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
          />
          {availableVariables.length > 0 && (
            <div className="mt-1 flex flex-wrap gap-1">
              <span className="text-[10px] text-muted-foreground">Variables:</span>
              {availableVariables.map((v) => (
                <button
                  key={v.variable_name}
                  onClick={() => onUpdate({ description: (step.description || '') + `[VAR:${v.variable_name}]` })}
                  className="rounded bg-accent/50 px-1.5 py-0.5 font-mono text-[10px] text-muted-foreground hover:bg-accent hover:text-muted-foreground"
                >
                  {v.variable_name}
                </button>
              ))}
            </div>
          )}
        </div>

        {/* Commands */}
        <div>
          <label className="mb-1 flex items-center gap-1 text-xs font-medium text-muted-foreground">
            <Terminal className="h-3 w-3" />
            Commands (optional)
          </label>
          <textarea
            value={typeof step.commands === 'string' ? step.commands : (Array.isArray(step.commands) ? step.commands.map(c => c.code).join('\n\n') : '')}
            onChange={(e) => onUpdate({ commands: e.target.value || undefined })}
            placeholder="Install-WindowsFeature AD-Domain-Services -IncludeManagementTools"
            rows={3}
            className="w-full rounded border border-border bg-card px-3 py-2 font-mono text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
          />
        </div>

        {/* More Options toggle */}
        <button
          type="button"
          onClick={() => setShowMore(!showMore)}
          className="flex items-center gap-1.5 text-xs text-muted-foreground hover:text-muted-foreground"
        >
          <Settings2 className="h-3 w-3" />
          More Options
          {showMore ? <ChevronUp className="h-3 w-3" /> : <ChevronDown className="h-3 w-3" />}
        </button>

        {showMore && (
          <div className="space-y-4 border-t border-border pt-4">
            {/* Content Type */}
            <div>
              <label className="mb-1 block text-xs font-medium text-muted-foreground">Content Type</label>
              <div className="flex gap-1">
                {CONTENT_TYPE_OPTIONS.map((opt) => (
                  <button
                    key={opt.value}
                    onClick={() => onUpdate({ content_type: opt.value })}
                    className={cn(
                      'rounded px-2 py-1 text-xs font-medium transition-colors',
                      step.content_type === opt.value
                        ? 'bg-white/15 ' + opt.color
                        : 'text-muted-foreground hover:bg-accent hover:text-muted-foreground'
                    )}
                  >
                    {opt.label}
                  </button>
                ))}
              </div>
            </div>

            {/* Warning text */}
            {(step.content_type === 'warning' || step.warning_text) && (
              <div>
                <label className="mb-1 flex items-center gap-1 text-xs font-medium text-yellow-400/70">
                  <AlertTriangle className="h-3 w-3" />
                  Warning Text
                </label>
                <textarea
                  value={step.warning_text || ''}
                  onChange={(e) => onUpdate({ warning_text: e.target.value || undefined })}
                  placeholder="Caution: This will restart the service..."
                  rows={2}
                  className="w-full rounded border border-yellow-400/20 bg-yellow-400/5 px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-yellow-400/30 focus:outline-none focus:ring-1 focus:ring-yellow-400/20"
                />
              </div>
            )}

            {/* Expected Outcome */}
            <div>
              <label className="mb-1 block text-xs font-medium text-muted-foreground">Expected Outcome (optional)</label>
              <input
                type="text"
                value={step.expected_outcome || ''}
                onChange={(e) => onUpdate({ expected_outcome: e.target.value || undefined })}
                placeholder="Server should respond with..."
                className="w-full rounded border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
              />
            </div>

            {/* Verification */}
            <div className="grid grid-cols-2 gap-3">
              <div>
                <label className="mb-1 flex items-center gap-1 text-xs font-medium text-muted-foreground">
                  <CheckSquare className="h-3 w-3" />
                  Verification Prompt (optional)
                </label>
                <input
                  type="text"
                  value={step.verification_prompt || ''}
                  onChange={(e) => onUpdate({ verification_prompt: e.target.value || undefined })}
                  placeholder="Confirm the role was installed"
                  className="w-full rounded border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
                />
              </div>
              <div>
                <label className="mb-1 block text-xs font-medium text-muted-foreground">Verification Type</label>
                <select
                  value={step.verification_type || ''}
                  onChange={(e) => onUpdate({ verification_type: e.target.value as 'checkbox' | 'text_input' || undefined })}
                  className="w-full rounded border border-border bg-card px-3 py-2 text-sm text-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
                >
                  <option value="">None</option>
                  <option value="checkbox">Checkbox (confirm done)</option>
                  <option value="text_input">Text input (enter value)</option>
                </select>
              </div>
            </div>

            {/* Reference URL + Notes toggle */}
            <div className="grid grid-cols-2 gap-3">
              <div>
                <label className="mb-1 flex items-center gap-1 text-xs font-medium text-muted-foreground">
                  <ExternalLink className="h-3 w-3" />
                  Reference URL (optional)
                </label>
                <input
                  type="url"
                  value={step.reference_url || ''}
                  onChange={(e) => onUpdate({ reference_url: e.target.value || undefined })}
                  placeholder="https://learn.microsoft.com/..."
                  className="w-full rounded border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
                />
              </div>
              <div className="flex items-end pb-1">
                <label className="flex items-center gap-2 text-sm text-muted-foreground">
                  <input
                    type="checkbox"
                    checked={step.notes_enabled !== false}
                    onChange={(e) => onUpdate({ notes_enabled: e.target.checked })}
                    className="rounded border-border"
                  />
                  Allow tech notes
                </label>
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  )
}