import Link from "next/link";
import { formatDateTime } from "@/lib/format";
import type { AuditEntry } from "@/lib/audit-view";
import { Badge } from "@/components/ui";

const TONE = { DELETE: "red", CREATE: "green", IMPORT: "gold" } as const;

/** Một dòng lịch sử: ai, lúc nào, làm gì, và từng trường "cũ → mới". Dùng chung cho Nhật ký thao tác và hồ sơ từng bản ghi. */
export function AuditEntryRow({ entry, showEntity = true }: { entry: AuditEntry; showEntity?: boolean }) {
  return (
    <li className="grid gap-1 px-4 py-3 sm:grid-cols-[11rem_1fr] sm:gap-4">
      <div className="text-xs text-ink-400">
        <div className="tnum whitespace-nowrap text-ink-500">{formatDateTime(entry.createdAt)}</div>
        <div className="mt-0.5 font-medium text-ink-700">{entry.userName ?? "Hệ thống"}</div>
        {entry.userEmail && <div className="break-all">{entry.userEmail}</div>}
      </div>
      <div className="min-w-0 text-sm">
        <div className="flex flex-wrap items-center gap-2">
          <Badge tone={TONE[entry.action as keyof typeof TONE] ?? "neutral"}>{entry.actionLabel}</Badge>
          {showEntity && <span className="text-ink-500">{entry.entityLabel}</span>}
          {entry.headline &&
            (entry.href ? (
              <Link href={entry.href} className="font-medium text-brand-600 hover:underline">
                {entry.headline}
              </Link>
            ) : (
              <span className="font-medium text-ink-700">{entry.headline}</span>
            ))}
        </div>
        {entry.details.length > 0 && <p className="mt-1 break-words text-xs text-ink-500">{entry.details.join(" · ")}</p>}
        {entry.changes.length > 0 && (
          <ul className="mt-1.5 flex flex-col gap-0.5 rounded-lg bg-ink-50 px-3 py-2 text-xs">
            {entry.changes.map((change) => (
              <li key={change.field} className="break-words">
                <span className="font-medium text-ink-600">{change.label}:</span> <span className="text-ink-400 line-through decoration-ink-300">{change.from}</span>{" "}
                <span aria-hidden>→</span> <span className="text-ink-700">{change.to}</span>
              </li>
            ))}
          </ul>
        )}
      </div>
    </li>
  );
}

/** Khối "Lịch sử chỉnh sửa" của một bản ghi — chỉ Ban giám đốc được xem (nơi dùng phải tự kiểm quyền). */
export function EntityHistory({ entries, hint }: { entries: AuditEntry[]; hint?: string }) {
  return (
    <section className="card overflow-hidden" aria-label="Lịch sử chỉnh sửa">
      <div className="border-b border-[var(--color-line)] px-4 py-3">
        <h2 className="text-sm font-bold text-ink-700">Lịch sử chỉnh sửa</h2>
        <p className="text-[11px] text-ink-400">{hint ?? "Chỉ Ban giám đốc xem được — ai đã tạo, sửa, xoá và giá trị thay đổi."}</p>
      </div>
      {entries.length === 0 ? (
        <p className="px-4 py-6 text-center text-sm text-ink-400">Chưa có chỉnh sửa nào được ghi lại.</p>
      ) : (
        <ul className="divide-y divide-[var(--color-line)]">
          {entries.map((entry) => (
            <AuditEntryRow key={entry.id} entry={entry} />
          ))}
        </ul>
      )}
    </section>
  );
}