'use client'
import { useEffect, useRef, useState } from 'react'
import { parsePatchFiles } from '@pierre/diffs'

interface Props {
  patch: string
}

export function CommitDiffView({ patch }: Props) {
  const [diffStyle, setDiffStyle] = useState<'split' | 'unified'>('split')

  if (!patch) {
    return <p className="text-gray-500">No changes in this commit.</p>
  }

  const parsed = parsePatchFiles(patch)
  const files = parsed.flatMap((p) => p.files)

  return (
    <div className="space-y-4">
      <div className="flex items-center gap-2">
        <span className="text-xs text-gray-500">
          {files.length} file{files.length !== 1 ? 's' : ''} changed
        </span>
        <button
          onClick={() =>
            setDiffStyle((s) => (s === 'split' ? 'unified' : 'split'))
          }
          className="rounded border border-gray-700 px-2 py-0.5 text-xs text-gray-400 hover:border-gray-500 hover:text-gray-200"
        >
          {diffStyle === 'split' ? 'Unified' : 'Split'}
        </button>
      </div>
      {files.map((fileDiff, i) => (
        <DiffFileRenderer key={i} fileDiff={fileDiff} diffStyle={diffStyle} />
      ))}
    </div>
  )
}

function DiffFileRenderer({
  fileDiff,
  diffStyle,
}: {
  fileDiff: any
  diffStyle: 'split' | 'unified'
}) {
  const containerRef = useRef<HTMLDivElement>(null)
  const instanceRef = useRef<any>(null)

  useEffect(() => {
    let mounted = true

    async function render() {
      const { FileDiff } = await import('@pierre/diffs')

      if (!mounted || !containerRef.current) return

      if (instanceRef.current) {
        instanceRef.current.cleanUp()
      }

      const instance = new FileDiff({
        theme: 'pierre-dark',
        diffStyle,
        diffIndicators: 'bars',
        hunkSeparators: 'line-info',
        overflow: 'scroll',
      })

      instance.render({
        fileDiff,
        containerWrapper: containerRef.current,
      })

      instanceRef.current = instance
    }

    render()

    return () => {
      mounted = false
      if (instanceRef.current) {
        instanceRef.current.cleanUp()
        instanceRef.current = null
      }
    }
  }, [fileDiff, diffStyle])

  return (
    <div className="overflow-hidden rounded-lg border border-gray-800">
      <div ref={containerRef} />
    </div>
  )
}