"use client"

import { History } from "lucide-react"
import { formatDateTime } from "@/lib/format"

export type AuditEntry = {
  id: string
  action: string
  actor?: string | null
  entity_type?: string | null
  entity_id?: string | null
  old_values?: Record<string, unknown> | null
  new_values?: Record<string, unknown> | null
  ip_address?: string | null
  created_at: string
}

type Props = {
  entries: AuditEntry[]
  language: "ar" | "en"
  emptyText?: { en: string; ar: string }
}

export function AuditHistory({ entries, language, emptyText }: Props) {
  if (entries.length === 0) {
    return (
      <p className="text-sm text-muted-foreground">
        {emptyText
          ? emptyText[language]
          : language === "ar"
            ? "لا توجد سجلات."
            : "No audit records."}
      </p>
    )
  }

  return (
    <div className="space-y-2">
      {entries.map(entry => (
        <div
          key={entry.id}
          className="border-l-2 border-gold-300 pl-3"
        >
          <div className="flex items-center justify-between gap-3">
            <div className="flex items-center gap-1.5">
              <History className="h-3 w-3 text-muted-foreground" />
              <strong className="text-sm">{entry.action}</strong>
            </div>
            <span className="text-[11px] text-muted-foreground">
              {formatDateTime(entry.created_at)}
            </span>
          </div>
          {entry.actor && (
            <p className="mt-0.5 text-xs text-muted-foreground">
              {language === "ar" ? "بواسطة" : "By"}: {entry.actor}
            </p>
          )}
          {entry.new_values && Object.keys(entry.new_values).length > 0 && (
            <pre className="mt-1 max-h-24 overflow-auto whitespace-pre-wrap text-[11px] text-muted-foreground">
              {JSON.stringify(entry.new_values, null, 2)}
            </pre>
          )}
        </div>
      ))}
    </div>
  )
}