import { AlertTriangle, CheckCircle2, Info, Lightbulb, Quote } from 'lucide-react'
import { cn } from '@/lib/utils'
import { RichText } from '@/lib/blocks/richText'
import type {
  HeadingData, TextData, QuoteData, CalloutData, ButtonData, DividerData, CalloutVariant,
} from '@/lib/blocks/types'
import { BlockRenderProps } from './shared'

export function HeadingBlock({ data }: BlockRenderProps<HeadingData>) {
  const cls =
    data.level === 1
      ? 'text-3xl md:text-4xl font-extrabold tracking-tight'
      : data.level === 2
        ? 'text-2xl md:text-3xl font-bold tracking-tight'
        : 'text-xl md:text-2xl font-semibold tracking-tight'
  return (
    <div className={cn(data.align === 'center' && 'text-center')}>
      {data.level < 3 && (
        <div
          className={cn(
            'mb-3 h-1.5 w-12 rounded-full bg-[var(--cp)]',
            data.align === 'center' && 'mx-auto'
          )}
          aria-hidden
        />
      )}
      <h2 className={cn('text-slate-900', cls)}>{data.text || 'Título'}</h2>
    </div>
  )
}

export function TextBlock({ data }: BlockRenderProps<TextData>) {
  if (!data.text?.trim()) {
    return <p className="text-sm italic text-slate-400">Parágrafo vazio — edite este bloco para adicionar conteúdo.</p>
  }
  return (
    <RichText
      text={data.text}
      className="text-[15px] leading-relaxed text-slate-600 md:text-base"
    />
  )
}

export function QuoteBlock({ data, theme }: BlockRenderProps<QuoteData>) {
  if (!data.text?.trim()) return <p className="text-sm italic text-slate-400">Citação vazia.</p>
  return (
    <figure className="flex gap-4">
      <div
        className="flex h-11 w-11 shrink-0 items-center justify-center rounded-full"
        style={{ backgroundColor: theme.tint, color: theme.primaryDark }}
        aria-hidden
      >
        <Quote className="h-5 w-5" />
      </div>
      <div>
        <blockquote className="text-lg font-medium italic leading-relaxed text-slate-700 md:text-xl">
          “{data.text}”
        </blockquote>
        {(data.author || data.role) && (
          <figcaption className="mt-3 flex items-center gap-3">
            <span
              className="flex h-9 w-9 items-center justify-center rounded-full text-sm font-bold text-white"
              style={{ backgroundColor: theme.primary }}
              aria-hidden
            >
              {(data.author || '?').charAt(0).toUpperCase()}
            </span>
            <span>
              {data.author && <span className="block text-sm font-semibold text-slate-900">{data.author}</span>}
              {data.role && <span className="block text-xs text-slate-500">{data.role}</span>}
            </span>
          </figcaption>
        )}
      </div>
    </figure>
  )
}

const CALLOUT_STYLES: Record<CalloutVariant, {
  icon: typeof Info; label: string; bg: string; border: string; fg: string
}> = {
  info: { icon: Info, label: 'Informação', bg: 'bg-[var(--cpt)]', border: 'border-[var(--cps)]', fg: 'text-[var(--cpd)]' },
  tip: { icon: Lightbulb, label: 'Dica', bg: 'bg-emerald-50', border: 'border-emerald-200', fg: 'text-emerald-700' },
  warning: { icon: AlertTriangle, label: 'Atenção', bg: 'bg-amber-50', border: 'border-amber-200', fg: 'text-amber-700' },
  success: { icon: CheckCircle2, label: 'Sucesso', bg: 'bg-green-50', border: 'border-green-200', fg: 'text-green-700' },
}

export function CalloutBlock({ data }: BlockRenderProps<CalloutData>) {
  const style = CALLOUT_STYLES[data.variant] ?? CALLOUT_STYLES.info
  const Icon = style.icon
  return (
    <div className={cn('flex gap-3.5 rounded-xl border p-4 md:p-5', style.bg, style.border)}>
      <div className={cn('mt-0.5 shrink-0', style.fg)} aria-hidden>
        <Icon className="h-5 w-5" />
      </div>
      <div className="min-w-0">
        {data.title && (
          <p className={cn('mb-1 text-sm font-bold tracking-wide uppercase', style.fg)}>{data.title}</p>
        )}
        <RichText text={data.content} className="text-sm leading-relaxed text-slate-700" />
      </div>
    </div>
  )
}

export function ButtonBlock({ data, theme, mode }: BlockRenderProps<ButtonData>) {
  const align = data.align === 'center' ? 'justify-center' : 'justify-start'
  const base =
    'inline-flex items-center gap-2 rounded-full px-6 py-3 text-sm font-semibold transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2'
  const variant =
    data.variant === 'outline'
      ? 'border-2 hover:opacity-85'
      : 'text-white shadow-sm hover:brightness-110 active:scale-[0.98]'

  const style =
    data.variant === 'outline'
      ? { borderColor: theme.primary, color: theme.primaryDark, backgroundColor: theme.tint }
      : { backgroundColor: theme.primary }

  if (mode === 'edit' || !data.url) {
    return (
      <div className={cn('flex', align)}>
        <span className={cn(base, variant)} style={style} role="button" aria-disabled>
          {data.label || 'Botão'}
        </span>
      </div>
    )
  }
  return (
    <div className={cn('flex', align)}>
      <a href={data.url} target="_blank" rel="noopener noreferrer" className={cn(base, variant)} style={style}>
        {data.label || 'Botão'}
      </a>
    </div>
  )
}

export function DividerBlock({ data }: BlockRenderProps<DividerData>) {
  if (data.style === 'dots') {
    return (
      <div className="flex items-center justify-center gap-2 py-2" aria-hidden>
        <span className="h-1.5 w-1.5 rounded-full bg-slate-300" />
        <span className="h-1.5 w-1.5 rounded-full bg-slate-300" />
        <span className="h-1.5 w-1.5 rounded-full bg-slate-300" />
      </div>
    )
  }
  if (data.style === 'space') return <div className="h-10" aria-hidden />
  return <hr className="border-t border-slate-200" />
}