'use client'

import React from 'react'
import { cn } from '@/lib/utils'
import * as PhosphorIcons from '@phosphor-icons/react'

/**
 * Steps Components for MDX Documentation
 * 
 * Mintlify-compatible step-by-step guide components.
 */

// Dynamic icon resolver
function getIcon(iconName: string): React.ComponentType<{ className?: string; weight?: string }> | null {
  if (!iconName) return null
  
  const pascalCase = iconName
    .split(/[-_]/)
    .map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
    .join('')
  
  const Icon = (PhosphorIcons as Record<string, unknown>)[pascalCase] as React.ComponentType<{ className?: string; weight?: string }> | undefined
  return Icon || null
}

interface StepProps {
  title: string
  children: React.ReactNode
  icon?: string
  iconType?: string
  stepNumber?: number
  titleSize?: 'p' | 'h2' | 'h3' | 'h4'
  className?: string
}

interface StepsContextValue {
  titleSize: 'p' | 'h2' | 'h3' | 'h4'
}

const StepsContext = React.createContext<StepsContextValue>({ titleSize: 'p' })

export function Step({
  title,
  children,
  icon,
  stepNumber,
  titleSize: localTitleSize,
  className,
}: StepProps) {
  const { titleSize: contextTitleSize } = React.useContext(StepsContext)
  const titleSize = localTitleSize ?? contextTitleSize
  
  const Icon = icon ? getIcon(icon) : null
  
  const TitleTag = titleSize === 'p' ? 'div' : titleSize
  const titleClass = cn(
    'font-semibold text-foreground',
    titleSize === 'h2' && 'text-xl',
    titleSize === 'h3' && 'text-lg',
    titleSize === 'h4' && 'text-base',
    titleSize === 'p' && 'text-base'
  )
  
  return (
    <div className={cn('relative pl-8 pb-8 last:pb-0', className)}>
      {/* Vertical line */}
      <div className="absolute left-[11px] top-8 bottom-0 w-px bg-border last:hidden" />
      
      {/* Step indicator */}
      <div className="absolute left-0 top-0 flex h-6 w-6 items-center justify-center rounded-full bg-primary text-primary-foreground text-xs font-semibold">
        {Icon ? (
          <Icon className="h-3.5 w-3.5" weight="bold" />
        ) : (
          stepNumber
        )}
      </div>
      
      {/* Content */}
      <div className="pt-0.5">
        <TitleTag className={titleClass}>{title}</TitleTag>
        <div className="mt-2 text-sm text-foreground/90 [&>p]:mb-2 [&>p:last-child]:mb-0 [&>pre]:my-3 [&>ul]:mt-2 [&>ol]:mt-2">
          {children}
        </div>
      </div>
    </div>
  )
}

interface StepsProps {
  children: React.ReactNode
  titleSize?: 'p' | 'h2' | 'h3' | 'h4'
  className?: string
}

export function Steps({ children, titleSize = 'p', className }: StepsProps) {
  // Auto-number steps
  const numberedChildren = React.Children.map(children, (child, index) => {
    if (React.isValidElement<StepProps>(child) && child.type === Step) {
      return React.cloneElement(child, {
        stepNumber: child.props.stepNumber ?? index + 1,
      })
    }
    return child
  })
  
  return (
    <StepsContext.Provider value={{ titleSize }}>
      <div className={cn('my-6', className)}>
        {numberedChildren}
      </div>
    </StepsContext.Provider>
  )
}
