import { CustomIcon } from '@src/components/CustomIcon'
import { PATHS } from '@src/lib/paths'
import { useEffect } from 'react'
import { useLocation, useNavigate } from 'react-router-dom'

export function HicadProjectDashboardHeading({
  projectCount,
}: {
  projectCount: number
}) {
  const location = useLocation()
  const navigate = useNavigate()
  const startCreatingProject = () => {
    document
      .querySelector<HTMLButtonElement>('[data-testid="home-new-file"]')
      ?.click()
  }
  const startFromSample = () => {
    document
      .querySelector<HTMLButtonElement>(
        '[data-testid="home-create-from-sample"]'
      )
      ?.click()
  }

  useEffect(() => {
    const shouldCreateBlankProject =
      new URLSearchParams(location.search).get('create') === 'blank'
    if (!shouldCreateBlankProject) return

    const timer = window.setTimeout(() => {
      startCreatingProject()
      void navigate(PATHS.HOME, { replace: true })
    }, 250)

    return () => window.clearTimeout(timer)
  }, [location.search, navigate])

  return (
    <div
      className="flex min-w-0 flex-1 flex-col gap-3 sm:flex-row sm:items-center sm:justify-between"
      data-testid="hicad-project-dashboard-heading"
    >
      <div className="min-w-0">
        <p className="mb-1 text-xs font-medium text-primary">HiCAD 项目空间</p>
        <h1 className="text-3xl font-bold">我的 CAD 项目</h1>
        <p className="mt-1 text-sm text-chalkboard-70 dark:text-chalkboard-30">
          共 {projectCount} 个项目，编辑内容会自动保存
        </p>
      </div>
      <div className="flex flex-none items-center gap-2">
        <button
          type="button"
          onClick={startFromSample}
          className="inline-flex h-10 items-center justify-center gap-2 rounded-sm border border-chalkboard-30 bg-chalkboard-10 px-3 text-sm font-medium text-chalkboard-90 transition-colors hover:border-primary/50 hover:bg-primary/5 dark:border-chalkboard-70 dark:bg-chalkboard-90 dark:text-chalkboard-20"
          data-testid="hicad-create-from-sample"
        >
          <CustomIcon name="file" className="h-4 w-4" />
          从示例开始
        </button>
        <button
          type="button"
          onClick={startCreatingProject}
          className="inline-flex h-10 items-center justify-center gap-2 rounded-sm border border-primary bg-primary px-4 text-sm font-semibold text-white transition-colors hover:brightness-110 focus-visible:outline-appForeground"
          data-testid="hicad-create-project"
        >
          <CustomIcon name="plus" className="h-5 w-5" />
          新建项目
        </button>
      </div>
    </div>
  )
}

export function HicadAutosaveStatus() {
  return (
    <span
      className="mr-1 inline-flex h-7 items-center gap-1.5 rounded-md border border-chalkboard-30 bg-chalkboard-10/80 px-2 text-xs text-chalkboard-70 dark:border-chalkboard-70 dark:bg-chalkboard-100/50 dark:text-chalkboard-30"
      data-testid="hicad-autosave-status"
      title="项目内容会自动保存到当前浏览器"
    >
      <span className="h-1.5 w-1.5 rounded-full bg-succeed-60" />
      自动保存已开启
    </span>
  )
}

export function HicadEditorProjectActions({
  onOpenProjectList,
  onCreateBlankProject,
}: {
  onOpenProjectList: () => void
  onCreateBlankProject: () => void
}) {
  const buttonClassName =
    'inline-flex h-7 items-center justify-center gap-1.5 rounded-md border border-chalkboard-30 bg-chalkboard-10/80 px-2 text-xs font-medium text-chalkboard-80 transition-colors hover:border-primary/50 hover:bg-primary/5 hover:text-primary focus-visible:outline-appForeground dark:border-chalkboard-70 dark:bg-chalkboard-100/50 dark:text-chalkboard-30 dark:hover:border-primary/50 dark:hover:text-primary'

  return (
    <div
      className="ml-2 flex flex-none items-center gap-1.5"
      data-testid="hicad-editor-project-actions"
    >
      <a
        href={`#${PATHS.HOME}`}
        className={buttonClassName}
        onClick={onOpenProjectList}
        data-testid="hicad-open-project-list"
        title="查看和打开历史项目"
      >
        <CustomIcon name="folder" className="h-4 w-4" />
        项目列表
      </a>
      <a
        href={`#${PATHS.HOME}?create=blank`}
        className={buttonClassName}
        onClick={onCreateBlankProject}
        data-testid="hicad-create-blank-project"
        title="新建空白 CAD 项目"
      >
        <CustomIcon name="plus" className="h-4 w-4" />
        新建空白
      </a>
    </div>
  )
}