'use client'

import { useEffect, useState } from 'react'
import { Info, X } from 'lucide-react'
import { useLanguage } from '@/lib/i18n'
import type { StructuredViewMode } from '@/lib/structured-views/types'

const DISMISS_PREFIX = 'memento-structured-help-dismissed-'

type StructuredViewsHelpBannerProps = {
  notebookId: string
  mode: StructuredViewMode
}

export function StructuredViewsHelpBanner({ notebookId, mode }: StructuredViewsHelpBannerProps) {
  const { t } = useLanguage()
  const storageKey = `${DISMISS_PREFIX}${notebookId}-${mode}`
  const [visible, setVisible] = useState(false)

  useEffect(() => {
    try {
      setVisible(localStorage.getItem(storageKey) !== '1')
    } catch {
      setVisible(true)
    }
  }, [storageKey])

  if (!visible || (mode !== 'table' && mode !== 'kanban')) return null

  const message =
    mode === 'kanban'
      ? t('structuredViews.helpBanner.kanban')
      : t('structuredViews.helpBanner.table')

  return (
    <div className="mb-6 flex items-start gap-3 rounded-xl border border-brand-accent/20 bg-brand-accent/[0.04] px-4 py-3">
      <Info size={16} className="text-brand-accent shrink-0 mt-0.5" />
      <p className="text-[13px] leading-relaxed text-foreground/90 flex-1">{message}</p>
      <button
        type="button"
        onClick={() => {
          try {
            localStorage.setItem(storageKey, '1')
          } catch {
            /* ignore */
          }
          setVisible(false)
        }}
        className="shrink-0 p-1 rounded-md text-muted-foreground hover:text-foreground hover:bg-foreground/5 transition-colors"
        aria-label={t('structuredViews.helpBanner.dismiss')}
      >
        <X size={14} />
      </button>
    </div>
  )
}