'use client'

import React, { useState, useEffect } from 'react'
import { X } from '@phosphor-icons/react'
import { cn } from '@/lib/utils'
import ReactMarkdown from 'react-markdown'

export interface NoticeConfig {
  content: string
  dismissible?: boolean
  background?: string // Custom background color (hex, rgb, or Tailwind class)
}

interface NoticeProps {
  config: NoticeConfig
  storageKey?: string
  className?: string
}

const STORAGE_PREFIX = 'docs-notice-dismissed-'

export function Notice({ config, storageKey = 'default', className }: NoticeProps) {
  // For non-dismissible notices, show immediately
  // For dismissible notices, start hidden until we check storage
  const [isDismissed, setIsDismissed] = useState(config.dismissible ? true : false)
  const [isLoaded, setIsLoaded] = useState(!config.dismissible)
  
  const fullStorageKey = `${STORAGE_PREFIX}${storageKey}`
  
  useEffect(() => {
    if (!config.dismissible) return
    
    // Check if notice was previously dismissed
    const dismissed = sessionStorage.getItem(fullStorageKey)
    setIsDismissed(dismissed === 'true')
    setIsLoaded(true)
  }, [fullStorageKey, config.dismissible])
  
  
  const handleDismiss = () => {
    sessionStorage.setItem(fullStorageKey, 'true')
    setIsDismissed(true)
  }
  
  // Don't render until we've checked storage (for dismissible notices)
  if (!isLoaded) return null
  
  // Don't render if dismissed
  if (isDismissed && config.dismissible) return null
  
  // Don't render if no content
  if (!config.content) return null
  
  // Default to a neutral dark color that works with any theme
  const defaultBackground = '#1e293b' // slate-800
  const backgroundStyle = { 
    backgroundColor: config.background || defaultBackground 
  }
  
  return (
    <div
      className={cn(
        'docs-notice sticky top-0 z-[100] w-full text-white',
        'px-4 py-2.5 text-sm text-center',
        'shadow-[0_4px_6px_-1px_rgba(0,0,0,0.3)]',
        className
      )}
      style={backgroundStyle}
    >
      <div className="docs-notice-content max-w-screen-xl mx-auto flex items-center justify-center gap-2">
        <div className="docs-notice-text flex-1 [&_a]:underline [&_a]:font-medium [&_a]:hover:opacity-80 [&_p]:m-0 [&_p]:inline">
          <ReactMarkdown
            components={{
              // Render links properly
              a: ({ href, children }) => (
                <a href={href} className="underline font-medium hover:opacity-80">
                  {children}
                </a>
              ),
              // Render paragraphs inline
              p: ({ children }) => <span>{children}</span>,
            }}
          >
            {config.content}
          </ReactMarkdown>
        </div>
        
        {config.dismissible && (
          <button
            type="button"
            onClick={handleDismiss}
            className={cn(
              'docs-notice-dismiss flex-shrink-0 p-1 rounded-sm',
              'hover:bg-white/20 transition-colors',
              'focus:outline-none focus-visible:ring-2 focus-visible:ring-white/50'
            )}
            aria-label="Dismiss notice"
          >
            <X className="h-4 w-4" weight="bold" />
          </button>
        )}
      </div>
    </div>
  )
}
