import { useTutorialStore } from '@stores/tutorialStore'
import { Check, Circle } from 'lucide-react'

interface CheckpointProps {
  stepId: string
  title?: string
  description?: string
}

export function Checkpoint({
  stepId,
  title = '完成此步骤',
  description = '确认你已经完成了上述操作'
}: CheckpointProps) {
  const { completeStep, isStepCompleted } = useTutorialStore()
  const completed = isStepCompleted(stepId)

  const handleComplete = () => {
    if (!completed) {
      completeStep(stepId)
    }
  }

  return (
    <div className={`
      my-6 rounded-[var(--radius-lg)] border
      bg-[var(--color-bg-elevated)] flex items-center gap-4
      px-6 py-5
      ${completed ? 'border-[var(--color-primary)]' : 'border-[var(--color-border)]'}
    `}>
      {/* 图标区域 */}
      <div className={`
        flex items-center justify-center w-10 h-10 rounded-[10px] flex-shrink-0
        ${completed ? 'bg-[var(--color-primary-solid)] text-[var(--color-on-primary)]' : 'bg-[var(--color-bg-card)] text-[var(--color-text-tertiary)]'}
      `}>
        {completed ? (
          <Check className="w-5 h-5" strokeWidth={3} />
        ) : (
          <Circle className="w-5 h-5" strokeWidth={2.25} />
        )}
      </div>

      {/* 内容区域 */}
      <div className="flex-1 min-w-0">
        <p className={`font-semibold text-[15px] ${completed ? 'text-[var(--color-primary-solid)]' : 'text-[var(--color-text)]'}`}>
          {completed ? '已完成' : title}
        </p>
        <p className="text-[13px] text-[var(--color-text-secondary)] mt-1">
          {completed ? '太棒了！继续下一步吧' : description}
        </p>
      </div>

      {/* 确认按钮 */}
      <button
        onClick={handleComplete}
        disabled={completed}
        className={`
          px-5 py-2.5 rounded-[var(--radius-md)] font-semibold text-[13px] transition-all flex-shrink-0
          font-mono
          ${completed
            ? 'bg-[var(--color-primary-dim)] text-[var(--color-primary)] cursor-default'
            : 'bg-[var(--color-primary-solid)] text-[var(--color-on-primary)] hover:opacity-90 active:scale-[0.98]'
          }
        `}
      >
        {completed ? '✓ 已确认' : '确认完成'}
      </button>
    </div>
  )
}