/**
 * EscalateInterceptDialog — popover anchored above the Escalate button.
 *
 * Fires when the engineer clicks Escalate while a fix is in Verifying or
 * Partial state. Captures the fix outcome before the escalation so the
 * handoff narrative is honest for whoever picks up the ticket.
 *
 * Visual reference: docs/FlowAssist_Migration/mockups/07-verify-states.html
 * (panel C).
 */
import { useState } from 'react'
import { X, AlertCircle, Check, Info } from 'lucide-react'
import { cn } from '@/lib/utils'
import type { FixOutcome } from '@/api/sessionSuggestedFixes'

export type InterceptChoice = FixOutcome | 'never_applied'

export interface EscalateInterceptDialogProps {
  fixTitle: string
  onChoose: (choice: InterceptChoice, notes?: string) => void
  onClose: () => void
}

export function EscalateInterceptDialog({
  fixTitle,
  onChoose,
  onClose,
}: EscalateInterceptDialogProps) {
  const [partialStep, setPartialStep] = useState(false)
  const [partialNotes, setPartialNotes] = useState('')

  const notesValid = partialNotes.trim().length > 0

  return (
    <>
      <div
        className="fixed inset-0 z-40"
        onClick={onClose}
        aria-hidden="true"
      />
      <div
        role="dialog"
        aria-label="Capture fix outcome before escalating"
        className="absolute top-full mt-2 right-0 z-50 w-[340px] rounded-lg border border-white/15 bg-card p-3.5 shadow-[0_18px_40px_rgba(0,0,0,0.55)]"
      >
        {!partialStep ? (
          <>
            <div className="font-heading font-semibold text-[13px] text-heading mb-1">
              Before escalating — what happened with the fix?
            </div>
            <div className="text-[12px] text-muted-foreground leading-[1.5] mb-3">
              &ldquo;{fixTitle}&rdquo; is still in the Verifying state. Tag its outcome so
              the senior picking this up knows what&apos;s been tried.
            </div>
            <div className="flex flex-col gap-1.5">
              <button
                autoFocus
                onClick={() => onChoose('applied_failed')}
                className="flex items-center gap-2.5 px-3 py-2.5 rounded-lg border border-danger/30 bg-danger-dim text-[12.5px] text-primary hover:bg-danger-dim/80 hover:border-danger transition-colors text-left"
              >
                <X size={13} strokeWidth={2.5} className="text-danger" />
                <span className="flex-1">The fix didn&apos;t work</span>
                <span className="text-[10.5px] text-muted-foreground font-mono px-1.5 py-[2px] rounded bg-white/[0.05]">↵</span>
              </button>
              <button
                onClick={() => setPartialStep(true)}
                className="flex items-center gap-2.5 px-3 py-2.5 rounded-lg border border-white/10 bg-elevated text-[12.5px] text-primary hover:bg-sidebar transition-colors text-left"
              >
                <Info size={13} strokeWidth={2} />
                <span className="flex-1">I applied some of it — partial</span>
              </button>
              <button
                onClick={() => onChoose('applied_success')}
                className="flex items-center gap-2.5 px-3 py-2.5 rounded-lg border border-white/10 bg-elevated text-[12.5px] text-primary hover:bg-sidebar transition-colors text-left"
              >
                <Check size={13} strokeWidth={2} />
                <span className="flex-1">It worked — escalating for another reason</span>
              </button>
              <button
                onClick={() => onChoose('never_applied')}
                className="flex items-center gap-2.5 px-3 py-2.5 rounded-lg border border-white/10 bg-elevated text-[12.5px] text-primary hover:bg-sidebar transition-colors text-left"
              >
                <AlertCircle size={13} strokeWidth={2} />
                <span className="flex-1">Never actually applied it</span>
              </button>
            </div>
          </>
        ) : (
          <>
            <div className="font-heading font-semibold text-[13px] text-heading mb-1">
              What partially worked?
            </div>
            <div className="text-[12px] text-muted-foreground leading-[1.5] mb-3">
              A short note for whoever picks this up — what you tried, what worked, what&apos;s still broken.
            </div>
            <textarea
              autoFocus
              value={partialNotes}
              onChange={(e) => setPartialNotes(e.target.value)}
              placeholder="e.g. Cleared cached creds; rebuild profile still hung on sync."
              className="w-full h-24 resize-none rounded-md border border-white/10 bg-elevated px-2.5 py-2 text-[12.5px] text-primary placeholder:text-muted-foreground focus:outline-none focus:border-accent"
            />
            <div className="flex items-center justify-between gap-2 mt-3">
              <button
                onClick={() => {
                  setPartialStep(false)
                  setPartialNotes('')
                }}
                className="text-[12px] text-muted-foreground hover:text-primary transition-colors"
              >
                ← Back
              </button>
              <button
                onClick={() => onChoose('applied_partial', partialNotes.trim())}
                disabled={!notesValid}
                className={cn(
                  'px-3 py-1.5 rounded text-[12.5px] font-semibold transition-colors',
                  'bg-accent text-[#0a0d14] hover:brightness-110 disabled:opacity-50 disabled:cursor-not-allowed',
                )}
              >
                Record partial &amp; escalate
              </button>
            </div>
          </>
        )}
      </div>
    </>
  )
}

export default EscalateInterceptDialog
