import { useEffect, useMemo, useState } from "react"
import { Loader2 } from "lucide-react"

import { Badge } from "~/components/ui/badge"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from "~/components/ui/dialog"
import { Input } from "~/components/ui/input"
import { api } from "~/lib/api"
import type { FileContent } from "~/lib/api"
import { cn } from "~/lib/utils"

// 查看来源：本地映射文件或服务器 latest。
type ViewSource = "local" | "server"

/**
 * 把字节数格式化为可读大小。
 */
function formatSize(size: number): string {
  if (size < 1024) {
    return `${size} B`
  }
  if (size < 1024 * 1024) {
    return `${(size / 1024).toFixed(1)} KB`
  }
  return `${(size / 1024 / 1024).toFixed(1)} MB`
}

/**
 * 文件查看弹窗：只读展示本地、服务器 latest 或指定 changeset 版本内容，
 * 支持来源切换、行号与搜索高亮；二进制 / 超大 / 非映射路径给出明确提示。
 */
export function FileViewDialog({
  serverPath,
  localPath,
  changeset,
  onClose,
}: {
  serverPath: string
  localPath: string | null
  /** 指定 changeset 时固定展示该版本内容，不提供来源切换。 */
  changeset?: number
  onClose: () => void
}) {
  const [source, setSource] = useState<ViewSource>(localPath && changeset == null ? "local" : "server")
  const [content, setContent] = useState<FileContent | null>(null)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)
  const [search, setSearch] = useState("")

  // 加载所选来源的文件内容；本地内容仅在已映射时可用；指定版本固定按 changeset 读取。
  useEffect(() => {
    let active = true
    setLoading(true)
    setError(null)
    void (async () => {
      const result =
        changeset != null
          ? await api.getFileContent({ serverPath, changeset })
          : source === "local" && localPath
            ? await api.getFileContent({ localPath })
            : await api.getFileContent({ serverPath })
      if (!active) {
        return
      }
      setLoading(false)
      if (!result.ok || !result.data) {
        setContent(null)
        setError(result.errorMessage ?? "文件内容加载失败")
        return
      }
      setContent(result.data.content)
    })()
    return () => {
      active = false
    }
  }, [source, serverPath, localPath, changeset])

  const lines = useMemo(
    () => (content && !content.binary && !content.tooLarge ? content.content.split(/\r?\n/) : []),
    [content],
  )
  const keyword = search.trim().toLowerCase()
  const matchCount = useMemo(
    () =>
      keyword.length === 0
        ? 0
        : lines.filter((line) => line.toLowerCase().includes(keyword)).length,
    [lines, keyword],
  )

  return (
    <Dialog open onOpenChange={(open) => !open && onClose()}>
      <DialogContent className="flex h-[90svh] max-h-[90svh] flex-col sm:max-w-[92vw]">
        <DialogHeader>
          <DialogTitle>查看文件</DialogTitle>
          <DialogDescription className="font-mono text-xs">{serverPath}</DialogDescription>
        </DialogHeader>

        <div className="flex shrink-0 flex-wrap items-center gap-2">
          {changeset != null ? (
            <Badge variant="secondary" className="rounded-md">
              版本 C{changeset}
            </Badge>
          ) : (
            <div className="flex items-center rounded-md border p-0.5">
              <SourceTab
                label="本地文件"
                active={source === "local"}
                disabled={!localPath}
                disabledReason="未映射到本地"
                onClick={() => setSource("local")}
              />
              <SourceTab
                label="服务器 latest"
                active={source === "server"}
                onClick={() => setSource("server")}
              />
            </div>
          )}
          {content && (
            <span className="text-xs text-muted-foreground">
              {formatSize(content.size)}
              {content.changeset > 0 && ` · 版本 ${content.changeset}`}
            </span>
          )}
          <Input
            value={search}
            onChange={(event) => setSearch(event.target.value)}
            placeholder="搜索内容…"
            className="ml-auto h-7 w-48 text-xs"
          />
          {keyword.length > 0 && (
            <Badge variant="secondary" className="rounded-md">
              {matchCount} 行命中
            </Badge>
          )}
        </div>

        <div className="min-h-0 flex-1 overflow-auto rounded-md border bg-muted/20">
          {loading ? (
            <div className="flex h-60 items-center justify-center gap-2 text-sm text-muted-foreground">
              <Loader2 className="size-4 animate-spin" />
              正在加载内容…
            </div>
          ) : error ? (
            <div className="flex h-60 items-center justify-center p-6 text-center text-sm text-destructive">
              {error}
            </div>
          ) : content?.binary ? (
            <Notice text={`二进制文件不支持预览（${formatSize(content.size)}）`} />
          ) : content?.tooLarge ? (
            <Notice text={`文件过大（${formatSize(content.size)}），不直接渲染内容`} />
          ) : (
            <pre className="min-w-full font-mono text-xs leading-5">
              {lines.map((line, index) => {
                const hit = keyword.length > 0 && line.toLowerCase().includes(keyword)
                return (
                  <div
                    key={index}
                    className={cn("flex", hit && "bg-amber-500/15")}
                  >
                    <span className="w-12 shrink-0 border-r pr-2 text-right text-muted-foreground/60 select-none">
                      {index + 1}
                    </span>
                    <span className="whitespace-pre-wrap break-all pl-2">{line}</span>
                  </div>
                )
              })}
            </pre>
          )}
        </div>

        <p className="shrink-0 text-xs text-muted-foreground">
          只读查看 · 来源：
          {changeset != null
            ? `changeset ${changeset} 版本`
            : source === "local"
              ? `本地 ${localPath ?? ""}`
              : "服务器 latest"}
        </p>
      </DialogContent>
    </Dialog>
  )
}

/**
 * 来源切换小标签按钮。
 */
function SourceTab({
  label,
  active,
  disabled,
  disabledReason,
  onClick,
}: {
  label: string
  active: boolean
  disabled?: boolean
  disabledReason?: string
  onClick: () => void
}) {
  return (
    <button
      type="button"
      disabled={disabled}
      title={disabled ? disabledReason : undefined}
      onClick={onClick}
      className={cn(
        "rounded-[5px] px-2 py-0.5 text-xs",
        active ? "bg-primary/10 font-medium text-foreground" : "text-muted-foreground",
        disabled && "cursor-not-allowed opacity-50",
      )}
    >
      {label}
    </button>
  )
}

/**
 * 内容区占位提示（二进制 / 超大文件）。
 */
function Notice({ text }: { text: string }) {
  return (
    <div className="flex h-60 items-center justify-center p-6 text-center text-sm text-muted-foreground">
      {text}
    </div>
  )
}