import type { ImportResultStats } from "@/types/import";
import { Badge } from "@/components/ui/badge";

function toResultStats(log: Record<string, unknown>): ImportResultStats {
  return {
    companiesCreated: Number(log.companiesCreated ?? 0),
    companiesUpdated: Number(log.companiesUpdated ?? 0),
    companiesSkippedDuplicate: Number(log.companiesSkippedDuplicate ?? 0),
    peopleCreated: Number(log.peopleCreated ?? 0),
    peopleUpdated: Number(log.peopleUpdated ?? 0),
    peopleSkippedDuplicate: Number(log.peopleSkippedDuplicate ?? 0),
    contactsCreated: Number(log.contactsCreated ?? 0),
    contactsUpdated: Number(log.contactsUpdated ?? 0),
    contactsSkippedDuplicate: Number(log.contactsSkippedDuplicate ?? 0),
    serviceMatchesCreated: Number(log.serviceMatchesCreated ?? 0),
    possibleDuplicates: Number(log.possibleDuplicates ?? 0),
    processedRows: Number(log.processedRows ?? 0),
    skippedRows: Number(log.skippedRows ?? 0),
    errorsCount: Number(log.errorsCount ?? 0),
    durationMs: log.durationMs != null ? Number(log.durationMs) : undefined,
  };
}

export function ImportHistoryList({ items }: { items: unknown[] }) {
  if (items.length === 0) {
    return (
      <p className="py-8 text-center text-sm text-muted-foreground">
        لا يوجد سجل استيراد بعد.
      </p>
    );
  }

  return (
    <ul className="divide-y divide-border">
      {items.map((raw) => {
        const log = raw as Record<string, unknown>;
        const id = String(log._id ?? "");
        const rs = toResultStats(log);
        const date = log.createdAt
          ? new Date(String(log.createdAt)).toLocaleString("ar-SA")
          : "—";

        return (
          <li key={id} className="py-4 text-sm">
            <div className="flex flex-wrap items-start justify-between gap-2">
              <div>
                <p className="font-semibold text-foreground">{String(log.fileName ?? "—")}</p>
                <p className="text-muted-foreground">
                  {String(log.importType ?? "")} · {date}
                </p>
              </div>
              <StatusBadge status={String(log.status ?? "")} />
            </div>
            <div className="mt-3 grid gap-2 text-muted-foreground md:grid-cols-3">
              <p>
                شركات: +{rs.companiesCreated} / تحديث {rs.companiesUpdated} / تخطي{" "}
                {rs.companiesSkippedDuplicate}
              </p>
              <p>
                أشخاص: +{rs.peopleCreated} / تحديث {rs.peopleUpdated} / تخطي{" "}
                {rs.peopleSkippedDuplicate}
              </p>
              <p>
                اتصالات: +{rs.contactsCreated} / تحديث {rs.contactsUpdated} / تخطي{" "}
                {rs.contactsSkippedDuplicate}
              </p>
            </div>
            <p className="mt-1 text-xs text-muted-foreground">
              صفوف: {rs.processedRows || Number(log.totalRowsFound ?? 0)}
              {rs.durationMs != null
                ? ` · ${(rs.durationMs / 1000).toFixed(1)} ث`
                : ""}
            </p>
          </li>
        );
      })}
    </ul>
  );
}

function StatusBadge({ status }: { status: string }) {
  const variant =
    status === "completed"
      ? "default"
      : status === "failed"
        ? "destructive"
        : "secondary";
  return <Badge variant={variant}>{status || "—"}</Badge>;
}