import * as React from 'react'
import { createRoot } from 'react-dom/client'
import { createGraphStore } from '@graphora/core'
import {
  createCircularLayout,
  createForceLayout,
  createGridLayout,
  createHierarchicalLayout
} from '@graphora/layouts'
import { Graph, type GraphRef } from '@graphora/react'
import { CanvasGraphRenderer, panBy, zoomAt } from '@graphora/renderer'
import {
  sourceGraph,
  kinds,
  colors,
  type Kind,
  type ComponentData,
  type ConnectionData
} from './data'
import './style.css'
import {
  createDirectedPathHighlight,
  createDirectNeighborhoodHighlight,
  emptyExplorerHighlight
} from './highlighting'

const theme = {
  backgroundColor: '#f4f4f1',
  node: { radius: 17, stroke: '#ffffff', strokeWidth: 2 },
  edge: { stroke: '#93938c', strokeWidth: 1.7, arrow: { end: true, size: 8 } },
  label: { fill: '#24241f', fontSize: 12, fontWeight: '600' }
}
const interactionStyles = {
  hover: {
    node: { stroke: '#ad5700', strokeWidth: 4 },
    edge: { stroke: '#ad5700', strokeWidth: 4 }
  },
  selection: {
    node: { stroke: '#ad5700', strokeWidth: 5 },
    edge: { stroke: '#312c85', strokeWidth: 4 }
  }
}
const fitOptions = { padding: 65 }
const rendererFactory = () =>
  new CanvasGraphRenderer<ComponentData, ConnectionData>({
    labels: { mode: 'automatic', minZoom: 0.65, edgeMinZoom: 1.35 }
  })
type Selected = { kind: 'node' | 'edge'; id: string } | null
const initialPath = { source: 'storefront', target: 'postgres' }

function App(): React.ReactElement {
  const api = React.useRef<GraphRef<ComponentData, ConnectionData> | null>(null)
  const [query, setQuery] = React.useState('')
  const [types, setTypes] = React.useState<readonly Kind[]>(kinds)
  const [layoutName, setLayoutName] = React.useState('force')
  const [selected, setSelected] = React.useState<Selected>(null)
  const [error, setError] = React.useState('')
  const [zoom, setZoom] = React.useState(1)
  const [pathEndpoints, setPathEndpoints] = React.useState(initialPath)
  const [highlightResult, setHighlightResult] = React.useState(
    emptyExplorerHighlight()
  )
  const layout = React.useMemo(
    () =>
      layoutName === 'circular'
        ? createCircularLayout({ radius: 220 })
        : layoutName === 'grid'
          ? createGridLayout({ columns: 4, cellWidth: 155, cellHeight: 120 })
          : layoutName === 'hierarchical'
            ? createHierarchicalLayout({
                direction: 'LR',
                rankSpacing: 120,
                nodeSpacing: 75
              })
            : createForceLayout({
                iterations: 180,
                linkDistance: 125,
                collisionRadius: 45,
                seed: 7
              }),
    [layoutName]
  )
  const graph = React.useMemo(() => {
    const nodes = sourceGraph.nodes.filter((node) =>
      types.includes(node.data!.kind)
    )
    const ids = new Set(nodes.map((node) => node.id))
    return {
      nodes,
      edges: sourceGraph.edges!.filter(
        (edge) => ids.has(edge.source) && ids.has(edge.target)
      )
    }
  }, [types])
  const selectedNode =
    selected?.kind === 'node'
      ? graph.nodes.find((node) => node.id === selected.id)
      : undefined
  const selectedEdge =
    selected?.kind === 'edge'
      ? graph.edges.find((edge) => edge.id === selected.id)
      : undefined
  const results = graph.nodes.filter((node) =>
    `${node.label} ${node.data!.description}`
      .toLowerCase()
      .includes(query.trim().toLowerCase())
  )
  const label = (id: string | number) =>
    sourceGraph.nodes.find((node) => node.id === id)?.label ?? String(id)
  const selection = React.useMemo(
    () => ({
      selectedNodeIds: selectedNode ? [selectedNode.id] : [],
      selectedEdgeIds: selectedEdge ? [selectedEdge.id!] : []
    }),
    [selectedNode, selectedEdge]
  )

  React.useEffect(() => {
    if (selected && !selectedNode && !selectedEdge) setSelected(null)
  }, [selected, selectedNode, selectedEdge])
  React.useEffect(() => {
    if (highlightResult.status === 'idle') return
    const visibleIds = new Set(graph.nodes.map((node) => node.id))
    if (highlightResult.nodeIds.some((id) => !visibleIds.has(id))) {
      setHighlightResult(
        emptyExplorerHighlight(
          'The highlight was cleared because its components are filtered.'
        )
      )
    }
  }, [graph, highlightResult])
  const inspectNode = (id: string | number, focus = false) => {
    setSelected({ kind: 'node', id: String(id) })
    if (focus) {
      const position = api.current
        ?.getEngine()
        ?.snapshot()
        .nodes.find((node) => node.id === id)?.position
      if (position) api.current?.setViewport({ center: position, zoom: 1.3 })
    }
  }
  const fit = () => api.current?.fitToView(fitOptions)
  const reset = () => {
    api.current?.clearPositionMemory()
    setQuery('')
    setTypes(kinds)
    setSelected(null)
    setLayoutName('force')
    setPathEndpoints(initialPath)
    setHighlightResult(emptyExplorerHighlight())
    setError('')
    requestAnimationFrame(() => {
      void api.current
        ?.runLayout({ fitToView: fitOptions })
        .then(() => setZoom(api.current?.getViewport()?.zoom ?? 1))
        .catch((cause: unknown) =>
          setError(
            cause instanceof Error ? cause.message : 'Unable to reset graph'
          )
        )
    })
  }
  const changeZoom = (factor: number) => {
    const viewport = api.current?.getViewport()
    if (viewport)
      api.current?.setViewport(
        zoomAt(
          viewport,
          { x: viewport.width / 2, y: viewport.height / 2 },
          viewport.zoom * factor
        )
      )
  }
  const moveView = (x: number, y: number) => {
    const viewport = api.current?.getViewport()
    if (viewport) api.current?.setViewport(panBy(viewport, { x, y }))
  }
  const connections = selectedNode
    ? sourceGraph.edges!.filter(
        (edge) =>
          edge.source === selectedNode.id || edge.target === selectedNode.id
      )
    : []
  const tracePath = () =>
    setHighlightResult(
      createDirectedPathHighlight(
        createGraphStore(sourceGraph).snapshot(),
        createGraphStore(graph).snapshot(),
        pathEndpoints.source,
        pathEndpoints.target
      )
    )
  const highlightNeighborhood = () => {
    if (selectedNode) {
      setHighlightResult(
        createDirectNeighborhoodHighlight(
          createGraphStore(graph).snapshot(),
          selectedNode.id
        )
      )
    }
  }

  return (
    <main className="explorer">
      <header className="explorer-header">
        <a href="../../gallery/" className="brand">
          Graphora
        </a>
        <div>
          <p className="eyebrow">Explore a system</p>
          <h1>Dependency explorer</h1>
          <p className="muted">
            A fictional commerce system. Follow a request from storefront to
            storage.
          </p>
        </div>
        <a href="../../gallery/#quickstart">Quickstart</a>
      </header>
      <div className="workspace">
        <aside className="panel browse" aria-label="Find components">
          <h2>Components</h2>
          <label htmlFor="search">Find a component</label>
          <input
            id="search"
            type="search"
            placeholder="Try Orders or payment…"
            value={query}
            onChange={(event) => setQuery(event.target.value)}
          />
          <fieldset>
            <legend>Show types</legend>
            {kinds.map((kind) => (
              <label className="type-option" key={kind}>
                <input
                  type="checkbox"
                  checked={types.includes(kind)}
                  onChange={(event) =>
                    setTypes(
                      event.target.checked
                        ? [...types, kind]
                        : types.filter((type) => type !== kind)
                    )
                  }
                />
                <span className="swatch" style={{ background: colors[kind] }} />
                {kind}
              </label>
            ))}
          </fieldset>
          <p className="muted" role="status" id="result-count">
            {results.length} matching components
          </p>
          {results.length === 0 && (
            <div className="empty">
              <p>No matching components.</p>
              <button onClick={reset}>Clear search and filters</button>
            </div>
          )}
          <ul className="component-list" aria-label="Matching components">
            {results.map((node) => (
              <li key={node.id}>
                <button
                  aria-pressed={selectedNode?.id === node.id}
                  onClick={() => inspectNode(node.id, true)}
                >
                  <span>{node.label}</span>
                  <small>{node.data!.kind}</small>
                </button>
              </li>
            ))}
          </ul>
        </aside>
        <section className="canvas-panel" aria-label="Graph exploration">
          <div className="toolbar">
            <label>
              Layout{' '}
              <select
                aria-label="Layout"
                value={layoutName}
                onChange={(event) => setLayoutName(event.target.value)}
              >
                <option value="force">Force</option>
                <option value="hierarchical">Hierarchical</option>
                <option value="circular">Circular</option>
                <option value="grid">Grid</option>
              </select>
            </label>
            <details className="path-tools">
              <summary>Trace a path</summary>
              <div className="path-tools-popover">
                <label>
                  From
                  <select
                    aria-label="Path source"
                    value={pathEndpoints.source}
                    onChange={(event) =>
                      setPathEndpoints({
                        ...pathEndpoints,
                        source: event.target.value
                      })
                    }
                  >
                    {sourceGraph.nodes.map((node) => (
                      <option key={node.id} value={String(node.id)}>
                        {node.label}
                      </option>
                    ))}
                  </select>
                </label>
                <label>
                  To
                  <select
                    aria-label="Path target"
                    value={pathEndpoints.target}
                    onChange={(event) =>
                      setPathEndpoints({
                        ...pathEndpoints,
                        target: event.target.value
                      })
                    }
                  >
                    {sourceGraph.nodes.map((node) => (
                      <option key={node.id} value={String(node.id)}>
                        {node.label}
                      </option>
                    ))}
                  </select>
                </label>
                <button className="primary" onClick={tracePath}>
                  Show directed path
                </button>
              </div>
            </details>
            <div className="view-controls">
              <button onClick={() => changeZoom(1.2)} aria-label="Zoom in">
                +
              </button>
              <output aria-label="Zoom level">{Math.round(zoom * 100)}%</output>
              <button onClick={() => changeZoom(1 / 1.2)} aria-label="Zoom out">
                −
              </button>
              <button onClick={fit}>Fit graph</button>
              <button onClick={reset}>Reset view</button>
            </div>
          </div>
          <div
            className="graph-frame"
            onKeyDown={(event) => {
              if (
                event.target instanceof HTMLElement &&
                event.target.closest('button,input,select,a')
              )
                return
              const directions: Record<string, [number, number]> = {
                ArrowLeft: [50, 0],
                ArrowRight: [-50, 0],
                ArrowUp: [0, 50],
                ArrowDown: [0, -50]
              }
              if (directions[event.key]) {
                event.preventDefault()
                moveView(...directions[event.key])
              }
              if (event.key === 'Escape') setSelected(null)
            }}
          >
            <Graph<ComponentData, ConnectionData>
              ref={api}
              graph={graph}
              graphUpdatePolicy="preserve"
              layout={layout}
              rendererFactory={rendererFactory}
              theme={theme}
              interactionStyles={interactionStyles}
              highlight={highlightResult.highlight}
              fitToViewOnLayout={fitOptions}
              className="graph-surface"
              ariaLabel="Commerce dependencies. Drag to pan, scroll to zoom, or use the component list. Arrow keys pan the view."
              selection={selection}
              onSelectionChange={(next) =>
                setSelected(
                  next.selectedNodeIds.length
                    ? { kind: 'node', id: String(next.selectedNodeIds[0]) }
                    : next.selectedEdgeIds.length
                      ? { kind: 'edge', id: String(next.selectedEdgeIds[0]) }
                      : null
                )
              }
              onViewportChange={(viewport) => setZoom(viewport.zoom)}
              onError={(cause) =>
                setError(
                  cause instanceof Error
                    ? cause.message
                    : 'Unable to update graph'
                )
              }
            />
            {graph.nodes.length === 0 && (
              <div className="graph-empty">
                <p>All component types are hidden.</p>
                <button onClick={reset}>Show all components</button>
              </div>
            )}
          </div>
          <footer className="canvas-footer">
            <span>
              {graph.nodes.length} components · {graph.edges.length} connections
            </span>
            <span>
              Drag background to pan · Scroll to zoom · Click to inspect
            </span>
          </footer>
          <div className="highlight-result" aria-live="polite">
            <span>{highlightResult.message}</span>
            {highlightResult.nodeIds.length > 0 && (
              <ol aria-label="Highlighted component order">
                {highlightResult.nodeIds.map((id) => (
                  <li key={id}>{label(id)}</li>
                ))}
              </ol>
            )}
            {highlightResult.status !== 'idle' && (
              <button
                className="text-button"
                onClick={() => setHighlightResult(emptyExplorerHighlight())}
              >
                Clear highlight
              </button>
            )}
          </div>
          {error && (
            <p role="alert">
              {error} <button onClick={reset}>Reset view</button>
            </p>
          )}
        </section>
        <aside className="panel details" aria-label="Selection details">
          <p className="eyebrow">Inspect</p>
          {!selectedNode && !selectedEdge && (
            <>
              <h2>Follow a dependency</h2>
              <p>
                Select a component or connection on the graph. You can also use
                the searchable list.
              </p>
              <button
                className="primary"
                disabled={!graph.nodes.some((node) => node.id === 'orders')}
                onClick={() => inspectNode('orders', true)}
              >
                Explore Orders
              </button>
              <p className="muted">
                Arrows point from a caller or producer to its dependency or
                consumer. All data is illustrative.
              </p>
            </>
          )}
          {selectedNode && (
            <>
              <h2>{selectedNode.label}</h2>
              <p className="badge">{selectedNode.data!.kind}</p>
              <p>{selectedNode.data!.description}</p>
              <dl>
                <dt>Owner</dt>
                <dd>{selectedNode.data!.owner}</dd>
              </dl>
              <button onClick={() => inspectNode(selectedNode.id, true)}>
                Center component
              </button>
              <button onClick={highlightNeighborhood}>
                Highlight direct relations
              </button>
              <h3>Direct connections</h3>
              <ul className="connection-list">
                {connections.map((edge) => {
                  const outgoing = edge.source === selectedNode.id
                  const other = outgoing ? edge.target : edge.source
                  const visible = graph.edges.some(
                    (item) => item.id === edge.id
                  )
                  return (
                    <li key={edge.id}>
                      <span className="muted">
                        {outgoing
                          ? 'Depends on / sends to'
                          : 'Called by / receives from'}
                      </span>
                      <button
                        disabled={!visible}
                        onClick={() => inspectNode(other, true)}
                      >
                        {label(other)}
                        {!visible && ' (filtered)'}
                      </button>
                      <button
                        className="text-button"
                        disabled={!visible}
                        onClick={() =>
                          setSelected({ kind: 'edge', id: String(edge.id) })
                        }
                      >
                        Inspect connection to {label(other)}
                      </button>
                    </li>
                  )
                })}
              </ul>
            </>
          )}
          {selectedEdge && (
            <>
              <h2>Connection</h2>
              <p className="connection-title">
                {label(selectedEdge.source)} → {label(selectedEdge.target)}
              </p>
              <p>{selectedEdge.data!.purpose}</p>
              <dl>
                <dt>Protocol</dt>
                <dd>{selectedEdge.data!.protocol}</dd>
              </dl>
              <div className="endpoint-actions">
                <button onClick={() => inspectNode(selectedEdge.source, true)}>
                  Inspect {label(selectedEdge.source)}
                </button>
                <button onClick={() => inspectNode(selectedEdge.target, true)}>
                  Inspect {label(selectedEdge.target)}
                </button>
              </div>
            </>
          )}
          {(selectedNode || selectedEdge) && (
            <button className="clear" onClick={() => setSelected(null)}>
              Clear selection
            </button>
          )}
        </aside>
      </div>
      <section
        className="connections-accessible"
        aria-label="All visible connections"
      >
        <details>
          <summary>Browse all {graph.edges.length} visible connections</summary>
          <ul>
            {graph.edges.map((edge) => (
              <li key={edge.id}>
                <button
                  onClick={() =>
                    setSelected({ kind: 'edge', id: String(edge.id) })
                  }
                >
                  {label(edge.source)} → {label(edge.target)}
                </button>
              </li>
            ))}
          </ul>
        </details>
      </section>
    </main>
  )
}
createRoot(document.querySelector('#root')!).render(<App />)