resolutionflow/frontend/src/components/l1/WalkModals.tsx

import { useState } from 'react'

export interface ResolveModalProps {
  defaultNotes?: string
  onClose: () => void
  onConfirm: (helpful: boolean, notes: string) => Promise<void>
}

export function ResolveModal({ defaultNotes = '', onClose, onConfirm }: ResolveModalProps) {
  const [helpful, setHelpful] = useState<boolean | null>(null)
  const [notes, setNotes] = useState(defaultNotes)
  const [submitting, setSubmitting] = useState(false)

  return (
    <div className="fixed inset-0 bg-black/60 flex items-center justify-center z-50 p-4">
      <div className="bg-card border border-default rounded-lg p-6 max-w-md w-full">
        <h3 className="font-heading text-lg font-bold mb-4">Did this resolve it?</h3>
        <div className="flex gap-3 mb-4">
          <button
            onClick={() => setHelpful(true)}
            className={`flex-1 py-2 rounded-md transition-colors ${helpful === true ? 'bg-accent text-white' : 'border border-default hover:bg-elevated'}`}
          >
            Yes
          </button>
          <button
            onClick={() => setHelpful(false)}
            className={`flex-1 py-2 rounded-md transition-colors ${helpful === false ? 'bg-warning text-white' : 'border border-default hover:bg-elevated'}`}
          >
            No
          </button>
        </div>
        <textarea
          value={notes}
          onChange={(e) => setNotes(e.target.value)}
          rows={3}
          placeholder="Resolution notes…"
          className="w-full bg-page border border-default rounded-md px-3 py-2 text-sm mb-4 focus:outline-none focus:ring-2 focus:ring-accent/40"
        />
        <div className="flex justify-end gap-2">
          <button
            onClick={onClose}
            className="rounded-md border border-default px-4 py-2 text-sm hover:bg-elevated transition-colors"
          >
            Cancel
          </button>
          <button
            disabled={helpful === null || submitting}
            onClick={async () => {
              setSubmitting(true)
              try { await onConfirm(helpful!, notes) } finally { setSubmitting(false) }
            }}
            className="rounded-md bg-accent text-white px-4 py-2 text-sm disabled:opacity-50 hover:bg-accent/90 transition-colors"
          >
            {submitting ? 'Saving…' : 'Confirm'}
          </button>
        </div>
      </div>
    </div>
  )
}

export interface EscalateModalProps {
  onClose: () => void
  onConfirm: (category: string, reason: string) => Promise<void>
}

const REASON_CATEGORIES = [
  'Out of L1 scope',
  'Customer demanding senior',
  'Tree dead-ended',
  'AI tree wrong',
  'No KB available',
  'Other',
] as const

export function EscalateModal({ onClose, onConfirm }: EscalateModalProps) {
  const [category, setCategory] = useState<string>(REASON_CATEGORIES[0])
  const [reason, setReason] = useState('')
  const [submitting, setSubmitting] = useState(false)

  return (
    <div className="fixed inset-0 bg-black/60 flex items-center justify-center z-50 p-4">
      <div className="bg-card border border-default rounded-lg p-6 max-w-md w-full">
        <h3 className="font-heading text-lg font-bold mb-4">Escalate to engineering</h3>
        <label className="block text-xs uppercase tracking-wider text-muted-foreground mb-1">Reason</label>
        <select
          value={category}
          onChange={(e) => setCategory(e.target.value)}
          className="w-full bg-page border border-default rounded-md px-3 py-2 text-sm mb-3 focus:outline-none focus:ring-2 focus:ring-accent/40"
        >
          {REASON_CATEGORIES.map((c) => (<option key={c}>{c}</option>))}
        </select>
        <textarea
          value={reason}
          onChange={(e) => setReason(e.target.value)}
          rows={3}
          placeholder="Details (optional)…"
          className="w-full bg-page border border-default rounded-md px-3 py-2 text-sm mb-4 focus:outline-none focus:ring-2 focus:ring-accent/40"
        />
        <div className="flex justify-end gap-2">
          <button
            onClick={onClose}
            className="rounded-md border border-default px-4 py-2 text-sm hover:bg-elevated transition-colors"
          >
            Cancel
          </button>
          <button
            disabled={submitting}
            onClick={async () => {
              setSubmitting(true)
              try { await onConfirm(category, reason) } finally { setSubmitting(false) }
            }}
            className="rounded-md bg-warning text-white px-4 py-2 text-sm disabled:opacity-50 hover:bg-warning/90 transition-colors"
          >
            {submitting ? 'Escalating…' : 'Confirm escalate'}
          </button>
        </div>
      </div>
    </div>
  )
}