import * as React from 'react'
import { createRoot } from 'react-dom/client'

import { createCircularLayout } from '@graphora/layouts'
import { Graph, type GraphRef, type GraphSelectionState } from '@graphora/react'

import { attachKeyboardDemo } from '../../../shared/keyboard-demo'
import './style.css'

const graph = {
  nodes: [
    { id: 'plan', label: 'Plan' },
    { id: 'build', label: 'Build' },
    { id: 'verify', label: 'Verify' },
    { id: 'ship', label: 'Ship' }
  ],
  edges: [
    { id: 'plan-build', source: 'plan', target: 'build', directed: true },
    { id: 'build-verify', source: 'build', target: 'verify', directed: true },
    { id: 'verify-ship', source: 'verify', target: 'ship', directed: true }
  ]
}

const layout = createCircularLayout({ radius: 130 })
const interactionStyles = {
  selection: { node: { fill: '#c4b5fd' }, edge: { strokeWidth: 6 } },
  focus: {
    node: { stroke: '#0f172a', strokeWidth: 4 },
    edge: { stroke: '#0f172a' }
  }
}

function App(): React.ReactElement {
  const keyboardHost = React.useRef<HTMLDivElement>(null)
  const disposeKeyboard = React.useRef<(() => void) | null>(null)
  React.useEffect(() => () => disposeKeyboard.current?.(), [])
  const graphRef = React.useRef<GraphRef | null>(null)
  const [status, setStatus] = React.useState('Click a node')
  const [selection, setSelection] = React.useState<GraphSelectionState>({
    selectedNodeIds: [],
    selectedEdgeIds: []
  })

  return (
    <section className="callback-layout">
      <div ref={keyboardHost} aria-label="Keyboard callback graph">
        <Graph
          ref={graphRef}
          graph={graph}
          layout={layout}
          fitToViewOnLayout={{ padding: 56 }}
          ariaLabel="React callback graph example"
          className="graph-surface"
          selection={selection}
          interactionStyles={interactionStyles}
          onNodeClick={(event) => {
            setStatus(`Selected ${String(event.nodeId)}`)
            setSelection({
              selectedNodeIds: [event.nodeId],
              selectedEdgeIds: []
            })
          }}
          onCanvasClick={() => {
            setStatus('Selection cleared')
            setSelection({ selectedNodeIds: [], selectedEdgeIds: [] })
          }}
          onSelectionChange={setSelection}
          onReady={(api) => {
            graphRef.current = api
            disposeKeyboard.current?.()
            const engine = api.getEngine()
            if (keyboardHost.current && engine)
              disposeKeyboard.current = attachKeyboardDemo(
                keyboardHost.current,
                engine,
                setSelection
              )
          }}
        />
      </div>
      <aside className="status-panel">
        <h2>Callback State</h2>
        <p id="status">{status}</p>
        <code>
          selectedNodeIds: [{selection.selectedNodeIds.map(String).join(', ')}]
        </code>
        <button
          type="button"
          onClick={() => {
            graphRef.current?.fitToView({ padding: 56 })
            setStatus('Fit to view')
          }}
        >
          Fit
        </button>
      </aside>
    </section>
  )
}

createRoot(document.querySelector('#root') as HTMLElement).render(<App />)