import type { MouseEvent } from 'react'

export interface ContinueLearningModalProps {
  /** 是否可见 */
  visible?: boolean
  /** 标题 */
  title?: string
  /** 提示正文 */
  message?: string
  /** 继续按钮文案 */
  continueText?: string
  /** 取消按钮文案 */
  cancelText?: string
  /** 点击「继续学习」回调 */
  onContinue?: () => void
  /** 点击「取消」或遮罩回调 */
  onCancel?: () => void
}

/**
 * ContinueLearningModal - 「未完成，是否继续学习」二选一确认弹窗
 * 纯 CSS 实现，暖纸 + 朱红 + 金线古籍风，不依赖图片素材。
 */
const ContinueLearningModal = ({
  visible = true,
  title = '温馨提示',
  message = '你还没有完成本故居的学习，是否继续上次的进度？',
  continueText = '继续学习',
  cancelText = '取消',
  onContinue,
  onCancel,
}: ContinueLearningModalProps) => {
  if (!visible) return null

  const swallow = (e: MouseEvent) => {
    e.preventDefault()
    e.stopPropagation()
  }

  return (
    <div className="fixed inset-0 z-10000 flex items-center justify-center">
      {/* 遮罩 */}
      <div className="absolute inset-0 bg-[#1f0e06]/65" onClick={onCancel} />

      {/* 哑光米纸卡片 */}
      <div
        className="relative z-10 w-[920px] rounded-[28px] border-[3px] border-[#bfa05c] bg-gradient-to-b from-[#e4d4b2] to-[#d6c198] px-20 py-14 shadow-[0_24px_70px_rgba(20,8,4,0.5)]"
        onClick={swallow}
      >
        {/* 内层细金线描边 */}
        <div className="pointer-events-none absolute inset-[10px] rounded-[20px] border border-[#bfa05c]/55" />

        <div className="relative flex flex-col items-center">
          {/* 标题 */}
          <div className="text-5xl font-bold tracking-[10px] text-[#a8281c]">{title}</div>

          {/* 菱形分隔线 */}
          <div className="mt-6 flex items-center gap-4">
            <span className="h-[2px] w-24 bg-gradient-to-r from-transparent to-[#c0392b]/70" />
            <span className="h-3 w-3 rotate-45 bg-[#c0392b]" />
            <span className="h-[2px] w-24 bg-gradient-to-l from-transparent to-[#c0392b]/70" />
          </div>

          {/* 正文 */}
          <p className="indent-18 mt-10 max-w-[720px] text-4xl font-medium leading-relaxed tracking-wide text-[#5c3a1e]">
            {message}
          </p>

          {/* 按钮组 */}
          <div className="mt-12 flex items-center gap-12">
            {/* 取消（次要：米底描边） */}
            <button
              type="button"
              className="cursor-pointer rounded-full border-2 border-[#bfa05c] bg-[#ecdcb6] px-14 py-3.5 text-3xl font-bold tracking-[4px] text-[#8a5326] transition-all duration-200 hover:bg-[#e2d0a8] active:scale-95"
              onMouseDown={swallow}
              onClick={(e) => {
                swallow(e)
                onCancel?.()
              }}
            >
              {cancelText}
            </button>

            {/* 继续学习（主要：朱红渐变 + 金边） */}
            <button
              type="button"
              className="cursor-pointer rounded-full border-2 border-[#e8c06a] bg-gradient-to-b from-[#d4452f] to-[#a8281c] px-14 py-3.5 text-3xl font-bold tracking-[4px] text-[#fdf1da] shadow-[0_8px_20px_rgba(150,40,25,0.45)] transition-all duration-200 hover:brightness-110 active:scale-95"
              onMouseDown={swallow}
              onClick={(e) => {
                swallow(e)
                onContinue?.()
              }}
            >
              {continueText}
            </button>
          </div>
        </div>
      </div>
    </div>
  )
}

export default ContinueLearningModal