import { useState, useEffect, useCallback } from 'react'
import { ChevronLeft } from 'lucide-react'
import { Link } from 'react-router-dom'
import { l1Api } from '@/api/l1'
import type { TreeNode, WalkSession } from '@/types/l1'
import { EscalateModal, ResolveModal } from '@/components/l1/WalkModals'

interface Props {
  session: WalkSession
  onSessionUpdate: (s: WalkSession) => void
  onDone: () => void
}

export function L1WalkTreeVariant({ session, onSessionUpdate, onDone }: Props) {
  const [showResolve, setShowResolve] = useState(false)
  const [showEscalate, setShowEscalate] = useState(false)
  const [note, setNote] = useState('')

  // Phase 2A: ai_build sessions are walked node-by-node against /next-node
  // (real AI-generated decision tree), not the synthetic stepping below.
  const isAiBuild = session.session_kind === 'ai_build'
  const [node, setNode] = useState<TreeNode | null>(null)
  const [nodeLoading, setNodeLoading] = useState(false)
  const [nodeError, setNodeError] = useState<string | null>(null)

  useEffect(() => {
    if (!isAiBuild || session.status !== 'active') return
    let cancelled = false
    setNodeLoading(true)
    l1Api
      .nextNode(session.id, {})
      .then((r) => {
        if (!cancelled) setNode(r.node)
      })
      .catch(() => {
        if (!cancelled) setNodeError('Could not generate the next step.')
      })
      .finally(() => {
        if (!cancelled) setNodeLoading(false)
      })
    return () => {
      cancelled = true
    }
  }, [isAiBuild, session.id, session.status])

  const advanceNode = useCallback(
    async (body: { answer?: 'yes' | 'no' }) => {
      if (!node) return
      setNodeLoading(true)
      setNodeError(null)
      try {
        const r = await l1Api.nextNode(session.id, {
          node_id: node.id,
          node_text: node.text,
          ...body,
        })
        setNode(r.node)
      } catch {
        setNodeError('Could not generate the next step.')
      } finally {
        setNodeLoading(false)
      }
    },
    [node, session.id],
  )

  const isTerminalNode =
    node?.node_type === 'resolved' ||
    node?.node_type === 'escalate' ||
    node?.node_type === 'needs_review'

  // Phase 1: we don't have the live flow-tree fetch wired up here yet
  // (the tree-navigation pages have their own loader). The walker shows the
  // walked-path side panel, advance buttons stubbed for now — Phase 2 wires
  // the actual flow tree fetching + node advancement against tree data.
  // The "Yes/No" buttons record a synthetic step so the walked_path JSONB
  // grows; this gives us a functional roundtrip until Phase 2 wires the tree.

  const handleAnswer = async (answer: 'yes' | 'no') => {
    const nodeId = session.current_node_id || `step-${session.walked_path.length + 1}`
    try {
      const updated = await l1Api.step(session.id, {
        node_id: nodeId,
        question: `Step ${session.walked_path.length + 1}`,
        answer,
        note: note || null,
      })
      onSessionUpdate(updated)
      setNote('')
    } catch (err) {
      // Keep silent for v1 — Phase 2 wires real error UI
      console.error('step failed', err)
    }
  }

  const lastError = (err: unknown): string => {
    if (typeof err === 'object' && err && 'response' in err) {
      const detail = (err as { response?: { data?: { detail?: string } } }).response?.data?.detail
      if (typeof detail === 'string') return detail
    }
    return 'Unexpected error'
  }

  return (
    <div className="flex flex-col h-full">
      {/* Header */}
      <header className="border-b border-default px-6 py-4 flex items-center justify-between bg-sidebar">
        <Link to="/l1" className="flex items-center gap-2 text-muted-foreground hover:text-heading transition-colors">
          <ChevronLeft className="w-4 h-4" />
          <span className="font-mono text-xs">#{session.id.slice(0, 8)}</span>
          {(session.session_kind === 'proposal' || session.session_kind === 'ai_build') && (
            <span className="ml-2 text-xs bg-accent/10 text-accent px-2 py-0.5 rounded">AI-built</span>
          )}
        </Link>
        <div className="flex gap-2">
          <button
            onClick={() => setShowEscalate(true)}
            className="rounded-md border border-default px-3 py-1.5 text-sm hover:bg-elevated transition-colors"
            disabled={session.status !== 'active'}
          >
            Escalate
          </button>
          <button
            onClick={() => setShowResolve(true)}
            className="rounded-md bg-accent text-white px-3 py-1.5 text-sm hover:bg-accent/90 transition-colors disabled:opacity-50"
            disabled={session.status !== 'active'}
          >
            Resolve ✓
          </button>
        </div>
      </header>

      {/* Two-pane body */}
      <div className="flex-1 flex min-h-0">
        <main className="flex-1 p-6 overflow-y-auto min-h-0">
          {isAiBuild && (
            <div className="mb-4 max-w-2xl rounded-md border border-warning/30 bg-warning/10 px-4 py-2 text-xs text-warning">
              These are high-confidence troubleshooting steps, but they come from
              outside your organization’s knowledge base — review them before acting.
              When in doubt, escalate early.
            </div>
          )}
          <p className="font-sans text-[0.625rem] uppercase tracking-[0.12em] font-semibold text-muted-foreground mb-2">
            Step {session.walked_path.length + 1}
          </p>
          {session.status !== 'active' ? (
            <div className="rounded-lg border border-default bg-card p-6">
              <p className="text-sm text-muted-foreground">
                This session is <span className="font-semibold">{session.status}</span>.
              </p>
              <button onClick={onDone} className="mt-3 rounded-md bg-accent text-white px-3 py-1.5 text-sm">
                Back to workspace
              </button>
            </div>
          ) : isAiBuild ? (
            <div className="rounded-lg border border-default bg-card p-6 max-w-2xl space-y-4">
              {nodeLoading && (
                <p className="text-sm text-muted-foreground">Thinking through the next step…</p>
              )}
              {nodeError && <p className="text-sm text-danger">{nodeError}</p>}

              {!nodeLoading && node?.node_type === 'question' && (
                <>
                  <p className="text-lg">{node.text}</p>
                  <div className="flex gap-3">
                    <button
                      onClick={() => advanceNode({ answer: 'yes' })}
                      className="flex-1 rounded-md bg-accent text-white py-3 text-base font-medium hover:bg-accent/90 min-h-[44px] transition-colors"
                    >
                      {node.yes_label ?? 'Yes'}
                    </button>
                    <button
                      onClick={() => advanceNode({ answer: 'no' })}
                      className="flex-1 rounded-md border border-default py-3 text-base font-medium hover:bg-elevated min-h-[44px] transition-colors"
                    >
                      {node.no_label ?? 'No'}
                    </button>
                  </div>
                </>
              )}

              {!nodeLoading && node?.node_type === 'instruction' && (
                <>
                  <p className="text-lg">{node.text}</p>
                  <button
                    onClick={() => advanceNode({})}
                    className="rounded-md bg-accent text-white px-5 py-3 text-base font-medium hover:bg-accent/90 min-h-[44px] transition-colors"
                  >
                    Done — next step
                  </button>
                </>
              )}

              {!nodeLoading && isTerminalNode && node && (
                <>
                  <p className="text-lg">{node.text}</p>
                  {node.node_type === 'resolved' ? (
                    <button
                      onClick={() => setShowResolve(true)}
                      className="rounded-md bg-accent text-white px-5 py-3 text-base font-medium hover:bg-accent/90 min-h-[44px] transition-colors"
                    >
                      Mark resolved ✓
                    </button>
                  ) : (
                    <button
                      onClick={() => setShowEscalate(true)}
                      className="rounded-md bg-warning text-white px-5 py-3 text-base font-medium hover:bg-warning/90 min-h-[44px] transition-colors"
                    >
                      Escalate to engineering
                    </button>
                  )}
                </>
              )}
            </div>
          ) : (
            <div className="rounded-lg border border-default bg-card p-6 max-w-2xl">
              <p className="text-lg mb-6">Continue the walk:</p>
              <div className="flex gap-3">
                <button
                  onClick={() => handleAnswer('yes')}
                  className="flex-1 rounded-md bg-accent text-white py-3 text-base font-medium hover:bg-accent/90 min-h-[44px] transition-colors"
                >
                  Yes
                </button>
                <button
                  onClick={() => handleAnswer('no')}
                  className="flex-1 rounded-md border border-default py-3 text-base font-medium hover:bg-elevated min-h-[44px] transition-colors"
                >
                  No
                </button>
              </div>
              <textarea
                value={note}
                onChange={(e) => setNote(e.target.value)}
                placeholder="Optional note for this step…"
                rows={2}
                className="mt-4 w-full bg-page border border-default rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-accent/40"
              />
            </div>
          )}
        </main>

        {/* Right pane: transcript */}
        <aside className="w-80 border-l border-default bg-page p-4 overflow-y-auto">
          <p className="font-sans text-[0.625rem] uppercase tracking-[0.12em] font-semibold text-muted-foreground mb-3">
            Walked so far
          </p>
          {session.walked_path.length === 0 ? (
            <p className="text-xs text-muted-foreground">No steps yet.</p>
          ) : (
            <ol className="space-y-3 text-sm">
              {session.walked_path.map((step, i) => (
                <li key={i} className="flex flex-col">
                  <span className="text-muted-foreground text-xs">{step.question ?? step.text}</span>
                  {step.answer && <span className="font-medium">→ {step.answer_label ?? step.answer}</span>}
                  {step.l1_note && <span className="text-muted-foreground text-xs italic mt-0.5">{step.l1_note}</span>}
                </li>
              ))}
            </ol>
          )}
        </aside>
      </div>

      {/* Modals */}
      {showResolve && (
        <ResolveModal
          onClose={() => setShowResolve(false)}
          onConfirm={async (helpful, resolutionNotes) => {
            try {
              await l1Api.resolve(session.id, { helpful, resolution_notes: resolutionNotes })
              onDone()
            } catch (err) {
              console.error('resolve failed:', lastError(err))
            }
          }}
        />
      )}
      {showEscalate && (
        <EscalateModal
          onClose={() => setShowEscalate(false)}
          onConfirm={async (category, reason) => {
            try {
              await l1Api.escalate(session.id, { reason, reason_category: category })
              onDone()
            } catch (err) {
              console.error('escalate failed:', lastError(err))
            }
          }}
        />
      )}
    </div>
  )
}