/**
 * ProposalBanner — chat-composer-anchored banner that carries the lifecycle
 * of a suggested fix from Proposed → Verifying → terminal outcome.
 *
 * Replaces the task-lane SuggestedFix card (Phase 8). The banner renders
 * above the chat composer in AssistantChatPage. Parent owns the fix record
 * and the outcome mutations; this component renders + dispatches callbacks.
 *
 * Visual reference: docs/FlowAssist_Migration/mockups/06-slide-up-banner.html
 * + 07-verify-states.html.
 */
import { useState } from 'react'
import { Sparkles, Check, ChevronDown, X, MoreHorizontal, Info } from 'lucide-react'
import { cn } from '@/lib/utils'
import type {
  SessionSuggestedFix,
  FixOutcome,
} from '@/api/sessionSuggestedFixes'

export type BannerMode =
  | 'proposed'       // AI just proposed; engineer hasn't applied yet
  | 'verifying'      // Engineer clicked Apply; awaiting outcome
  | 'partial'        // Applied partially; awaiting finish or terminal outcome
  | 'ai_confirming'  // AI emitted [FIX_OUTCOME]; engineer confirms
  | 'nudge'          // Compact nudge shown after N post-apply messages

export interface ProposalBannerProps {
  fix: SessionSuggestedFix
  mode: BannerMode
  onApply: () => void
  onDismiss: () => void
  onOutcome: (outcome: FixOutcome, notes?: string) => void
  onAcceptAIProposal: () => void
  onRejectAIProposal: () => void
  /** Collapsed variant shown as a thin single-line strip. */
  collapsed?: boolean
  onToggleCollapsed?: () => void
  /** Silence the nudge without collapsing it (Task 11 wires this). */
  onSilenceNudge: () => void
}

export function ProposalBanner(props: ProposalBannerProps) {
  if (props.collapsed) return <CollapsedBanner {...props} />
  switch (props.mode) {
    case 'proposed':      return <ProposedBanner {...props} />
    case 'verifying':     return <VerifyingBanner {...props} />
    case 'partial':       return <PartialBanner {...props} />
    case 'ai_confirming': return <AIConfirmingBanner {...props} />
    case 'nudge':         return <NudgeBanner {...props} />
  }
}

function ProposedBanner({ fix, onApply, onDismiss, onToggleCollapsed }: ProposalBannerProps) {
  return (
    <div className="relative border-t border-warning/30 bg-gradient-to-b from-warning-dim/40 to-warning-dim/20 px-5 py-3 animate-slide-up">
      <div className="absolute left-0 top-0 bottom-0 w-[3px] bg-warning" />
      <div className="flex items-start gap-3">
        <div className="shrink-0 mt-0.5 w-7 h-7 rounded-md border border-warning/30 bg-warning-dim flex items-center justify-center text-warning">
          <Sparkles size={15} />
        </div>
        <div className="flex-1 min-w-0">
          <div className="flex items-center gap-2 font-heading text-[10px] font-semibold uppercase tracking-[1.2px] text-warning">
            <span>Suggested Fix</span>
            <span className="tabular-nums px-2 py-[2px] rounded-full bg-warning/20 text-warning text-[10.5px] font-bold">
              {fix.confidence_pct}% confidence
            </span>
          </div>
          <div className="mt-0.5 text-[14px] font-semibold text-heading leading-snug">
            {fix.title}
          </div>
          <div className="mt-1 text-[12.5px] text-muted-foreground leading-relaxed">
            {fix.description}
          </div>
          {fix.script_template_id && (
            <div className="mt-1.5 inline-flex items-center gap-1.5 text-[11.5px] text-success">
              <Check size={11} />
              Matches an existing Script Library template — one-click apply
            </div>
          )}
        </div>
        <div className="flex items-center gap-2 shrink-0 pt-0.5">
          {onToggleCollapsed && (
            <button
              onClick={onToggleCollapsed}
              className="p-1.5 rounded text-muted-foreground hover:bg-white/[0.08] hover:text-primary"
              aria-label="Collapse"
            >
              <ChevronDown size={14} />
            </button>
          )}
          <button
            onClick={onDismiss}
            className="px-2.5 py-1.5 rounded text-[12.5px] text-muted-foreground hover:bg-white/[0.08] hover:text-primary"
          >
            Dismiss
          </button>
          <button
            onClick={onApply}
            className="px-3.5 py-[9px] rounded-lg bg-warning text-[#1a1200] font-semibold text-[12.5px] hover:brightness-110 inline-flex items-center gap-1.5"
          >
            Apply fix
            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="9 18 15 12 9 6" /></svg>
          </button>
        </div>
      </div>
    </div>
  )
}

function VerifyingBanner({ fix, onOutcome }: ProposalBannerProps) {
  const [showOverflow, setShowOverflow] = useState(false)
  const appliedLabel = fix.applied_at
    ? `Applied ${formatRelativeMinutes(fix.applied_at)}`
    : 'Applied'

  return (
    <div className="relative border-t border-warning/30 bg-gradient-to-b from-warning-dim/40 to-warning-dim/20 px-5 py-3 animate-slide-up">
      <div className="absolute left-0 top-0 bottom-0 w-[3px] bg-warning" />
      <div className="flex items-start gap-3">
        <div className="relative shrink-0 mt-0.5 w-7 h-7 rounded-md border border-warning/30 bg-warning-dim flex items-center justify-center text-warning">
          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <circle cx="12" cy="12" r="10" />
            <polyline points="12 6 12 12 16 14" />
          </svg>
          <span className="absolute inset-[-3px] rounded-lg animate-pulse-amber pointer-events-none" />
        </div>
        <div className="flex-1 min-w-0">
          <div className="flex items-center gap-2 font-heading text-[10px] font-semibold uppercase tracking-[1.2px] text-warning">
            <span>Verifying</span>
            <span className="px-2 py-[2px] rounded-full bg-warning/20 text-warning text-[10.5px] font-bold normal-case tracking-normal">
              {appliedLabel}
            </span>
          </div>
          <div className="mt-0.5 text-[14px] font-semibold text-heading leading-snug">
            Did "{fix.title}" work?
          </div>
          <div className="mt-1 text-[12.5px] text-muted-foreground leading-relaxed">
            Mark the outcome so the AI can either close the session with this as the resolution, or propose something else.
          </div>
        </div>
        <div className="flex items-center gap-2 shrink-0 pt-0.5 relative">
          <button
            onClick={() => setShowOverflow((v) => !v)}
            className="p-1.5 rounded text-muted-foreground hover:bg-white/[0.08] hover:text-primary"
            aria-label="More options"
          >
            <MoreHorizontal size={14} />
          </button>
          {showOverflow && (
            <div className={cn(
              'absolute top-full right-0 mt-1 w-48 rounded-lg',
              'border border-white/10 bg-card shadow-xl py-1 z-10',
            )}>
              <button
                onClick={() => {
                  setShowOverflow(false)
                  const notes = window.prompt('What did you run / skip?')
                  if (notes && notes.trim()) onOutcome('applied_partial', notes.trim())
                }}
                className="w-full text-left px-3 py-2 text-[12.5px] hover:bg-elevated text-primary"
              >
                Mark partial…
              </button>
            </div>
          )}
          <button
            onClick={() => {
              const reason = window.prompt("Why didn't it work? (optional)")
              onOutcome('applied_failed', reason?.trim() || undefined)
            }}
            className="px-3 py-[9px] rounded-lg border border-danger/30 text-danger text-[12.5px] font-medium hover:bg-danger-dim hover:border-danger inline-flex items-center gap-1.5"
          >
            <X size={12} strokeWidth={2.5} />
            Didn't work
          </button>
          <button
            onClick={() => onOutcome('applied_success')}
            className="px-3 py-[9px] rounded-lg bg-success text-[#0a1a12] font-semibold text-[12.5px] hover:brightness-110 inline-flex items-center gap-1.5"
          >
            <Check size={12} strokeWidth={2.5} />
            It worked
          </button>
        </div>
      </div>
    </div>
  )
}

function formatRelativeMinutes(iso: string): string {
  const then = new Date(iso).getTime()
  const mins = Math.max(0, Math.round((Date.now() - then) / 60000))
  if (mins === 0) return 'just now'
  if (mins === 1) return '1m ago'
  return `${mins}m ago`
}

function PartialBanner({ fix, onOutcome, onApply }: ProposalBannerProps) {
  return (
    <div className="relative border-t border-info/30 bg-gradient-to-b from-info-dim/40 to-info-dim/20 px-5 py-3 animate-slide-up">
      <div className="absolute left-0 top-0 bottom-0 w-[3px] bg-info" />
      <div className="flex items-start gap-3">
        <div className="shrink-0 mt-0.5 w-7 h-7 rounded-md border border-info/30 bg-info-dim flex items-center justify-center text-info">
          <Info size={15} />
        </div>
        <div className="flex-1 min-w-0">
          <div className="flex items-center gap-2 font-heading text-[10px] font-semibold uppercase tracking-[1.2px] text-info">
            <span>Partially applied</span>
            <span className="px-2 py-[2px] rounded-full bg-info/20 text-info text-[10.5px] font-bold normal-case tracking-normal">
              Parked
            </span>
          </div>
          <div className="mt-0.5 text-[14px] font-semibold text-heading leading-snug">
            {fix.title}
          </div>
          {fix.partial_notes && (
            <div className="mt-1.5 flex items-center gap-2 px-2.5 py-1.5 rounded-md bg-info/[0.08] border border-info/30 text-[12px] italic text-primary">
              <span className="not-italic font-bold text-info text-[10.5px] uppercase tracking-[0.6px]">Note</span>
              <span>{fix.partial_notes}</span>
            </div>
          )}
        </div>
        <div className="flex items-center gap-2 shrink-0 pt-0.5">
          <button
            onClick={() => {
              const reason = window.prompt("Why didn't it work? (optional)")
              onOutcome('applied_failed', reason?.trim() || undefined)
            }}
            className="px-3 py-[9px] rounded-lg border border-danger/30 text-danger text-[12.5px] font-medium hover:bg-danger-dim hover:border-danger"
          >
            Didn't work
          </button>
          <button
            onClick={onApply}
            className="px-3 py-[9px] rounded-lg bg-card border border-white/10 text-primary text-[12.5px] font-medium hover:bg-elevated"
          >
            Finish it ›
          </button>
          <button
            onClick={() => onOutcome('applied_success')}
            className="px-3 py-[9px] rounded-lg bg-success text-[#0a1a12] font-semibold text-[12.5px] hover:brightness-110"
          >
            It worked
          </button>
        </div>
      </div>
    </div>
  )
}

function AIConfirmingBanner({ fix, onAcceptAIProposal, onRejectAIProposal }: ProposalBannerProps) {
  const proposal = fix.ai_outcome_proposal
  if (!proposal) return null
  const isSuccess = proposal.outcome === 'success'
  const isFailure = proposal.outcome === 'failure'

  const headlineVerb = isSuccess
    ? 'resolved the issue'
    : isFailure
    ? "didn't work"
    : 'was partially applied'

  return (
    <div className="relative border-t border-accent/30 bg-gradient-to-b from-accent-dim/40 to-accent-dim/20 px-5 py-3 animate-slide-up">
      <div className="absolute left-0 top-0 bottom-0 w-[3px] bg-accent" />
      <div className="flex items-start gap-3">
        <div className="shrink-0 mt-0.5 w-7 h-7 rounded-md border border-accent/30 bg-accent-dim flex items-center justify-center text-accent">
          <Sparkles size={15} />
        </div>
        <div className="flex-1 min-w-0">
          <div className="flex items-center gap-2 font-heading text-[10px] font-semibold uppercase tracking-[1.2px] text-accent">
            <span>AI detected outcome</span>
            <span className="px-2 py-[2px] rounded-full bg-accent/20 text-accent text-[10.5px] font-bold normal-case tracking-normal">
              {isSuccess ? 'Success' : isFailure ? 'Failure' : 'Partial'}
            </span>
          </div>
          <div className="mt-0.5 text-[14px] font-semibold text-heading leading-snug">
            AI thinks the fix {headlineVerb} — confirm?
          </div>
          <div className="mt-1 text-[12.5px] text-muted-foreground leading-relaxed">
            {proposal.reason || 'Based on the recent chat. One click either confirms or corrects.'}
          </div>
        </div>
        <div className="flex items-center gap-2 shrink-0 pt-0.5">
          <button
            onClick={onRejectAIProposal}
            className="px-3 py-[9px] rounded-lg text-muted-foreground text-[12.5px] hover:bg-white/[0.08] hover:text-primary"
          >
            Not yet
          </button>
          <button
            onClick={onAcceptAIProposal}
            className={cn(
              'px-3 py-[9px] rounded-lg font-semibold text-[12.5px] inline-flex items-center gap-1.5 hover:brightness-110',
              isSuccess
                ? 'bg-success text-[#0a1a12]'
                : 'bg-danger text-[#180808]',
            )}
          >
            <Check size={12} strokeWidth={2.5} />
            Confirm{isSuccess ? ' · Resolve' : ''}
          </button>
        </div>
      </div>
    </div>
  )
}

function NudgeBanner({ fix, onOutcome, onSilenceNudge }: ProposalBannerProps) {
  return (
    <div className="relative border-t border-warning/30 bg-warning-dim/60 px-5 py-2 flex items-center gap-3">
      <div className="absolute left-0 top-0 bottom-0 w-[3px] bg-warning" />
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="text-warning shrink-0">
        <circle cx="12" cy="12" r="10" />
        <path d="M12 8v4" />
        <path d="M12 16h.01" />
      </svg>
      <span className="flex-1 text-[12.5px] text-primary">
        Did <strong className="text-heading">"{fix.title}"</strong> work?
      </span>
      <button
        onClick={onSilenceNudge}
        className="px-2.5 py-1 rounded text-[12px] text-muted-foreground hover:bg-white/[0.08] hover:text-primary"
      >
        Still checking
      </button>
      <button
        onClick={() => {
          const reason = window.prompt("Why didn't it work? (optional)")
          onOutcome('applied_failed', reason?.trim() || undefined)
        }}
        className="px-2.5 py-1 rounded border border-danger/30 text-danger text-[12px] hover:bg-danger-dim"
      >
        No
      </button>
      <button
        onClick={() => onOutcome('applied_success')}
        className="px-2.5 py-1 rounded bg-success text-[#0a1a12] font-semibold text-[12px] hover:brightness-110"
      >
        Yes
      </button>
    </div>
  )
}

function CollapsedBanner({ fix, onToggleCollapsed }: ProposalBannerProps) {
  return (
    <button
      onClick={onToggleCollapsed}
      className="relative w-full border-t border-warning/30 bg-warning-dim/40 px-5 py-2 flex items-center gap-2.5 hover:bg-warning-dim/60 transition-colors text-left"
    >
      <div className="absolute left-0 top-0 bottom-0 w-[3px] bg-warning" />
      <Sparkles size={12} className="text-warning shrink-0" />
      <span className="flex-1 text-[12px] font-medium text-heading truncate">{fix.title}</span>
      <span className="px-1.5 py-[1px] rounded-full bg-warning/20 text-warning text-[10.5px] font-bold tabular-nums">
        {fix.confidence_pct}%
      </span>
      <span className="text-muted-foreground text-[11px]">▸ expand</span>
    </button>
  )
}

export default ProposalBanner