import type { ImportResultStats, ImportStatus } from "@/types/import";

export function ImportSummaryCard({
  status,
  resultStats,
  errorCount,
}: {
  status: ImportStatus;
  resultStats: ImportResultStats;
  errorCount: number;
}) {
  const success =
    status === "completed" || status === "partially_completed";

  return (
    <div className="space-y-4 rounded-lg border border-neutral-200 bg-white p-5">
      <h2 className="text-lg font-semibold">
        {success ? "تم الاستيراد بنجاح" : "فشل الاستيراد"}
      </h2>

      {success ? (
        <div className="grid gap-4 text-sm md:grid-cols-2">
          <StatGroup
            title="الشركات"
            items={[
              ["تم الإنشاء", resultStats.companiesCreated],
              ["تم التحديث", resultStats.companiesUpdated],
              ["تخطي (مكرر)", resultStats.companiesSkippedDuplicate],
            ]}
          />
          <StatGroup
            title="الأشخاص"
            items={[
              ["تم الإنشاء", resultStats.peopleCreated],
              ["تم التحديث", resultStats.peopleUpdated],
              ["تخطي (مكرر)", resultStats.peopleSkippedDuplicate],
            ]}
          />
          <StatGroup
            title="نقاط الاتصال"
            items={[
              ["تم الإنشاء", resultStats.contactsCreated],
              ["تم التحديث", resultStats.contactsUpdated],
              ["تخطي (مكرر)", resultStats.contactsSkippedDuplicate],
            ]}
          />
          <StatGroup
            title="مطابقة الخدمات"
            items={[["تم الإنشاء", resultStats.serviceMatchesCreated]]}
          />
          <StatGroup
            title="الصفوف"
            items={[
              ["تمت معالجتها", resultStats.processedRows],
              ["تم تخطيها", resultStats.skippedRows],
              ["فشلت", resultStats.errorsCount],
            ]}
          />
          <div className="rounded-md bg-neutral-50 p-3">
            <p className="font-medium text-neutral-700">ملاحظات</p>
            <ul className="mt-2 space-y-1 text-neutral-600">
              <li>تكرارات محتملة: {resultStats.possibleDuplicates}</li>
              <li>أخطاء: {errorCount}</li>
              {resultStats.durationMs != null ? (
                <li>
                  المدة: {(resultStats.durationMs / 1000).toFixed(1)} ثانية
                </li>
              ) : null}
            </ul>
          </div>
        </div>
      ) : (
        <p className="text-sm text-red-700">
          لم يكتمل الاستيراد. راجع سجل الاستيراد أو حاول مرة أخرى.
        </p>
      )}
    </div>
  );
}

function StatGroup({
  title,
  items,
}: {
  title: string;
  items: [string, number][];
}) {
  return (
    <div className="rounded-md bg-neutral-50 p-3">
      <p className="font-medium text-neutral-800">{title}</p>
      <ul className="mt-2 space-y-1 text-neutral-600">
        {items.map(([label, value]) => (
          <li key={label} className="flex justify-between gap-4">
            <span>{label}</span>
            <span className="font-mono font-medium">{value}</span>
          </li>
        ))}
      </ul>
    </div>
  );
}