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

import { useEffect, useMemo, useState } from 'react'
import { Check } from 'lucide-react'
import type { GenerationConfig } from './SelectPostTypeStep'
import { endpoints } from '../../api/client'
import { t, tf } from '../../lib/i18n'

export type GeneratorStep =
  | 'settings'
  | 'select'
  | 'reporter'
  | 'configure'
  | 'technical'
  | 'content'
  | 'intent'
  | 'sprint'
  | 'article-review'
  | 'generate'
  | 'review'

interface Step {
  id: GeneratorStep
  label: string
  description: string
}

interface StepsProgressProps {
  currentStep: GeneratorStep
  config?: GenerationConfig
  reporterLabel?: string | null
  useSprintMode?: boolean
}

const lengthLabels: Record<string, string> = {
  auto: 'AI decides',
  short: 'Short',
  medium: 'Medium',
  long: 'Long',
}

interface SummaryPart {
  key: string
  label: string
  value: string
  expandable?: boolean
}

export function StepsProgress({ currentStep, config, reporterLabel, useSprintMode = false }: StepsProgressProps) {
  const steps: Step[] = useMemo(() => {
    const base: Step[] = [
      { id: 'settings', label: t('Settings'), description: t('Post type, reporter, plan') },
      { id: 'technical', label: t('Technical'), description: t('Field structure') },
    ]

    if (useSprintMode) {
      return [
        ...base,
        { id: 'intent', label: t('Intent'), description: t('Goals & scope') },
      ]
    }

    return [
      ...base,
      { id: 'content', label: t('Content Planning'), description: t('Plan topics') },
    ]
  }, [useSprintMode])

  const normalizedStep = (['select', 'reporter', 'configure'] as string[]).includes(currentStep) ? 'settings' : currentStep
  const currentIndex = steps.findIndex((s) => s.id === normalizedStep)
  const [selectedTermNames, setSelectedTermNames] = useState<string[]>([])
  const [showAllCategories, setShowAllCategories] = useState(false)
  const [showCategoriesPopover, setShowCategoriesPopover] = useState(false)

  useEffect(() => {
    let cancelled = false

    if (!config?.postType || !config.taxonomy || !config.term) {
      setSelectedTermNames([])
      return () => {
        cancelled = true
      }
    }

    void endpoints
      .getTaxonomyTerms(config.postType, config.taxonomy)
      .then((res) => {
        if (cancelled) {
          return
        }

        const selectedSlugs = config.term.split(',').filter(Boolean)
        const names = ((res.data as Array<{ slug: string; name: string }>) || [])
          .filter((term) => selectedSlugs.includes(term.slug))
          .map((term) => term.name)
        setSelectedTermNames(names)
      })
      .catch(() => {
        if (!cancelled) {
          setSelectedTermNames(config.term.split(',').filter(Boolean))
        }
      })

    return () => {
      cancelled = true
    }
  }, [config?.postType, config?.taxonomy, config?.term])

  const summaryParts: SummaryPart[] = []
  if (config) {
    if (config.postType && currentIndex > 0) {
      summaryParts.push({ key: 'postType', label: t('Type'), value: config.postType })
    }
    if (config.term && currentIndex > 0) {
      const termCount = config.term.split(',').filter(Boolean).length
      const categoryNames = selectedTermNames.length > 0 ? selectedTermNames : config.term.split(',').filter(Boolean)
      summaryParts.push({
        key: 'categories',
        label: termCount === 1 ? t('Category') : t('Categories'),
        value: categoryNames.join(', '),
        expandable: termCount > 1,
      })
    }
    if (config.planName && currentIndex > 0) {
      summaryParts.push({ key: 'planName', label: t('Plan'), value: config.planName })
    }
    if (reporterLabel && currentIndex > 0) {
      summaryParts.push({ key: 'reporter', label: t('Reporter'), value: reporterLabel })
    }
    if (config.topic && currentIndex > 0) {
      summaryParts.push({ key: 'topic', label: t('Topic'), value: config.topic })
    }
    if (config.keywords.length > 0 && currentIndex > 0) {
      summaryParts.push({ key: 'keywords', label: t('Keywords'), value: config.keywords.join(', ') })
    }
    if (config.count && currentIndex > 0) {
      summaryParts.push({ key: 'count', label: t('Posts'), value: tf('%s posts', config.count) })
    }
    if (config.length && currentIndex > 0) {
      summaryParts.push({ key: 'length', label: t('Length'), value: t(lengthLabels[config.length] || config.length) })
    }
    if (config.generationType && currentIndex > 0) {
      summaryParts.push({
        key: 'generationType',
        label: t('Plan Type'),
        value: config.generationType === 'repeating' ? t('Repeating plan') : t('One-time plan'),
      })
    }
    if (config.generationType === 'repeating' && currentIndex > 0) {
      summaryParts.push({
        key: 'repeatFrequency',
        label: t('Frequency'),
        value: `${t('Every')} ${config.repeatEvery > 1 ? `${config.repeatEvery} ` : ''}${t(
          config.repeatUnit === 'month'
            ? (config.repeatEvery === 1 ? 'month' : 'months')
            : config.repeatUnit === 'day'
              ? (config.repeatEvery === 1 ? 'day' : 'days')
              : (config.repeatEvery === 1 ? 'week' : 'weeks'),
        )} • ${String(config.repeatHour).padStart(2, '0')}:00`,
      })
      summaryParts.push({
        key: 'isActive',
        label: t('Status'),
        value: config.isActive ? t('Active') : t('Inactive'),
      })
      if (config.remainingRuns !== null) {
        summaryParts.push({
          key: 'remainingRuns',
          label: t('Runs Left'),
          value: String(config.remainingRuns),
        })
      }
      if (config.remainingPosts !== null) {
        summaryParts.push({
          key: 'remainingPosts',
          label: t('Posts Left'),
          value: String(config.remainingPosts),
        })
      }
    }
  }

  return (
    <div className="mb-8">
      <nav aria-label="Progress">
        <ol className="flex items-center justify-center gap-1">
          {steps.map((step, index) => {
            const isCompleted = index < currentIndex
            const isCurrent = step.id === currentStep
            const isPending = index > currentIndex

            return (
              <li key={step.id} className="flex items-center">
                <div className="flex flex-col items-center">
                  <div
                    className={`
                      w-8 h-8 rounded-full flex items-center justify-center
                      font-semibold text-xs transition-all duration-300
                      ${isCompleted ? 'bg-bc-success text-white' : ''}
                      ${isCurrent ? 'bg-bc-primary text-white ring-3 ring-bc-primary-light' : ''}
                      ${isPending ? 'bg-bc-gray-200 text-bc-gray-500' : ''}
                    `}
                  >
                    {isCompleted ? (
                      <Check className="w-4 h-4" />
                    ) : (
                      <span>{index + 1}</span>
                    )}
                  </div>
                  <div className="mt-2 text-center">
                    <p
                      className={`
                        text-sm font-medium
                        ${isCurrent ? 'text-bc-primary' : ''}
                        ${isCompleted ? 'text-bc-success' : ''}
                        ${isPending ? 'text-bc-gray-400' : ''}
                      `}
                    >
                      {step.label}
                    </p>
                    <p
                      className={`
                        text-xs mt-0.5
                        ${isCurrent ? 'text-bc-gray-600' : 'text-bc-gray-400'}
                      `}
                    >
                      {step.description}
                    </p>
                  </div>
                </div>

                {index < steps.length - 1 && (
                  <div
                    className={`
                      w-6 h-0.5 mx-1 transition-all duration-300
                      ${index < currentIndex ? 'bg-bc-success' : 'bg-bc-gray-200'}
                    `}
                  />
                )}
              </li>
            )
          })}
        </ol>
      </nav>

      {/* Config summary */}
      {summaryParts.length > 0 && (
        <div className="mt-4 mx-auto flex max-w-5xl flex-wrap items-center justify-center gap-2">
          {summaryParts.map((part) => (
            <div key={part.key} className="relative max-w-full">
              <button
                type="button"
                disabled={!part.expandable}
                onClick={() => {
                  if (part.key === 'categories' && part.expandable) {
                    setShowCategoriesPopover((current) => !current)
                  }
                }}
                className={`inline-flex w-fit max-w-full items-center rounded-full bg-bc-gray-100 px-3 py-1.5 text-xs text-bc-gray-700 ${
                  part.expandable ? 'cursor-pointer hover:bg-bc-gray-200' : 'cursor-default'
                }`}
              >
                <span className="font-semibold">{part.label}:</span>
                <span className="ms-1 break-words whitespace-normal text-start">{part.value}</span>
              </button>
              {part.key === 'categories' && showCategoriesPopover && part.expandable && (
                <div className="absolute inset-x-0 top-full z-20 mt-2 min-w-[20rem] rounded-bc border border-bc-gray-200 bg-white p-3 text-start shadow-xl">
                  <div className="mb-2 flex items-center justify-between gap-2">
                    <div className="text-sm font-semibold text-bc-gray-800">{t('Selected categories')}</div>
                    {selectedTermNames.length > 5 ? (
                      <button
                        type="button"
                        onClick={() => setShowAllCategories((current) => !current)}
                        className="text-xs font-medium text-bc-primary"
                      >
                        {showAllCategories ? t('Show less') : t('Show all')}
                      </button>
                    ) : null}
                  </div>
                  <div className="max-h-48 overflow-y-auto space-y-1">
                    {(showAllCategories ? selectedTermNames : selectedTermNames.slice(0, 5)).map((name) => (
                      <div key={name} className="rounded-bc bg-bc-gray-50 px-2 py-1 text-xs text-bc-gray-700">
                        {name}
                      </div>
                    ))}
                  </div>
                </div>
              )}
            </div>
          ))}
        </div>
      )}
    </div>
  )
}