import { Markdown } from '@app/components'
import type { Pull, UserDto } from '@app/domains/pulls/model'
import { type DiffFile, type DiffLine, parseHunks } from '@app/domains/repo/model'
import { InitialAvatar } from '@app/domains/shared'
import type { MessageKey } from '@app/i18n'
import { t as tr, useT } from '@app/i18n'
import { shortSha } from '@app/lib'
import {
  IconChevronDown as ChevronDown,
  IconGitMerge as GitMerge,
  IconMessage as MessageSquareText,
  IconSearch as Search,
  IconTag as TagIcon,
} from '@tabler/icons-react'
import { Fragment, type ReactNode, useEffect, useRef, useState } from 'react'
import { type AnchoredComment, anchorKey, type InlineAnchor, PULL_STATE_LABEL, TONE, userName } from '../model/meta'

export function Avatar({ user, size = 26 }: { user?: UserDto | null; size?: number }) {
  return <InitialAvatar name={userName(user)} url={user?.avatar_url || null} size={size} />
}

export function PullStateBadge({ pull }: { pull: Pull }) {
  if (pull.is_draft) {
    return (
      <span
        className={`inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[11.5px] font-medium ${TONE.gray}`}
      >
        {tr('pull.badge.draft')}
      </span>
    )
  }
  const tone = pull.state === 'open' ? TONE.green : pull.state === 'merged' ? TONE.violet : TONE.gray
  return (
    <span className={`inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[11.5px] font-medium ${tone}`}>
      {pull.state === 'merged' ? <GitMerge className="h-3 w-3" aria-hidden /> : null}
      {PULL_STATE_LABEL[pull.state]}
      {pull.merged_at ? ' ✓' : ''}
    </span>
  )
}

const MERGEABLE_KEYS: Record<string, { key: MessageKey; tone: keyof typeof TONE }> = {
  clean: { key: 'pull.mergeable.clean', tone: 'green' },
  blocked: { key: 'pull.mergeable.blocked', tone: 'amber' },
  dirty: { key: 'pull.mergeable.dirty', tone: 'red' },
  unstable: { key: 'pull.mergeable.unstable', tone: 'amber' },
  has_hooks: { key: 'pull.mergeable.hasHooks', tone: 'gray' },
  unknown: { key: 'pull.mergeable.unknown', tone: 'gray' },
}

export function MergeableChip({ state }: { state?: string | null }) {
  const { t } = useT()
  if (!state) return null
  const entry = MERGEABLE_KEYS[state]
  const hit = entry ? { text: t(entry.key), tone: entry.tone } : { text: state, tone: 'gray' as const }
  return <span className={`rounded px-1.5 py-0.5 text-[11.5px] font-medium ${TONE[hit.tone]}`}>{hit.text}</span>
}

export function LabelPill({ name, color, onRemove }: { name: string; color?: string | null; onRemove?: () => void }) {
  const { t } = useT()
  return (
    <span
      className="inline-flex items-center gap-1 rounded-full border border-shell-hairline px-2 py-0.5 text-[11.5px] font-medium text-shell-ink"
      style={color ? { backgroundColor: `${color}22`, borderColor: color } : undefined}
    >
      <TagIcon className="h-3 w-3" aria-hidden />
      {name}
      {onRemove ? (
        <button
          type="button"
          aria-label={t('issue.board.removeLabel', { name })}
          onClick={onRemove}
          className="ml-0.5 text-shell-ink-muted hover:text-shell-ink"
        >
          ×
        </button>
      ) : null}
    </span>
  )
}

export function SideSection({ title, children, action }: { title: string; children: ReactNode; action?: ReactNode }) {
  return (
    <section className="rounded-xl border border-shell-hairline bg-shell-surface p-4">
      <div className="mb-2 flex items-center justify-between gap-2">
        <h4 className="font-mono text-[10.5px] font-semibold uppercase tracking-[1.2px] text-shell-ink-muted">
          {title}
        </h4>
        {action}
      </div>
      {children}
    </section>
  )
}

/* ------------------------------------------------------------------ diff */

/**
 * One changed file of the files tab: the commit-view look (unified hunk table)
 * plus per-line affordances — existing inline comments are pinned under their
 * line and a hover button starts a new draft anchored to it.
 */
export function InlineDiffCard({
  file,
  commentsByLine,
  onRequestComment,
  renderDraft,
}: {
  file: DiffFile
  commentsByLine: Map<string, AnchoredComment[]>
  onRequestComment?: (anchor: InlineAnchor) => void
  renderDraft?: (anchor: InlineAnchor) => ReactNode
}) {
  const { hunks, truncated } = parseHunks(file.raw)
  const canComment = Boolean(onRequestComment)
  return (
    <div className="overflow-x-auto">
      {file.status === 'binary' ? (
        <p className="px-3 py-2 text-[12.5px] text-shell-ink-muted">{tr('pull.parts.binaryDiff')}</p>
      ) : null}
      {file.status !== 'binary' && hunks.length === 0 ? (
        <p className="px-3 py-2 text-[12.5px] text-shell-ink-muted">{tr('pull.parts.metaOnly')}</p>
      ) : null}
      <table className="w-full border-collapse font-mono text-[12px] leading-5">
        <tbody>
          {hunks.map((hunk) => (
            <Fragment key={hunk.header}>
              <tr>
                <td colSpan={4} className="bg-shell-field px-3 py-1 text-[11.5px] text-shell-ink-muted">
                  {hunk.header}
                </td>
              </tr>
              {hunk.lines.map((line, index) => {
                const side: 'left' | 'right' = line.kind === 'del' ? 'left' : 'right'
                const lineNo = side === 'left' ? line.oldNo : line.newNo
                const key = lineNo != null ? anchorKey(file.path, lineNo, side) : null
                const comments = key ? (commentsByLine.get(key) ?? []) : []
                const draft = key && lineNo != null ? renderDraft?.({ path: file.path, line: lineNo, side }) : null
                return (
                  <Fragment key={`${hunk.header}:${index}`}>
                    <tr
                      id={lineNo != null ? `diff-${side}-${encodeURIComponent(file.path)}-${lineNo}` : undefined}
                      className={lineTone(line)}
                    >
                      <td className="w-10 shrink-0 select-none border-r border-shell-hairline px-2 text-right text-[11px] text-shell-ink-muted">
                        {line.oldNo ?? ''}
                      </td>
                      <td className="w-10 shrink-0 select-none border-r border-shell-hairline px-2 text-right text-[11px] text-shell-ink-muted">
                        {line.newNo ?? ''}
                      </td>
                      <td className="w-6 select-none px-1 text-center text-[11px] text-shell-ink-muted">
                        {canComment && lineNo != null ? (
                          <button
                            type="button"
                            title={tr('pull.parts.addComment')}
                            onClick={() => onRequestComment?.({ path: file.path, line: lineNo, side })}
                            className="rounded bg-shell-active px-1 text-shell-ink-muted opacity-0 transition-opacity hover:text-shell-ink focus:opacity-100 group-hover/diff:opacity-100"
                          >
                            <MessageSquareText className="h-3 w-3" aria-hidden />
                          </button>
                        ) : line.kind === 'add' ? (
                          '+'
                        ) : line.kind === 'del' ? (
                          '−'
                        ) : (
                          ''
                        )}
                      </td>
                      <td className="whitespace-pre-wrap break-all px-2 py-0.5">{line.text || ' '}</td>
                    </tr>
                    {comments.map((comment) => (
                      <tr key={comment.id}>
                        <td colSpan={4} className="border-b border-shell-hairline bg-shell-field/60 px-3 py-1.5">
                          <Markdown compact className="font-sans">
                            {comment.body}
                          </Markdown>
                        </td>
                      </tr>
                    ))}
                    {draft ? (
                      <tr>
                        <td colSpan={4} className="border-b border-shell-hairline bg-shell-field/60 px-3 py-2">
                          <div className="font-sans">{draft}</div>
                        </td>
                      </tr>
                    ) : null}
                  </Fragment>
                )
              })}
            </Fragment>
          ))}
        </tbody>
      </table>
      {truncated ? (
        <p className="border-t border-shell-hairline px-3 py-2 text-[12px] text-[#8a6100]">
          {tr('pull.parts.truncated')}
        </p>
      ) : null}
    </div>
  )
}

const lineTone = (line: DiffLine) =>
  line.kind === 'add' ? 'bg-[rgba(35,165,90,0.12)]' : line.kind === 'del' ? 'bg-[rgba(242,63,67,0.10)]' : ''

export function Copyable({ text }: { text: string }) {
  return (
    <span
      role="button"
      tabIndex={0}
      title={text}
      onClick={() => void navigator.clipboard?.writeText(text).catch(() => undefined)}
      onKeyDown={(event) => {
        if (event.key === 'Enter') void navigator.clipboard?.writeText(text).catch(() => undefined)
      }}
      className="cursor-copy rounded bg-shell-active/70 px-1.5 py-0.5 font-mono text-[11px] text-shell-ink-muted transition-colors hover:text-shell-ink"
    >
      {shortSha(text, 8)}
    </span>
  )
}

export interface SearchSelectOption {
  value: string
  label: string
  /** 右侧灰字（用户名等补充信息）。 */
  hint?: string
  /** 左侧色点（标签颜色）。 */
  color?: string | null
  /** 左侧自定义图形（头像等）。 */
  icon?: ReactNode
}

/**
 * 可搜索下拉：触发按钮 + 弹出搜索框 + 过滤后的选项列表。
 * 侧栏的评审人/受理人/标签只能从这里选，避免手输拼错或写入无效值。
 */
export function SearchSelect({
  placeholder,
  options,
  onSelect,
  disabled = false,
  emptyText,
}: {
  placeholder: string
  options: SearchSelectOption[]
  onSelect: (value: string) => void
  disabled?: boolean
  emptyText: string
}) {
  const box = useRef<HTMLDivElement | null>(null)
  const [open, setOpen] = useState(false)
  const [query, setQuery] = useState('')
  const trimmed = query.trim().toLowerCase()
  const filtered = trimmed
    ? options.filter((option) => `${option.label} ${option.hint ?? ''}`.toLowerCase().includes(trimmed))
    : options

  useEffect(() => {
    if (!open) return
    const onDown = (event: MouseEvent) => {
      if (box.current && !box.current.contains(event.target as Node)) setOpen(false)
    }
    const onKey = (event: KeyboardEvent) => {
      if (event.key === 'Escape') setOpen(false)
    }
    window.addEventListener('mousedown', onDown)
    window.addEventListener('keydown', onKey)
    return () => {
      window.removeEventListener('mousedown', onDown)
      window.removeEventListener('keydown', onKey)
    }
  }, [open])

  return (
    <div ref={box} className="relative mt-2">
      <button
        type="button"
        aria-expanded={open}
        aria-haspopup="listbox"
        disabled={disabled}
        onClick={() => {
          setQuery('')
          setOpen((value) => !value)
        }}
        className="flex h-7 w-full items-center gap-1.5 rounded-md border border-shell-hairline bg-shell-field px-2 text-left text-[12px] text-shell-ink-muted outline-none transition-colors hover:text-shell-ink focus-visible:border-shell-tile disabled:pointer-events-none disabled:opacity-50"
      >
        <Search className="h-3 w-3 shrink-0 opacity-70" aria-hidden />
        <span className="min-w-0 flex-1 truncate">{placeholder}</span>
        <ChevronDown className="h-3 w-3 shrink-0 opacity-70" aria-hidden />
      </button>
      {open ? (
        <div className="absolute left-0 right-0 top-full z-30 mt-1 rounded-lg border border-shell-hairline bg-shell-surface shadow-lg">
          <input
            autoFocus
            value={query}
            onChange={(event) => setQuery(event.target.value)}
            placeholder={placeholder}
            className="h-7 w-full rounded-t-lg border-b border-shell-hairline bg-shell-field px-2 text-[12px] outline-none"
          />
          <div role="listbox" className="max-h-44 overflow-y-auto py-1">
            {filtered.length === 0 ? (
              <p className="px-2 py-1.5 text-[12px] text-shell-ink-muted">{emptyText}</p>
            ) : (
              filtered.map((option) => (
                <button
                  key={option.value}
                  type="button"
                  role="option"
                  aria-selected={false}
                  onClick={() => {
                    setOpen(false)
                    onSelect(option.value)
                  }}
                  className="flex w-full items-center gap-2 px-2 py-1.5 text-left text-[12.5px] text-shell-ink transition-colors hover:bg-shell-active"
                >
                  {option.icon ??
                    (option.color ? (
                      <span
                        className="h-2 w-2 shrink-0 rounded-full"
                        style={{ backgroundColor: option.color }}
                        aria-hidden
                      />
                    ) : null)}
                  <span className="min-w-0 flex-1 truncate">{option.label}</span>
                  {option.hint ? (
                    <span className="shrink-0 text-[11.5px] text-shell-ink-muted">{option.hint}</span>
                  ) : null}
                </button>
              ))
            )}
          </div>
        </div>
      ) : null}
    </div>
  )
}