import type { CustomerImportPreviewRow } from "@/types/customer";

const actionLabels = {
  create: "Create",
  update: "Update",
  skip: "Skip",
  error: "Error",
};

const actionClasses = {
  create: "bg-emerald-50 text-emerald-700",
  update: "bg-blue-50 text-blue-700",
  skip: "bg-slate-100 text-slate-600",
  error: "bg-red-50 text-red-700",
};

function issueText(row: CustomerImportPreviewRow) {
  const issues = [...row.errors, ...row.warnings];
  if (issues.length === 0) {
    return "-";
  }
  return issues.map((issue) => `${issue.field || "Zeile"}: ${issue.message}`).join(" · ");
}

export default function ImportPreviewTable({ rows }: { rows: CustomerImportPreviewRow[] }) {
  return (
    <div className="max-h-80 overflow-auto rounded-lg border">
      <table className="w-full min-w-[720px] border-collapse text-sm">
        <thead className="sticky top-0 bg-slate-50 text-left text-xs uppercase text-slate-500">
          <tr>
            <th className="px-3 py-2">Zeile</th>
            <th className="px-3 py-2">Aktion</th>
            <th className="px-3 py-2">Kundennummer</th>
            <th className="px-3 py-2">Firma</th>
            <th className="px-3 py-2">Hinweise</th>
          </tr>
        </thead>
        <tbody className="divide-y bg-white">
          {rows.map((row) => (
            <tr key={row.row}>
              <td className="px-3 py-2 font-medium">{row.row}</td>
              <td className="px-3 py-2">
                <span className={`rounded-full px-2 py-1 text-xs font-semibold ${actionClasses[row.action]}`}>
                  {actionLabels[row.action]}
                </span>
              </td>
              <td className="px-3 py-2">{row.customer_number || "-"}</td>
              <td className="px-3 py-2">{row.company_name || "-"}</td>
              <td className="px-3 py-2 text-slate-600">{issueText(row)}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}