import React from 'react'
import { AppIcon, Gitee } from '../Icons'
import { APP_VERSION } from '../../lib/constants'

interface AboutDialogProps {
  onClose: () => void
}

export const AboutDialog = React.memo(function AboutDialog({ onClose }: AboutDialogProps) {
  const handleLinkClick = (e: React.MouseEvent<HTMLAnchorElement>): void => {
    e.preventDefault()
    if (window.electronAPI?.openExternal) {
      window.electronAPI.openExternal('https://git.metona.cn/MetonaTeam/MarkLite')
    } else {
      window.open('https://git.metona.cn/MetonaTeam/MarkLite', '_blank')
    }
  }

  return (
    <div className="about-overlay" onClick={onClose} role="dialog" aria-modal="true" aria-label="关于 MarkLite">
      <div className="about-dialog" onClick={(e: React.MouseEvent) => e.stopPropagation()}>
        <div className="about-header">
          <AppIcon size={64} />
          <h2>MarkLite</h2>
          <span className="about-version">{APP_VERSION}</span>
        </div>
        <div className="about-body">
          <p>一款轻量级的 Windows 本地 Markdown 编辑器</p>
          <div className="about-features">
            <span>多标签页</span>
            <span>实时预览</span>
            <span>代码高亮</span>
            <span>暗色主题</span>
            <span>拖拽打开</span>
            <span>搜索替换</span>
            <span>文件树</span>
            <span>文档大纲</span>
            <span>状态持久化</span>
          </div>
        </div>
        <div className="about-footer">
          <a className="about-link" href="#" onClick={handleLinkClick}>
            <Gitee size={16} />
            <span>git.metona.cn/MetonaTeam/MarkLite</span>
          </a>
          <p>基于 Electron + React + TypeScript 构建</p>
          <p className="about-copyright">© 2026 thzxx</p>
        </div>
        <button className="about-close-btn" onClick={onClose}>关闭</button>
      </div>
    </div>
  )
})

AboutDialog.displayName = 'AboutDialog'