"use client"

import type { ContentAudit, ContentAuditDisplayMode } from "@/types/content-audit"
import {
  formatContentAuditDate,
  getContentAuditUserLabel,
} from "@/lib/content-audit-format"

type ContentAuditInfoProps = {
  audit: ContentAudit | null | undefined
  mode?: ContentAuditDisplayMode
  /** Compact table cell vs slightly more detail */
  variant?: "table" | "inline"
  className?: string
}

function AuditLine({
  label,
  userLabel,
  dateLabel,
  missingUser,
}: {
  label: string
  userLabel: string
  dateLabel: string
  missingUser: boolean
}) {
  return (
    <div className="min-w-0">
      <p className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground font-sans leading-none mb-1">
        {label}
      </p>
      <p
        className="text-xs font-semibold text-foreground font-sans leading-tight truncate"
        title={userLabel}
      >
        {userLabel}
      </p>
      <p className="text-[11px] text-muted-foreground font-sans mt-0.5 leading-tight">
        {missingUser ? "Date unknown" : dateLabel}
      </p>
    </div>
  )
}

export function ContentAuditInfo({
  audit,
  mode = "updated",
  variant = "table",
  className = "",
}: ContentAuditInfoProps) {
  if (!audit) {
    return (
      <span className={`text-xs text-muted-foreground font-sans italic ${className}`}>
        No audit data
      </span>
    )
  }

  const showCreated = mode === "created" || mode === "both"
  const showUpdated = mode === "updated" || mode === "both"

  const createdUser = getContentAuditUserLabel(audit.createdBy)
  const updatedUser = getContentAuditUserLabel(audit.updatedBy)
  const createdMissing = !audit.createdBy
  const updatedMissing = !audit.updatedBy
  const createdDate = formatContentAuditDate(audit.createdAt)
  const updatedDate = formatContentAuditDate(audit.updatedAt)

  if (mode === "updated") {
    const userLabel = updatedMissing ? "Unknown editor" : updatedUser
    const dateLabel = updatedDate
    return (
      <div
        className={`min-w-0 max-w-[140px] ${variant === "table" ? "" : ""} ${className}`}
        title={
          updatedMissing
            ? `Last updated ${dateLabel} (editor not recorded)`
            : `Last updated by ${userLabel} on ${dateLabel}`
        }
      >
        <p
          className="text-xs font-semibold text-foreground font-sans leading-tight truncate"
        >
          {userLabel}
        </p>
        <p className="text-[11px] text-muted-foreground font-sans mt-0.5 leading-tight">
          {dateLabel}
        </p>
      </div>
    )
  }

  if (mode === "created") {
    const userLabel = createdMissing ? "Unknown creator" : createdUser
    return (
      <div
        className={`min-w-0 max-w-[140px] ${className}`}
        title={
          createdMissing
            ? `Created ${createdDate} (creator not recorded)`
            : `Created by ${userLabel} on ${createdDate}`
        }
      >
        <p className="text-xs font-semibold text-foreground font-sans leading-tight truncate">
          {userLabel}
        </p>
        <p className="text-[11px] text-muted-foreground font-sans mt-0.5 leading-tight">
          {createdDate}
        </p>
      </div>
    )
  }

  return (
    <div className={`flex flex-col gap-2 min-w-0 max-w-[160px] ${className}`}>
      {showCreated && (
        <AuditLine
          label="Created"
          userLabel={createdMissing ? "Unknown creator" : createdUser}
          dateLabel={createdDate}
          missingUser={createdMissing}
        />
      )}
      {showUpdated && (
        <AuditLine
          label="Last updated"
          userLabel={updatedMissing ? "Unknown editor" : updatedUser}
          dateLabel={updatedDate}
          missingUser={updatedMissing}
        />
      )}
    </div>
  )
}