"use client"

import { useEffect, useState } from "react"
import {
  formatMailDate,
  formatMailPreviewDatePrimary,
  formatMailPreviewDateRelative,
  type MailDateDisplayVariant,
} from "@/lib/mail-date"
import { cn } from "@/lib/utils"

type MailDateTextProps = {
  iso: string | undefined
  variant: MailDateDisplayVariant
  className?: string
}

type PreviewDateLines = {
  primary: string
  relative: string | null
}

/** Date mail formatée côté client (fuseau navigateur, évite mismatch SSR). */
export function MailDateText({ iso, variant, className }: MailDateTextProps) {
  const [text, setText] = useState("\u00a0")
  const [previewLines, setPreviewLines] = useState<PreviewDateLines | null>(null)

  useEffect(() => {
    if (!iso?.trim()) {
      setText("—")
      setPreviewLines(null)
      return
    }
    if (variant === "preview") {
      setPreviewLines({
        primary: formatMailPreviewDatePrimary(iso),
        relative: formatMailPreviewDateRelative(iso),
      })
      setText("\u00a0")
      return
    }
    setPreviewLines(null)
    setText(formatMailDate(iso, variant))
  }, [iso, variant])

  if (variant === "preview" && previewLines) {
    return (
      <span
        className={cn("inline-flex flex-col items-end leading-tight", className)}
        suppressHydrationWarning
      >
        <span>{previewLines.primary}</span>
        {previewLines.relative ? <span>{previewLines.relative}</span> : null}
      </span>
    )
  }

  return (
    <span className={cn(className)} suppressHydrationWarning>
      {text}
    </span>
  )
}