"use client";

import { DataTable, DataTableEmpty } from "@/components/layout/DataTable";
import {
  changeForColumn,
  changedFields,
  displayCell,
  rowBlockingErrors,
  rowWarnings,
  type ImportColumn,
  type ImportPreviewRow,
} from "@/lib/import";

function PreviewCell({
  row,
  column,
  highlighted,
}: {
  row: ImportPreviewRow;
  column: ImportColumn;
  highlighted: boolean;
}) {
  const current = displayCell(row, column);
  const change = changeForColumn(row, column);
  const previous = change?.old?.trim() ?? "";
  const isNameColumn = column.key === "first_name" || column.key === "last_name";
  const showPrevious =
    previous !== "" && previous !== "—" && (isNameColumn || previous !== current);

  return (
    <td className={`px-3 py-2 align-top ${highlighted ? "bg-amber-100/80" : ""}`}>
      <div className="whitespace-nowrap">{current}</div>
      {showPrevious ? (
        <div className="mt-0.5 whitespace-nowrap text-[11px] text-amber-800">
          <span className="ml-1 rounded bg-amber-200/80 px-1 py-px font-medium text-amber-950">قبلی</span>
          {previous}
        </div>
      ) : null}
    </td>
  );
}

export function ImportPreviewTable({
  columns,
  rows,
  errorsOnly,
}: {
  columns: ImportColumn[];
  rows: ImportPreviewRow[];
  errorsOnly: boolean;
}) {
  const visible = errorsOnly
    ? rows.filter((row) => rowBlockingErrors(row).length > 0 || rowWarnings(row).length > 0)
    : rows;
  const tableColumns = [
    { key: "excel_row", label: "ردیف فایل" },
    ...columns.map((column) => ({ key: column.key, label: column.label })),
    { key: "row_notes", label: "وضعیت" },
  ];

  return (
    <DataTable columns={tableColumns} emptyMessage="ردیفی برای نمایش وجود ندارد.">
      {visible.length === 0 ? (
        <DataTableEmpty colSpan={tableColumns.length} message="ردیفی برای نمایش وجود ندارد." />
      ) : (
        visible.map((row) => {
          const blocking = rowBlockingErrors(row);
          const warnings = rowWarnings(row);
          const changed = changedFields(row);
          const rowClass = blocking.length > 0 ? "bg-red-50/70" : warnings.length > 0 ? "bg-amber-50/70" : undefined;
          const statusText =
            blocking.length > 0
              ? blocking.map((error) => error.message).join("، ")
              : warnings.length > 0
                ? warnings.map((error) => error.message).join("، ")
                : "—";

          return (
            <tr key={row.row} className={rowClass}>
              <td className="whitespace-nowrap px-3 py-2 font-mono text-xs" dir="ltr">
                {row.row}
              </td>
              {columns.map((column) => (
                <PreviewCell
                  key={column.key}
                  row={row}
                  column={column}
                  highlighted={changed.has(column.key)}
                />
              ))}
              <td
                className={`whitespace-nowrap px-3 py-2 text-xs ${
                  blocking.length > 0 ? "text-red-700" : warnings.length > 0 ? "text-amber-800" : ""
                }`}
              >
                {statusText}
              </td>
            </tr>
          );
        })
      )}
    </DataTable>
  );
}