/**
 * BoostMedia AI Content Generator Admin - Onboarding Banner
 *
 * Shows a dismissible welcome banner when no content has been generated yet.
 *
 * @package BoostMedia_AI
 * @license GPL-2.0-or-later
 */

import { useState, useEffect } from 'react'
import { X, Search, Eye, Sparkles, CheckCircle } from 'lucide-react'
import { t } from '../../lib/i18n'
import { endpoints } from '../../api/client'

const DISMISSED_KEY = 'bmai_onboarding_dismissed'

export function OnboardingBanner() {
  const [visible, setVisible] = useState(false)
  const [loaded, setLoaded] = useState(false)

  useEffect(() => {
    if (localStorage.getItem(DISMISSED_KEY) === '1') {
      setLoaded(true)
      return
    }

    endpoints.getGenerateStats().then((res) => {
      const stats = res.data as { total?: number } | null
      if (!stats?.total || stats.total === 0) {
        setVisible(true)
      }
      setLoaded(true)
    }).catch(() => {
      setVisible(false)
      setLoaded(true)
    })
  }, [])

  if (!loaded || !visible) return null

  const dismiss = () => {
    localStorage.setItem(DISMISSED_KEY, '1')
    setVisible(false)
  }

  const steps = [
    {
      icon: <Search className="w-5 h-5" />,
      title: t('Scan your site'),
      desc: t('Click Rescan to discover your content types and meta fields'),
      link: '#/post-types',
    },
    {
      icon: <Eye className="w-5 h-5" />,
      title: t('Review your content types'),
      desc: t('Make sure the right types and fields are detected'),
      link: '#/post-types',
    },
    {
      icon: <Sparkles className="w-5 h-5" />,
      title: t('Generate your first post'),
      desc: t('Go to Create Content, pick a type, enter a keyword, generate 1 draft'),
      link: '#/generate',
    },
    {
      icon: <CheckCircle className="w-5 h-5" />,
      title: t('Review and publish'),
      desc: t('Check the draft, then decide to generate more'),
      link: '#/generated',
    },
  ]

  return (
    <div className="relative mb-6 bg-gradient-to-l from-bc-primary/5 to-white border border-bc-primary/20 rounded-bc-md p-5 shadow-bc">
      <button
        type="button"
        onClick={dismiss}
        className="absolute top-3 end-3 text-bc-gray-400 hover:text-bc-gray-600 bg-transparent border-none cursor-pointer p-1"
        aria-label={t('Close')}
      >
        <X className="w-4 h-4" />
      </button>

      <h3 className="text-lg font-bold text-bc-gray-800 mb-1">
        {t('Welcome to BoostMedia AI Content Generator!')}
      </h3>
      <p className="text-sm text-bc-gray-500 mb-4">
        {t('Get started in 4 easy steps to create AI-powered content for your site.')}
      </p>

      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">
        {steps.map((step, i) => (
          <a
            key={i}
            href={step.link}
            className="flex items-start gap-3 p-3 rounded-bc bg-white border border-bc-gray-100 hover:border-bc-primary/30 hover:shadow-sm transition-all no-underline"
          >
            <div className="flex-shrink-0 w-8 h-8 rounded-full bg-bc-primary-light flex items-center justify-center text-bc-primary">
              {step.icon}
            </div>
            <div className="min-w-0">
              <div className="text-sm font-semibold text-bc-gray-800">
                <span className="text-bc-primary me-1">{i + 1}.</span>
                {step.title}
              </div>
              <p className="text-xs text-bc-gray-400 mt-0.5 leading-relaxed">{step.desc}</p>
            </div>
          </a>
        ))}
      </div>
    </div>
  )
}