"use client"

import { useEffect, useImperativeHandle, useRef, useState, type Ref } from "react"
import {
  createUniver,
  defaultTheme,
  LocaleType,
  mergeLocales,
  type FUniver,
  type ILocales,
  type IWorkbookData,
  type Theme,
} from "@univerjs/presets"
import {
  UniverSheetsCorePreset,
  type IUniverSheetsCorePresetConfig,
} from "@univerjs/preset-sheets-core"
import UniverPresetSheetsCoreEnUS from "@univerjs/preset-sheets-core/locales/en-US"

import "@univerjs/preset-sheets-core/lib/index.css"

import { cn } from "@/lib/utils"

type UniverPlugins = NonNullable<Parameters<typeof createUniver>[0]["plugins"]>

type ChromeConfig = Pick<
  IUniverSheetsCorePresetConfig,
  "header" | "toolbar" | "ribbonType" | "menu" | "contextMenu" | "formulaBar" | "footer"
>

export interface SpreadsheetHandle {
  save: () => IWorkbookData | undefined
  getAPI: () => FUniver | null
}

const canvasSafeAchromaticPrimary = {
  50: "#F5F5F5",
  100: "#EBEBEB",
  200: "#D4D4D4",
  300: "#A1A1A1",
  400: "#525252",
  500: "#262626",
  600: "#171717",
  700: "#121212",
  800: "#0D0D0D",
  900: "#0A0A0A",
}

const canvasSafeAchromaticGray = {
  50: "#FAFAFA",
  100: "#F5F5F5",
  200: "#E5E5E5",
  300: "#A1A1A1",
  400: "#7C7C7C",
  500: "#525252",
  600: "#363636",
  700: "#292929",
  800: "#212121",
  900: "#1C1C1C",
}

const singularityTheme: Theme = {
  ...defaultTheme,
  primary: canvasSafeAchromaticPrimary,
  gray: canvasSafeAchromaticGray,
}

export interface SpreadsheetProps extends ChromeConfig {
  data?: Partial<IWorkbookData>
  theme?: Theme
  onChange?: (snapshot: IWorkbookData) => void
  onReady?: (api: FUniver) => void
  changeDebounce?: number
  readOnly?: boolean
  zoom?: number
  activeSheetId?: string
  darkMode?: boolean
  autoFocus?: boolean
  locale?: LocaleType
  locales?: ILocales
  plugins?: UniverPlugins
  height?: number | string
  className?: string
  ref?: Ref<SpreadsheetHandle>
}

const isHostDark = () =>
  typeof document !== "undefined" && document.documentElement.classList.contains("dark")

function useHostDarkMode(override?: boolean) {
  const [hostDark, setHostDark] = useState(isHostDark)

  useEffect(() => {
    if (override !== undefined) return
    const root = document.documentElement
    const observer = new MutationObserver(() => setHostDark(root.classList.contains("dark")))
    observer.observe(root, { attributes: true, attributeFilter: ["class"] })
    return () => observer.disconnect()
  }, [override])

  return override ?? hostDark
}

export function Spreadsheet({
  data,
  theme = singularityTheme,
  onChange,
  onReady,
  changeDebounce = 400,
  readOnly = false,
  zoom,
  activeSheetId,
  darkMode,
  autoFocus = true,
  locale = LocaleType.EN_US,
  locales = { [LocaleType.EN_US]: mergeLocales(UniverPresetSheetsCoreEnUS) },
  plugins,
  height = 520,
  className,
  ref,
  ...chrome
}: SpreadsheetProps) {
  const containerRef = useRef<HTMLDivElement>(null)
  const [api, setApi] = useState<FUniver | null>(null)
  const dark = useHostDarkMode(darkMode)

  const onChangeRef = useRef(onChange)
  const onReadyRef = useRef(onReady)
  useEffect(() => {
    onChangeRef.current = onChange
    onReadyRef.current = onReady
  })

  const mountOnly = useRef({ data, theme, locale, locales, plugins, chrome, autoFocus, dark })

  useEffect(() => {
    const container = containerRef.current
    if (!container) return

    const { data, theme, locale, locales, plugins, chrome, autoFocus, dark } = mountOnly.current
    const { univerAPI } = createUniver({
      theme,
      locale,
      locales,
      plugins,
      darkMode: dark,
      presets: [
        UniverSheetsCorePreset({
          container,
          disableAutoFocus: autoFocus ? undefined : true,
          ...chrome,
        }),
      ],
    })

    univerAPI.createWorkbook(data ?? {})
    setApi(univerAPI)
    onReadyRef.current?.(univerAPI)

    return () => {
      univerAPI.dispose()
      setApi(null)
    }
  }, [])

  useEffect(() => {
    api?.toggleDarkMode(dark)
  }, [api, dark])

  useEffect(() => {
    const workbook = api?.getActiveWorkbook()
    if (!workbook) return
    void workbook.getWorkbookPermission().setMode(readOnly ? "viewer" : "editor")
  }, [api, readOnly])

  useEffect(() => {
    if (zoom === undefined) return
    api?.getActiveWorkbook()?.getActiveSheet().zoom(zoom)
  }, [api, zoom])

  useEffect(() => {
    if (!activeSheetId) return
    api?.getActiveWorkbook()?.setActiveSheet(activeSheetId)
  }, [api, activeSheetId])

  useEffect(() => {
    if (!api) return
    let pending: ReturnType<typeof setTimeout>
    const subscription = api.addEvent(api.Event.SheetValueChanged, () => {
      clearTimeout(pending)
      pending = setTimeout(() => {
        const snapshot = api.getActiveWorkbook()?.save()
        if (snapshot) onChangeRef.current?.(snapshot)
      }, changeDebounce)
    })
    return () => {
      clearTimeout(pending)
      subscription.dispose()
    }
  }, [api, changeDebounce])

  useImperativeHandle(
    ref,
    () => ({
      save: () => api?.getActiveWorkbook()?.save(),
      getAPI: () => api,
    }),
    [api]
  )

  return (
    <div
      className={cn("relative overflow-hidden rounded-xl ring-1 ring-foreground/10", className)}
      style={{ height }}
    >
      <div ref={containerRef} className="size-full" />
      <BootingGrid settled={api !== null} />
    </div>
  )
}

const toolbarPlaceholders = [76, 28, 28, 28, 108, 28, 28, 28, 52]

const cellGrid = [
  "linear-gradient(to right, var(--border) 1px, transparent 1px)",
  "linear-gradient(to bottom, var(--border) 1px, transparent 1px)",
].join(", ")

function BootingGrid({ settled }: { settled: boolean }) {
  return (
    <div
      aria-hidden
      className={cn(
        "absolute inset-0 flex flex-col bg-background transition-opacity duration-200 ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none",
        settled && "pointer-events-none opacity-0"
      )}
    >
      <div className="flex h-10 shrink-0 items-center gap-2 border-b border-border px-3">
        {toolbarPlaceholders.map((width, index) => (
          <div
            key={index}
            className="h-4 animate-pulse rounded bg-muted"
            style={{ width }}
          />
        ))}
      </div>
      <div className="h-6 shrink-0 border-b border-border bg-muted/40" />
      <div className="flex min-h-0 flex-1">
        <div className="w-10 shrink-0 border-r border-border bg-muted/40" />
        <div className="flex-1" style={{ backgroundImage: cellGrid, backgroundSize: "94px 24px" }} />
      </div>
    </div>
  )
}
Installation
