/**
 * BoostMedia AI Content Generator Admin - QuickActions Component
 *
 * @package BoostMedia_AI
 * @license GPL-2.0-or-later
 */

import { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { RefreshCw, Sparkles, FileText, Settings } from 'lucide-react'
import { Card, CardHeader, CardTitle, CardContent } from '../common'
import { endpoints } from '../../api/client'
import { t } from '../../lib/i18n'

interface QuickActionsProps {
  onScanComplete?: () => void
}

export function QuickActions({ onScanComplete }: QuickActionsProps) {
  const navigate = useNavigate()
  const [scanning, setScanning] = useState(false)
  const [scanMessage, setScanMessage] = useState<string | null>(null)
  const [scanSuccess, setScanSuccess] = useState(false)

  const handleScan = async () => {
    setScanning(true)
    setScanMessage(null)

    try {
      await endpoints.scanAll()
      setScanSuccess(true)
      setScanMessage(t('Scan completed successfully!'))
      onScanComplete?.()
    } catch {
      setScanSuccess(false)
      setScanMessage(t('Scan error. Try again.'))
    } finally {
      setScanning(false)
      setTimeout(() => setScanMessage(null), 3000)
    }
  }

  const actions = [
    {
      id: 'scan',
      label: t('Rescan'),
      description: t('Scan content types and meta fields'),
      icon: <RefreshCw className="w-5 h-5" />,
      onClick: handleScan,
      loading: scanning,
      variant: 'primary' as const,
    },
    {
      id: 'generate',
      label: t('Create new content'),
      description: t('Create a new article with AI'),
      icon: <Sparkles className="w-5 h-5" />,
      onClick: () => navigate('/generate'),
      variant: 'accent' as const,
    },
    {
      id: 'post-types',
      label: t('View content types'),
      description: t('View post structure'),
      icon: <FileText className="w-5 h-5" />,
      onClick: () => navigate('/post-types'),
      variant: 'secondary' as const,
    },
    {
      id: 'settings',
      label: t('Settings'),
      description: t('Manage content preferences'),
      icon: <Settings className="w-5 h-5" />,
      onClick: () => navigate('/settings'),
      variant: 'secondary' as const,
    },
  ]

  return (
    <Card>
      <CardHeader>
        <CardTitle>{t('Quick Actions')}</CardTitle>
      </CardHeader>
      <CardContent>
        <div className="grid grid-cols-2 gap-4">
          {actions.map((action) => (
            <button
              key={action.id}
              onClick={action.onClick}
              disabled={action.loading}
              className={`
                flex items-start gap-4 p-4 rounded-bc
                border-2 transition-all text-start
                ${
                  action.variant === 'primary'
                    ? 'border-bc-primary bg-bc-primary-light hover:border-bc-primary-dark'
                    : action.variant === 'accent'
                    ? 'border-bc-accent bg-bc-accent-light hover:border-bc-accent-dark'
                    : 'border-bc-gray-200 hover:border-bc-gray-300 hover:bg-bc-gray-50'
                }
              `}
            >
              <div
                className={`
                  p-2 rounded-bc
                  ${
                    action.variant === 'primary'
                      ? 'bg-bc-primary text-white'
                      : action.variant === 'accent'
                      ? 'bg-bc-accent text-white'
                      : 'bg-bc-gray-200 text-bc-gray-600'
                  }
                `}
              >
                {action.loading ? (
                  <RefreshCw className="w-5 h-5 animate-spin" />
                ) : (
                  action.icon
                )}
              </div>
              <div className="flex-1">
                <h4 className="font-semibold text-bc-gray-800">{action.label}</h4>
                <p className="text-sm text-bc-gray-500 mt-1">{action.description}</p>
              </div>
            </button>
          ))}
        </div>

        {/* Scan Message */}
        {scanMessage && (
          <div
            className={`
              mt-4 p-3 rounded-bc text-sm text-center
              ${
                !scanSuccess
                  ? 'bg-red-50 text-red-700'
                  : 'bg-green-50 text-green-700'
              }
            `}
          >
            {scanMessage}
          </div>
        )}
      </CardContent>
    </Card>
  )
}