import { Suspense, lazy, useCallback, useEffect, useMemo, useRef, useState } from 'react'
import { Group, Panel, Separator } from 'react-resizable-panels'
import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter'
import python from 'react-syntax-highlighter/dist/esm/languages/prism/python'
import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism'

import { readConversationArtifactText } from '../lib/api'
import type { ArtifactFileInfo, LatestArtifactsResponse } from '../types'

SyntaxHighlighter.registerLanguage('python', python)

const ModelViewport = lazy(async () => {
  const module = await import('./ModelViewport')
  return { default: module.ModelViewport }
})

interface WorkbenchPaneProps {
  artifacts: LatestArtifactsResponse | null
  loading: boolean
}

function dedupeArtifacts(items: ArtifactFileInfo[]): ArtifactFileInfo[] {
  const seen = new Set<string>()
  return items.filter((item) => {
    if (!item.path || seen.has(item.path)) {
      return false
    }

    seen.add(item.path)
    return true
  })
}

function formatArtifactLabel(path: string): string {
  const segments = path.replace(/\\/g, '/').split('/').filter(Boolean)
  if (!segments.length) {
    return path
  }

  return segments.slice(-3).join('/')
}

function deriveSiblingModelScriptPath(modelPath: string): string | null {
  const normalizedPath = modelPath.replace(/\\/g, '/').trim()
  if (!normalizedPath || normalizedPath.startsWith('Local /')) {
    return null
  }

  if (!normalizedPath.toLowerCase().endsWith('.stl')) {
    return null
  }

  const lastSlashIndex = normalizedPath.lastIndexOf('/')
  if (lastSlashIndex < 0) {
    return 'model.py'
  }

  return `${normalizedPath.slice(0, lastSlashIndex)}/model.py`
}

export function WorkbenchPane({ artifacts, loading }: WorkbenchPaneProps) {
  const modelFileInputId = 'local-model-file-input'
  const codeFileInputId = 'local-code-file-input'

  const baseCodeOptions = useMemo(() => {
    if (artifacts?.code_files?.length) {
      return dedupeArtifacts(artifacts.code_files)
    }

    return artifacts?.code_file ? [artifacts.code_file] : []
  }, [artifacts])

  const modelOptions = useMemo(() => {
    if (artifacts?.model_files?.length) {
      return dedupeArtifacts(artifacts.model_files)
    }

    return artifacts?.model_file ? [artifacts.model_file] : []
  }, [artifacts])

  const [selectedCodePath, setSelectedCodePath] = useState('')
  const [selectedModelPath, setSelectedModelPath] = useState('')
  const [localCodeFile, setLocalCodeFile] = useState<{ path: string; content: string } | null>(
    null,
  )
  const [localModelFile, setLocalModelFile] = useState<{ path: string; url: string } | null>(
    null,
  )
  const [autoCodeFile, setAutoCodeFile] = useState<ArtifactFileInfo | null>(null)
  const autoResolveRequestRef = useRef(0)

  const codeOptions = useMemo(() => {
    if (!autoCodeFile) {
      return baseCodeOptions
    }

    return dedupeArtifacts([autoCodeFile, ...baseCodeOptions])
  }, [autoCodeFile, baseCodeOptions])

  const latestCodePath = autoCodeFile?.path ?? artifacts?.code_file?.path ?? codeOptions[0]?.path ?? ''
  const latestModelPath = artifacts?.model_file?.path ?? modelOptions[0]?.path ?? ''

  const effectiveSelectedCodePath = codeOptions.some((item) => item.path === selectedCodePath)
    ? selectedCodePath
    : latestCodePath

  const effectiveSelectedModelPath = modelOptions.some((item) => item.path === selectedModelPath)
    ? selectedModelPath
    : latestModelPath

  const selectedCodeFile = useMemo(
    () => codeOptions.find((item) => item.path === effectiveSelectedCodePath) ?? codeOptions[0] ?? null,
    [codeOptions, effectiveSelectedCodePath],
  )

  const selectedModelFile = useMemo(
    () => modelOptions.find((item) => item.path === effectiveSelectedModelPath) ?? modelOptions[0] ?? null,
    [effectiveSelectedModelPath, modelOptions],
  )

  const codePath = localCodeFile?.path ?? selectedCodeFile?.path
  const codeValue = localCodeFile?.content ?? selectedCodeFile?.content ?? ''
  const codeReadFailed = !localCodeFile && Boolean(codePath && selectedCodeFile?.content == null)
  const modelPath = localModelFile?.path ?? selectedModelFile?.path
  const modelUrl = localModelFile?.url ?? selectedModelFile?.url
  const showModelArtifactPicker = !localModelFile && modelOptions.length > 1
  const showCodeArtifactPicker = !localCodeFile && codeOptions.length > 1

  useEffect(() => {
    return () => {
      if (localModelFile?.url) {
        URL.revokeObjectURL(localModelFile.url)
      }
    }
  }, [localModelFile])

  useEffect(() => {
    autoResolveRequestRef.current += 1
    setAutoCodeFile(null)
  }, [artifacts?.conversation_id])

  const handleLocalModelSelection = (file: File | null) => {
    if (!file) {
      return
    }

    const nextUrl = URL.createObjectURL(file)
    setLocalModelFile((currentFile) => {
      if (currentFile?.url) {
        URL.revokeObjectURL(currentFile.url)
      }

      return {
        path: `Local / ${file.name}`,
        url: nextUrl,
      }
    })
    setAutoCodeFile(null)
    setSelectedModelPath('')
  }

  const handleLocalCodeSelection = async (file: File | null) => {
    if (!file) {
      return
    }

    const nextContent = await file.text()
    setLocalCodeFile({
      path: `Local / ${file.name}`,
      content: nextContent,
    })
    setSelectedCodePath('')
  }

  const handleModelReady = useCallback(
    async (readyModelPath: string) => {
      if (localModelFile || !artifacts?.conversation_id) {
        setAutoCodeFile(null)
        return
      }

      const preferredCodePath = deriveSiblingModelScriptPath(readyModelPath)
      if (!preferredCodePath) {
        setAutoCodeFile(null)
        return
      }

      const existingCodeFile = baseCodeOptions.find((item) => item.path === preferredCodePath)
      if (existingCodeFile?.content != null) {
        setAutoCodeFile(existingCodeFile)
        setLocalCodeFile(null)
        setSelectedCodePath('')
        return
      }

      const requestId = autoResolveRequestRef.current + 1
      autoResolveRequestRef.current = requestId

      const content = await readConversationArtifactText(artifacts.conversation_id, preferredCodePath)
      if (autoResolveRequestRef.current !== requestId) {
        return
      }

      if (content == null) {
        setAutoCodeFile(null)
        return
      }

      setAutoCodeFile({
        path: preferredCodePath,
        content,
        content_type: 'text/plain; charset=utf-8',
      })
      setLocalCodeFile(null)
      setSelectedCodePath('')
    },
    [artifacts?.conversation_id, baseCodeOptions, localModelFile],
  )

  const renderEmptyStateButton = (
    className: string,
    heading: string,
    body: string,
    fileInputId: string,
  ) => (
    <label htmlFor={fileInputId} className={`empty-state ${className} is-clickable`}>
      <h3>{heading}</h3>
      <p>{body}</p>
    </label>
  )

  useEffect(() => {
    console.info('[workbench] artifact selection state', {
      loading,
      latestCodePath: artifacts?.code_file?.path ?? null,
      latestModelPath: artifacts?.model_file?.path ?? null,
      codeOptions: codeOptions.map((item) => item.path),
      modelOptions: modelOptions.map((item) => item.path),
      outputFiles: artifacts?.output_files ?? [],
      selectedCodePath: codePath ?? null,
      selectedModelPath: modelPath ?? null,
      codeReadFailed,
      hasModelUrl: Boolean(modelUrl),
      autoCodePath: autoCodeFile?.path ?? null,
    })
  }, [
    autoCodeFile,
    artifacts,
    codeOptions,
    codePath,
    codeReadFailed,
    loading,
    modelOptions,
    modelPath,
    modelUrl,
  ])

  return (
    <Group orientation="vertical" className="workbench-group">
      <input
        id={modelFileInputId}
        type="file"
        accept=".stl"
        className="hidden-file-input"
        onChange={(event) => {
          handleLocalModelSelection(event.target.files?.[0] ?? null)
          event.currentTarget.value = ''
        }}
      />
      <input
        id={codeFileInputId}
        type="file"
        accept=".py,.txt,.md,.json,.toml,.yaml,.yml,.ts,.tsx,.js,.jsx"
        className="hidden-file-input"
        onChange={(event) => {
          void handleLocalCodeSelection(event.target.files?.[0] ?? null)
          event.currentTarget.value = ''
        }}
      />

      <Panel defaultSize="56%" minSize="28%">
        <section className="panel-shell workbench-panel">
          <header className="panel-header">
            <div className="panel-title-group">
              <h2>Preview</h2>
              <p className="panel-caption" title={modelPath ?? undefined}>
                {modelPath ? formatArtifactLabel(modelPath) : 'No model yet'}
              </p>
            </div>

            <div className="panel-header-actions">
              {showModelArtifactPicker ? (
                <label className="model-select artifact-picker">
                    <span>Model</span>
                    <select
                      value={effectiveSelectedModelPath}
                      onChange={(event) => {
                        setLocalModelFile((currentFile) => {
                          if (currentFile?.url) {
                            URL.revokeObjectURL(currentFile.url)
                          }
                          return null
                        })
                        setAutoCodeFile(null)
                        setSelectedModelPath(event.target.value)
                      }}
                    >
                    {modelOptions.map((item) => (
                      <option key={item.path} value={item.path}>
                        {formatArtifactLabel(item.path)}
                      </option>
                    ))}
                  </select>
                </label>
              ) : null}

              {modelUrl ? (
                <a className="download-link" href={modelUrl} target="_blank" rel="noreferrer">
                  Download
                </a>
              ) : null}
            </div>
          </header>

          <div className="workbench-content viewport-panel-content">
            {loading ? (
              renderEmptyStateButton(
                'viewport-empty-state',
                'Loading preview',
                'Fetching the latest model files. Click to open a local STL instead.',
                modelFileInputId,
              )
            ) : (
              <Suspense
                fallback={
                  renderEmptyStateButton(
                    'viewport-empty-state',
                    'Preparing viewport',
                    'Loading the 3D renderer. Click to open a local STL instead.',
                    modelFileInputId,
                  )
                }
              >
                <ModelViewport
                  key={modelUrl ?? modelPath ?? 'empty-model'}
                  modelPath={modelPath}
                  modelUrl={modelUrl}
                  localFileInputId={modelFileInputId}
                  onModelReady={handleModelReady}
                />
              </Suspense>
            )}
          </div>
        </section>
      </Panel>

      <Separator className="resize-handle resize-handle-horizontal" />

      <Panel defaultSize="44%" minSize="24%">
        <section className="panel-shell workbench-panel">
          <header className="panel-header">
            <div className="panel-title-group">
              <h2>Code</h2>
              <p className="panel-caption" title={codePath ?? undefined}>
                {codePath ? formatArtifactLabel(codePath) : 'No code yet'}
              </p>
            </div>

            <div className="panel-header-actions">
              {showCodeArtifactPicker ? (
                <label className="model-select artifact-picker">
                  <span>Code</span>
                  <select
                    value={effectiveSelectedCodePath}
                    onChange={(event) => {
                      setLocalCodeFile(null)
                      setSelectedCodePath(event.target.value)
                    }}
                  >
                    {codeOptions.map((item) => (
                      <option key={item.path} value={item.path}>
                        {formatArtifactLabel(item.path)}
                      </option>
                    ))}
                  </select>
                </label>
              ) : null}
            </div>
          </header>

          <div className="workbench-content code-panel-content">
            {codePath && !codeReadFailed ? (
              <div className="code-scroll-shell">
                <SyntaxHighlighter
                  language="python"
                  style={oneDark}
                  showLineNumbers
                  wrapLongLines
                  className="code-scroll-view code-syntax-view"
                  customStyle={{
                    margin: 0,
                    minHeight: '100%',
                    padding: '0.85rem 0',
                    background: 'transparent',
                    fontSize: '0.82rem',
                  }}
                  codeTagProps={{
                    style: {
                      fontFamily: 'IBM Plex Mono, SFMono-Regular, Consolas, monospace',
                    },
                  }}
                  lineNumberStyle={{
                    color: '#6f7883',
                    minWidth: '2.4rem',
                    paddingRight: '0.9rem',
                    textAlign: 'right',
                    userSelect: 'none',
                  }}
                >
                  {codeValue}
                </SyntaxHighlighter>
              </div>
            ) : codeReadFailed ? (
              renderEmptyStateButton(
                'code-empty-state',
                'Code preview unavailable',
                'The selected file exists, but its text content could not be read. Click to open a local file instead.',
                codeFileInputId,
              )
            ) : (
              renderEmptyStateButton(
                'code-empty-state',
                'No code yet',
                'The latest generated CAD script will show up here. Click to open a local code file now.',
                codeFileInputId,
              )
            )}
          </div>
        </section>
      </Panel>
    </Group>
  )
}