'use client'

import React from 'react'
import { cn } from '@/lib/utils'
import {
  Info as InfoIcon,
  Warning as WarningIcon,
  Lightbulb,
  Note as NoteIcon,
  CheckCircle,
  XCircle,
} from '@phosphor-icons/react'

/**
 * Callout Components for MDX Documentation
 * 
 * Mintlify-compatible callout components for highlighting important information.
 * Supports: Note, Warning, Info, Tip, Check, Error
 */

interface CalloutProps {
  children: React.ReactNode
  title?: string
  className?: string
}

type CalloutVariant = 'note' | 'warning' | 'info' | 'tip' | 'check' | 'error'

const calloutConfig: Record<
  CalloutVariant,
  {
    icon: React.ComponentType<{ className?: string; weight?: 'fill' | 'regular' }>
    defaultTitle: string
    containerClass: string
    iconClass: string
    titleClass: string
  }
> = {
  note: {
    icon: NoteIcon,
    defaultTitle: 'Note',
    containerClass: 'border-blue-500/30 bg-blue-500/10 dark:border-blue-400/30 dark:bg-blue-400/10',
    iconClass: 'text-blue-600 dark:text-blue-400',
    titleClass: 'text-blue-700 dark:text-blue-300',
  },
  warning: {
    icon: WarningIcon,
    defaultTitle: 'Warning',
    containerClass: 'border-amber-500/30 bg-amber-500/10 dark:border-amber-400/30 dark:bg-amber-400/10',
    iconClass: 'text-amber-600 dark:text-amber-400',
    titleClass: 'text-amber-700 dark:text-amber-300',
  },
  info: {
    icon: InfoIcon,
    defaultTitle: 'Info',
    containerClass: 'border-sky-500/30 bg-sky-500/10 dark:border-sky-400/30 dark:bg-sky-400/10',
    iconClass: 'text-sky-600 dark:text-sky-400',
    titleClass: 'text-sky-700 dark:text-sky-300',
  },
  tip: {
    icon: Lightbulb,
    defaultTitle: 'Tip',
    containerClass: 'border-emerald-500/30 bg-emerald-500/10 dark:border-emerald-400/30 dark:bg-emerald-400/10',
    iconClass: 'text-emerald-600 dark:text-emerald-400',
    titleClass: 'text-emerald-700 dark:text-emerald-300',
  },
  check: {
    icon: CheckCircle,
    defaultTitle: 'Success',
    containerClass: 'border-green-500/30 bg-green-500/10 dark:border-green-400/30 dark:bg-green-400/10',
    iconClass: 'text-green-600 dark:text-green-400',
    titleClass: 'text-green-700 dark:text-green-300',
  },
  error: {
    icon: XCircle,
    defaultTitle: 'Error',
    containerClass: 'border-red-500/30 bg-red-500/10 dark:border-red-400/30 dark:bg-red-400/10',
    iconClass: 'text-red-600 dark:text-red-400',
    titleClass: 'text-red-700 dark:text-red-300',
  },
}

function BaseCallout({
  variant,
  children,
  title,
  className,
}: CalloutProps & { variant: CalloutVariant }) {
  const config = calloutConfig[variant]
  const Icon = config.icon
  const displayTitle = title ?? config.defaultTitle

  return (
    <div
      className={cn(
        `docs-callout docs-callout-${variant} my-4 rounded-lg border p-4`,
        config.containerClass,
        className
      )}
    >
      <div className="flex items-start gap-3">
        <Icon
          className={cn('docs-callout-icon mt-0.5 h-5 w-5 shrink-0', config.iconClass)}
          weight="fill"
        />
        <div className="docs-callout-content flex-1 min-w-0">
          {displayTitle && (
            <div className={cn('docs-callout-title font-semibold text-sm mb-1', config.titleClass)}>
              {displayTitle}
            </div>
          )}
          <div className="docs-callout-body text-sm text-foreground/90 [&>p]:mb-2 [&>p:last-child]:mb-0 [&>ul]:mt-2 [&>ol]:mt-2">
            {children}
          </div>
        </div>
      </div>
    </div>
  )
}

// Individual callout components for MDX usage
export function Note({ children, title, className }: CalloutProps) {
  return <BaseCallout variant="note" title={title} className={className}>{children}</BaseCallout>
}

export function Warning({ children, title, className }: CalloutProps) {
  return <BaseCallout variant="warning" title={title} className={className}>{children}</BaseCallout>
}

export function Info({ children, title, className }: CalloutProps) {
  return <BaseCallout variant="info" title={title} className={className}>{children}</BaseCallout>
}

export function Tip({ children, title, className }: CalloutProps) {
  return <BaseCallout variant="tip" title={title} className={className}>{children}</BaseCallout>
}

export function Check({ children, title, className }: CalloutProps) {
  return <BaseCallout variant="check" title={title} className={className}>{children}</BaseCallout>
}

export function Error({ children, title, className }: CalloutProps) {
  return <BaseCallout variant="error" title={title} className={className}>{children}</BaseCallout>
}

// Generic Callout component with type prop
export function Callout({ 
  type = 'note', 
  children, 
  title, 
  className 
}: CalloutProps & { type?: CalloutVariant }) {
  return <BaseCallout variant={type} title={title} className={className}>{children}</BaseCallout>
}
