import type { ReactElement } from 'react'
import { Eye, GitBranch, MessageSquareText, Pencil, Sparkles } from 'lucide-react'
import { cn } from '@/lib/utils'

/**
 * 「重写注释」按钮的样子和动作：fresh 是块还没有注释、点了新写一段；正在重写时不能再点；
 * reopen 是重写过、下面的重写记录收着，点了先展开它（好接着说），不重写。
 */
export interface RewriteTool {
  fresh: boolean
  rewriting: boolean
  reopen: boolean
  onRewrite: () => void
}

/**
 * 块右上角的一排图标按钮（普通块、属性表、库规则的卡片共用）：只放图标，名字写在悬停提示（data-tooltip）和读屏用的 aria-label 里。
 * 「按注释规范重写」：用写注释的技能重写这块代码的注释并写回文件，块还没有注释时叫「按注释规范写注释」、新写一段；正在重写时不能再点。
 *   重写过、记录收着时叫「展开重写记录」，点了只展开。图标是注释。
 * 「问 AI」：点开 / 收起块下面的问答区，展开时带按下的底色。
 * 「编辑 / 预览」切换：预览时是铅笔「编辑」，编辑时是眼睛「预览」、带按下的底色。
 */
export function BlockTools({ editing, onToggleEdit, asking, onToggleAsk, rewrite, callTree }: {
  editing: boolean
  onToggleEdit: () => void
  /** 块下面的问答区展开着 */
  asking?: boolean
  /** 没给就不显示「问 AI」（问答没地方存） */
  onToggleAsk?: () => void
  /** 没给就不显示「按注释规范重写」（不能写注释的块、工作区外的库文件） */
  rewrite?: RewriteTool
  /** 没给就不显示调用树。count 是后台数出的棵数，大于 0 时按钮上带这个数字，是 0 时只有图标（还没数到、没有调用者，点开时会当场再问） */
  callTree?: { anchor: string, count: number, open: boolean, onOpen: () => void }
}): ReactElement {
  const label = editing ? '预览' : '编辑'
  const Icon = editing ? Eye : Pencil
  const rewriteLabel = rewrite?.reopen ? '展开重写记录' : rewrite?.fresh ? '按注释规范写注释' : '按注释规范重写'
  return (
    <div className="flex h-5 shrink-0 items-center gap-0.5" role="group" aria-label="块操作">
      {rewrite && (
        <button
          type="button"
          className="cr-tool flex h-5 w-6 items-center justify-center rounded"
          data-tooltip={rewriteLabel}
          aria-label={rewriteLabel}
          aria-busy={rewrite.rewriting}
          disabled={rewrite.rewriting}
          onClick={rewrite.onRewrite}
        >
          <MessageSquareText size={14} strokeWidth={1.8} aria-hidden />
        </button>
      )}
      {onToggleAsk && (
        <button
          type="button"
          className="cr-tool flex h-5 w-6 items-center justify-center rounded"
          data-active={asking ? '' : undefined}
          data-tooltip="问 AI"
          aria-label="问 AI"
          aria-expanded={asking === true}
          onClick={onToggleAsk}
        >
          <Sparkles size={14} strokeWidth={1.8} aria-hidden />
        </button>
      )}
      <button
        type="button"
        className="cr-tool flex h-5 w-6 items-center justify-center rounded"
        data-active={editing ? '' : undefined}
        data-tooltip={label}
        aria-label={label}
        onClick={onToggleEdit}
      >
        <Icon size={14} strokeWidth={1.8} aria-hidden />
      </button>
      {callTree && (
        <button
          type="button"
          className={cn('cr-tool flex h-5 items-center justify-center rounded', callTree.count > 0 ? 'gap-px px-1' : 'w-6')}
          data-call-tree={callTree.anchor}
          data-active={callTree.open ? '' : undefined}
          data-tooltip="调用树"
          aria-label="调用树"
          aria-expanded={callTree.open}
          onClick={callTree.onOpen}
        >
          <GitBranch size={14} strokeWidth={1.8} aria-hidden />
          {callTree.count > 0 && <span className="cr-call-count">{callTree.count}</span>}
        </button>
      )}
    </div>
  )
}