/**
 * BoostMedia AI Content Generator Admin - SetupBanner Component
 *
 * Inline card banner shown at the top of setup pages during onboarding.
 *
 * @package BoostMedia_AI
 * @license GPL-2.0-or-later
 */

import { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { useOnboarding } from '../../hooks/useOnboarding'
import { t } from '../../lib/i18n'
import type { OnboardingState } from '../../types'

interface SetupBannerProps {
  stepKey: keyof OnboardingState
  icon: string
  title: string
  description: string
  ctaLabel?: string
  ctaAction?: string | (() => void)
  nextLabel?: string
  nextPath?: string
}

export function SetupBanner({
  stepKey,
  icon,
  title,
  description,
  ctaLabel,
  ctaAction,
  nextLabel,
  nextPath,
}: SetupBannerProps) {
  const { state, markSeen } = useOnboarding()
  const navigate = useNavigate()
  const [dismissed, setDismissed] = useState(false)

  if (state[stepKey] === true || dismissed) return null

  const handleDismiss = () => {
    setDismissed(true)
    markSeen(stepKey)
  }

  const handleCta = () => {
    if (typeof ctaAction === 'function') {
      ctaAction()
    } else if (typeof ctaAction === 'string') {
      navigate(ctaAction)
    }
  }

  const handleNext = () => {
    if (nextPath) {
      handleDismiss()
      navigate(nextPath)
    }
  }

  return (
    <div className="mb-6 rounded-bc-md border border-bc-primary/20 bg-bc-primary/5 p-4">
      <div className="flex items-start gap-3">
        <span className="text-2xl flex-shrink-0">{icon}</span>
        <div className="flex-1 min-w-0">
          <h3 className="font-bold text-base mb-1">{title}</h3>
          <p className="text-sm text-bc-gray-600 mb-3 leading-relaxed">{description}</p>
          <div className="flex items-center gap-3 flex-wrap">
            {ctaLabel && ctaAction && (
              <button
                type="button"
                onClick={handleCta}
                className="inline-flex items-center gap-1.5 rounded-bc bg-bc-primary px-3 py-1.5 text-sm font-medium text-white transition-colors hover:bg-bc-primary-dark"
              >
                {ctaLabel}
              </button>
            )}
            {nextLabel && nextPath && (
              <button
                type="button"
                onClick={handleNext}
                className="inline-flex items-center gap-1.5 text-sm font-medium text-bc-primary hover:text-bc-primary-dark transition-colors"
              >
                {nextLabel}
              </button>
            )}
          </div>
        </div>
        <button
          type="button"
          onClick={handleDismiss}
          className="flex-shrink-0 text-bc-gray-400 hover:text-bc-gray-600 transition-colors p-1 bg-transparent border-none cursor-pointer"
          title={t('Dismiss')}
        >
          ✕
        </button>
      </div>
    </div>
  )
}