path: root/frontend/src/components/document/DocumentLayout.tsx

import { useEffect, useState, useCallback, useRef, useMemo } from 'react'
import { useParams, useNavigate, Link } from 'react-router-dom'
import { DirectiveFileTree } from './DirectiveFileTree'
import DocumentEditor from './DocumentEditor'
import { ToastProvider, useToast } from './Toast'
import {
  type DirectiveWithSteps,
  type DirectiveStep,
  getDirective,
  getDirectiveSteps,
  updateGoal,
  updateDirective,
  cleanupDirective,
  createPr,
  pickUpOrders,
  pauseDirective,
  startDirective,
} from '../../services/directiveApi'
import './DocumentLayout.css'

function StatusBadge({ status }: { status: string }) {
  const colors: Record<string, string> = {
    active: '#4caf50',
    running: '#4caf50',
    idle: '#ffc107',
    paused: '#ffc107',
    draft: '#9e9e9e',
    pending: '#9e9e9e',
    archived: '#f44336',
    failed: '#f44336',
  }
  const color = colors[status.toLowerCase()] || '#9e9e9e'

  return (
    <span className="doc-status-badge" style={{ backgroundColor: color }}>
      {status}
    </span>
  )
}

function DocumentLayoutInner() {
  const { id: urlDirectiveId } = useParams<{ id: string }>()
  const navigate = useNavigate()
  const { addToast } = useToast()

  const [selectedId, setSelectedId] = useState<string | null>(urlDirectiveId || null)
  const [directive, setDirective] = useState<DirectiveWithSteps | null>(null)
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [sidebarWidth, setSidebarWidth] = useState(250)
  const resizingRef = useRef(false)
  const startXRef = useRef(0)
  const startWidthRef = useRef(250)
  const pollRef = useRef<ReturnType<typeof setInterval> | null>(null)

  // Sync URL param on mount
  useEffect(() => {
    if (urlDirectiveId && urlDirectiveId !== selectedId) {
      setSelectedId(urlDirectiveId)
    }
  }, [urlDirectiveId])

  // Handle directive selection - update URL
  const handleSelectDirective = useCallback((id: string) => {
    setSelectedId(id)
    navigate(`/directives/${id}`, { replace: true })
  }, [navigate])

  // Load directive when selected
  useEffect(() => {
    if (!selectedId) {
      setDirective(null)
      return
    }

    let cancelled = false
    async function load() {
      try {
        setLoading(true)
        setError(null)
        const data = await getDirective(selectedId!)
        if (!cancelled) setDirective(data)
      } catch (err) {
        if (!cancelled) {
          const msg = err instanceof Error ? err.message : 'Failed to load directive'
          setError(msg)
          addToast(msg, 'error')
        }
      } finally {
        if (!cancelled) setLoading(false)
      }
    }
    load()

    return () => { cancelled = true }
  }, [selectedId, addToast])

  // Step polling (after goal update triggers supervisor)
  const startStepPolling = useCallback(() => {
    if (pollRef.current) clearInterval(pollRef.current)
    pollRef.current = setInterval(async () => {
      if (!selectedId) return
      try {
        const data = await getDirective(selectedId)
        setDirective(data)
      } catch {
        // Silently fail for polling
      }
    }, 3000)
    // Stop after 60 seconds
    setTimeout(() => {
      if (pollRef.current) {
        clearInterval(pollRef.current)
        pollRef.current = null
      }
    }, 60000)
  }, [selectedId])

  useEffect(() => {
    return () => {
      if (pollRef.current) clearInterval(pollRef.current)
    }
  }, [])

  // Auto-save goal changes
  const handleGoalChange = useCallback(async (newGoal: string) => {
    if (!selectedId) return
    try {
      const updated = await updateGoal(selectedId, newGoal)
      setDirective(updated)
      addToast('Goal saved', 'success')
      startStepPolling()
    } catch (err) {
      addToast(`Failed to save goal: ${(err as Error).message}`, 'error')
    }
  }, [selectedId, addToast, startStepPolling])

  const handleTitleChange = useCallback(async (newTitle: string) => {
    if (!selectedId || !directive) return
    try {
      const updated = await updateDirective(selectedId, {
        title: newTitle,
        version: directive.version,
      })
      setDirective(updated)
    } catch (err) {
      addToast(`Failed to update title: ${(err as Error).message}`, 'error')
    }
  }, [selectedId, directive, addToast])

  const handleCleanup = useCallback(async () => {
    if (!selectedId) return
    try {
      await cleanupDirective(selectedId)
      addToast('Cleanup contract spawned', 'success')
      startStepPolling()
    } catch (err) {
      addToast(`Cleanup failed: ${(err as Error).message}`, 'error')
    }
  }, [selectedId, addToast, startStepPolling])

  const handleCreatePr = useCallback(async () => {
    if (!selectedId) return
    try {
      await createPr(selectedId)
      addToast('PR update triggered', 'success')
    } catch (err) {
      addToast(`PR update failed: ${(err as Error).message}`, 'error')
    }
  }, [selectedId, addToast])

  const handlePlanOrders = useCallback(async () => {
    if (!selectedId) return
    try {
      await pickUpOrders(selectedId)
      addToast('Planning orders...', 'info')
      startStepPolling()
    } catch (err) {
      addToast(`Plan orders failed: ${(err as Error).message}`, 'error')
    }
  }, [selectedId, addToast, startStepPolling])

  const handleTogglePause = useCallback(async () => {
    if (!selectedId || !directive) return
    try {
      if (directive.status === 'paused') {
        const result = await startDirective(selectedId)
        setDirective(result)
        addToast('Directive resumed', 'success')
      } else {
        const updated = await pauseDirective(selectedId)
        setDirective(updated)
        addToast('Directive paused', 'info')
      }
    } catch (err) {
      addToast(`Failed to toggle pause: ${(err as Error).message}`, 'error')
    }
  }, [selectedId, directive, addToast])

  // Sidebar resize handlers
  const handleMouseDown = useCallback((e: React.MouseEvent) => {
    resizingRef.current = true
    startXRef.current = e.clientX
    startWidthRef.current = sidebarWidth
    document.body.style.cursor = 'col-resize'
    document.body.style.userSelect = 'none'

    const handleMouseMove = (e: MouseEvent) => {
      if (!resizingRef.current) return
      const diff = e.clientX - startXRef.current
      const newWidth = Math.max(180, Math.min(500, startWidthRef.current + diff))
      setSidebarWidth(newWidth)
    }

    const handleMouseUp = () => {
      resizingRef.current = false
      document.body.style.cursor = ''
      document.body.style.userSelect = ''
      document.removeEventListener('mousemove', handleMouseMove)
      document.removeEventListener('mouseup', handleMouseUp)
    }

    document.addEventListener('mousemove', handleMouseMove)
    document.addEventListener('mouseup', handleMouseUp)
  }, [sidebarWidth])

  const handleNewDirective = useCallback(() => {
    // Placeholder - will be implemented with full directive creation flow
    console.log('New directive requested')
  }, [])

  return (
    <div className="document-layout">
      {/* Sidebar */}
      <div className="document-sidebar" style={{ width: sidebarWidth }}>
        <div className="document-sidebar-back">
          <Link to="/" className="document-back-link">
            {'\u2190'} Back to Main
          </Link>
        </div>
        <DirectiveFileTree
          selectedDirectiveId={selectedId}
          onSelectDirective={handleSelectDirective}
          onNewDirective={handleNewDirective}
        />
      </div>

      {/* Resize handle */}
      <div className="document-resize-handle" onMouseDown={handleMouseDown} />

      {/* Main content */}
      <div className="document-main">
        {directive && (
          <div className="document-topbar">
            <div className="document-topbar-left">
              <h1 className="document-topbar-title">{directive.title || 'Untitled'}</h1>
              <StatusBadge status={directive.status} />
            </div>
            <div className="document-topbar-right">
              <button className="document-topbar-gear" title="Settings">
                {'\u2699'}
              </button>
            </div>
          </div>
        )}

        <div className="document-content">
          {loading && (
            <div className="document-placeholder">
              <p>Loading directive...</p>
            </div>
          )}

          {error && (
            <div className="document-placeholder">
              <p className="document-error">Error: {error}</p>
            </div>
          )}

          {!loading && !error && !directive && (
            <div className="document-placeholder">
              <div className="document-placeholder-icon">{'\u{1F4DD}'}</div>
              <h2>No directive selected</h2>
              <p>Select a directive from the sidebar or create a new one to get started.</p>
            </div>
          )}

          {!loading && !error && directive && (
            <DocumentEditor
              directiveId={directive.id}
              title={directive.title || 'Untitled'}
              goal={directive.goal || ''}
              status={directive.status}
              prBranch={directive.prBranch || directive.pr_branch}
              onGoalChange={handleGoalChange}
              onTitleChange={handleTitleChange}
              onCleanup={handleCleanup}
              onCreatePr={handleCreatePr}
              onPlanOrders={handlePlanOrders}
              onTogglePause={handleTogglePause}
            />
          )}
        </div>
      </div>
    </div>
  )
}

// Wrapper that provides toast context
export default function DocumentLayout() {
  return (
    <ToastProvider>
      <DocumentLayoutInner />
    </ToastProvider>
  )
}