Add CSV import/export for students (Stage 11)

Import wizard (4 steps):
- Upload CSV with UTF-8 or Windows-1251 (iconv-lite) decoding
- Auto-detect columns: Email, Имя, Фамилия, Телефон
- Preview table with per-row status: new / update / error
- Options: auto-verify email, assign course + access days, send welcome email
- Apply: creates users with bcrypt password + Account record, grants enrollments

Export:
- GET /api/admin/export-users with course filter + encoding selection
- UTF-8 with BOM (works in all apps) or Windows-1251 (legacy Excel)
- Fields: Email, Имя, Телефон, Дата регистрации, Курсы, Прогресс

Navigation: added "Импорт / Экспорт" link to admin sidebar

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

package-lock.json

@@ -30,6 +30,7 @@
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "gray-matter": "^4.0.3",
+        "iconv-lite": "^0.7.2",
         "lucide-react": "^1.7.0",
         "next": "16.2.2",
         "next-themes": "^0.4.6",

package.json

@@ -35,6 +35,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "gray-matter": "^4.0.3",
+    "iconv-lite": "^0.7.2",
     "lucide-react": "^1.7.0",
     "next": "16.2.2",
     "next-themes": "^0.4.6",

src/app/admin/import-export/import-actions.ts

@@ -0,0 +1,260 @@
+"use server";
+
+import { headers } from "next/headers";
+import { auth } from "@/lib/auth";
+import { prisma } from "@/lib/prisma";
+import bcrypt from "bcryptjs";
+import iconv from "iconv-lite";
+import { sendWelcomeEmail } from "@/lib/email";
+
+// ── Types ─────────────────────────────────────────────────────────────────────
+
+export type ParsedRow = {
+  index: number;
+  email: string;
+  name: string;
+  lastName: string;
+  phone: string;
+  // resolved during preview
+  status: "new" | "update" | "error";
+  errorMsg?: string;
+  existingId?: string;
+};
+
+export type PreviewResult = {
+  rows: ParsedRow[];
+  countNew: number;
+  countUpdate: number;
+  countError: number;
+};
+
+export type ImportOptions = {
+  updateExisting: boolean;
+  autoVerifyEmail: boolean;
+  courseId?: string;
+  accessDays: number; // 0 = unlimited
+  sendWelcome: boolean;
+  encoding: "utf8" | "win1251";
+};
+
+export type ApplyResult = {
+  created: number;
+  updated: number;
+  errors: string[];
+};
+
+// ── Helpers ───────────────────────────────────────────────────────────────────
+
+function parseCSVLine(line: string): string[] {
+  const result: string[] = [];
+  let current = "";
+  let inQuotes = false;
+
+  for (let i = 0; i < line.length; i++) {
+    const ch = line[i];
+    if (ch === '"') {
+      if (inQuotes && line[i + 1] === '"') {
+        current += '"';
+        i++;
+      } else {
+        inQuotes = !inQuotes;
+      }
+    } else if ((ch === "," || ch === ";") && !inQuotes) {
+      result.push(current.trim());
+      current = "";
+    } else {
+      current += ch;
+    }
+  }
+  result.push(current.trim());
+  return result;
+}
+
+function normalizeHeaders(headers: string[]): Record<string, number> {
+  const map: Record<string, number> = {};
+  const aliases: Record<string, string[]> = {
+    email: ["email", "e-mail", "почта", "login", "логин"],
+    name: ["имя", "name", "firstname", "first_name", "имя пользователя"],
+    lastName: ["фамилия", "lastname", "last_name", "surname"],
+    phone: ["телефон", "phone", "tel", "мобильный"],
+  };
+
+  headers.forEach((h, i) => {
+    const lower = h.toLowerCase().replace(/[^a-zа-яё0-9]/gi, "");
+    for (const [field, aliasList] of Object.entries(aliases)) {
+      if (aliasList.some((a) => lower.includes(a.toLowerCase().replace(/[^a-zа-яё0-9]/gi, "")))) {
+        if (!(field in map)) map[field] = i;
+      }
+    }
+  });
+
+  return map;
+}
+
+async function assertAdmin() {
+  const session = await auth.api.getSession({ headers: await headers() });
+  if (!session || session.user.role !== "admin") throw new Error("Нет доступа");
+  return session;
+}
+
+// ── Parse action ──────────────────────────────────────────────────────────────
+
+export async function parseCSV(
+  base64: string,
+  encoding: "utf8" | "win1251",
+  updateExisting: boolean
+): Promise<PreviewResult> {
+  await assertAdmin();
+
+  // Decode bytes
+  const buffer = Buffer.from(base64, "base64");
+  const text = encoding === "win1251"
+    ? iconv.decode(buffer, "win1251")
+    : buffer.toString("utf8");
+
+  // Split lines (handle \r\n and \n)
+  const lines = text.replace(/\r\n/g, "\n").replace(/\r/g, "\n").split("\n");
+  const nonEmpty = lines.filter((l) => l.trim().length > 0);
+  if (nonEmpty.length < 2) {
+    return { rows: [], countNew: 0, countUpdate: 0, countError: 0 };
+  }
+
+  const headerLine = parseCSVLine(nonEmpty[0]);
+  const colMap = normalizeHeaders(headerLine);
+
+  if (colMap.email === undefined) {
+    throw new Error("Не найдена колонка Email. Проверьте заголовки CSV-файла.");
+  }
+
+  // Load existing emails for fast lookup
+  const existingUsers = await prisma.user.findMany({
+    select: { id: true, email: true },
+  });
+  const existingByEmail = new Map(existingUsers.map((u) => [u.email.toLowerCase(), u.id]));
+
+  const rows: ParsedRow[] = [];
+  let countNew = 0, countUpdate = 0, countError = 0;
+
+  for (let i = 1; i < nonEmpty.length; i++) {
+    const cols = parseCSVLine(nonEmpty[i]);
+    const email = (cols[colMap.email] ?? "").trim().toLowerCase();
+    const name = (cols[colMap.name ?? -1] ?? "").trim();
+    const lastName = (cols[colMap.lastName ?? -1] ?? "").trim();
+    const phone = (cols[colMap.phone ?? -1] ?? "").trim();
+
+    const row: ParsedRow = {
+      index: i,
+      email,
+      name: [name, lastName].filter(Boolean).join(" ") || email.split("@")[0],
+      lastName,
+      phone,
+      status: "new",
+    };
+
+    if (!email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
+      row.status = "error";
+      row.errorMsg = "Некорректный email";
+      countError++;
+    } else if (existingByEmail.has(email)) {
+      row.existingId = existingByEmail.get(email);
+      if (updateExisting) {
+        row.status = "update";
+        countUpdate++;
+      } else {
+        row.status = "error";
+        row.errorMsg = "Уже существует (обновление отключено)";
+        countError++;
+      }
+    } else {
+      row.status = "new";
+      countNew++;
+    }
+
+    rows.push(row);
+  }
+
+  return { rows, countNew, countUpdate, countError };
+}
+
+// ── Apply action ──────────────────────────────────────────────────────────────
+
+export async function applyImport(
+  rows: ParsedRow[],
+  options: ImportOptions
+): Promise<ApplyResult> {
+  await assertAdmin();
+
+  let created = 0, updated = 0;
+  const errors: string[] = [];
+
+  const validRows = rows.filter((r) => r.status !== "error");
+
+  for (const row of validRows) {
+    try {
+      if (row.status === "new") {
+        // Generate a random password
+        const rawPassword = Math.random().toString(36).slice(-10) + "A1!";
+        const hashedPassword = await bcrypt.hash(rawPassword, 10);
+
+        const user = await prisma.user.create({
+          data: {
+            name: row.name,
+            email: row.email,
+            emailVerified: options.autoVerifyEmail,
+            role: "student",
+          },
+        });
+
+        await prisma.account.create({
+          data: {
+            userId: user.id,
+            accountId: user.id,
+            providerId: "credential",
+            password: hashedPassword,
+          },
+        });
+
+        if (options.courseId) {
+          const expiresAt = options.accessDays > 0
+            ? new Date(Date.now() + options.accessDays * 86_400_000)
+            : null;
+          await prisma.courseEnrollment.upsert({
+            where: { userId_courseId: { userId: user.id, courseId: options.courseId } },
+            update: { expiresAt },
+            create: { userId: user.id, courseId: options.courseId, expiresAt },
+          });
+        }
+
+        if (options.sendWelcome) {
+          await sendWelcomeEmail(user.email, user.name).catch(() => {});
+        }
+
+        created++;
+      } else if (row.status === "update" && row.existingId) {
+        await prisma.user.update({
+          where: { id: row.existingId },
+          data: {
+            name: row.name || undefined,
+          },
+        });
+
+        if (options.courseId) {
+          const expiresAt = options.accessDays > 0
+            ? new Date(Date.now() + options.accessDays * 86_400_000)
+            : null;
+          await prisma.courseEnrollment.upsert({
+            where: { userId_courseId: { userId: row.existingId, courseId: options.courseId } },
+            update: { expiresAt },
+            create: { userId: row.existingId, courseId: options.courseId, expiresAt },
+          });
+        }
+
+        updated++;
+      }
+    } catch (e) {
+      errors.push(`${row.email}: ${e instanceof Error ? e.message : "Ошибка"}`);
+    }
+  }
+
+  return { created, updated, errors };
+}

src/app/admin/import-export/page.tsx

@@ -0,0 +1,49 @@
+import { prisma } from "@/lib/prisma";
+import { CsvImporter } from "@/components/admin/csv-importer";
+import { CsvExporter } from "@/components/admin/csv-exporter";
+
+export const metadata = { title: "Импорт и экспорт" };
+
+export default async function ImportExportPage() {
+  const courses = await prisma.course.findMany({
+    orderBy: { title: "asc" },
+    select: { id: true, title: true },
+  });
+
+  return (
+    <div className="p-8 max-w-3xl">
+      <div className="mb-8">
+        <h1
+          className="text-xs font-bold uppercase tracking-widest"
+          style={{ color: "var(--muted-foreground)" }}
+        >
+          Импорт и экспорт
+        </h1>
+      </div>
+
+      <div className="space-y-6">
+        {/* Import */}
+        <div className="card-aubade p-6">
+          <p
+            className="text-xs font-bold uppercase tracking-widest mb-5"
+            style={{ color: "var(--muted-foreground)" }}
+          >
+            Импорт учеников из CSV
+          </p>
+          <CsvImporter courses={courses} />
+        </div>
+
+        {/* Export */}
+        <div className="card-aubade p-6">
+          <p
+            className="text-xs font-bold uppercase tracking-widest mb-5"
+            style={{ color: "var(--muted-foreground)" }}
+          >
+            Экспорт учеников в CSV
+          </p>
+          <CsvExporter courses={courses} />
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/api/admin/export-users/route.ts

@@ -0,0 +1,64 @@
+import { NextRequest, NextResponse } from "next/server";
+import { headers } from "next/headers";
+import { auth } from "@/lib/auth";
+import { prisma } from "@/lib/prisma";
+import iconv from "iconv-lite";
+
+export async function GET(request: NextRequest) {
+  const session = await auth.api.getSession({ headers: await headers() });
+  if (!session || session.user.role !== "admin") {
+    return NextResponse.json({ error: "Нет доступа" }, { status: 403 });
+  }
+
+  const { searchParams } = request.nextUrl;
+  const courseId = searchParams.get("courseId") || undefined;
+  const encoding = (searchParams.get("encoding") as "utf8" | "win1251") ?? "utf8";
+
+  // Fetch users
+  const users = await prisma.user.findMany({
+    where: courseId
+      ? { enrollments: { some: { courseId } } }
+      : { role: "student" },
+    orderBy: { createdAt: "desc" },
+    include: {
+      enrollments: {
+        include: { course: { select: { title: true } } },
+      },
+      progress: { select: { lessonId: true } },
+    },
+  });
+
+  // Build CSV rows
+  const csvHeaders = ["Email", "Имя", "Телефон", "Дата регистрации", "Курсы", "Прогресс (уроков)"];
+  const rows = users.map((u) => {
+    const courses = u.enrollments.map((e) => e.course.title).join(" | ");
+    const progress = u.progress.length;
+    const registeredAt = new Date(u.createdAt).toLocaleDateString("ru-RU");
+    return [u.email, u.name, "", registeredAt, courses, String(progress)];
+  });
+
+  const allRows = [csvHeaders, ...rows];
+  const csvText = allRows
+    .map((row) => row.map((cell) => `"${String(cell).replace(/"/g, '""')}"`).join(";"))
+    .join("\r\n");
+
+  // Encode
+  let body: Buffer;
+  let charset: string;
+  if (encoding === "win1251") {
+    body = iconv.encode(csvText, "win1251");
+    charset = "windows-1251";
+  } else {
+    body = Buffer.from("\uFEFF" + csvText, "utf8"); // BOM for Excel
+    charset = "utf-8";
+  }
+
+  const filename = `students_${new Date().toISOString().slice(0, 10)}.csv`;
+
+  return new NextResponse(body as unknown as BodyInit, {
+    headers: {
+      "Content-Type": `text/csv; charset=${charset}`,
+      "Content-Disposition": `attachment; filename="${filename}"`,
+    },
+  });
+}

src/components/admin/admin-nav.tsx

@@ -9,6 +9,7 @@ const links = [
   { href: "/admin/categories", label: "Категории" },
   { href: "/admin/users", label: "Пользователи" },
   { href: "/curator/homework", label: "ДЗ на проверку" },
+  { href: "/admin/import-export", label: "Импорт / Экспорт" },
   { href: "/admin/settings", label: "Настройки" },
 ];
 

src/components/admin/csv-exporter.tsx

@@ -0,0 +1,91 @@
+"use client";
+
+import { useState } from "react";
+import { Download } from "lucide-react";
+
+type Course = { id: string; title: string };
+
+const inputStyle: React.CSSProperties = {
+  border: "2px solid var(--border)",
+  background: "var(--background)",
+  outline: "none",
+  width: "100%",
+  padding: "0.5rem 0.75rem",
+  fontSize: "0.875rem",
+  fontFamily: "inherit",
+};
+const focusHandlers = {
+  onFocus: (e: React.FocusEvent<HTMLSelectElement>) =>
+    (e.currentTarget.style.borderColor = "var(--foreground)"),
+  onBlur: (e: React.FocusEvent<HTMLSelectElement>) =>
+    (e.currentTarget.style.borderColor = "var(--border)"),
+};
+
+export function CsvExporter({ courses }: { courses: Course[] }) {
+  const [courseId, setCourseId] = useState("");
+  const [encoding, setEncoding] = useState<"utf8" | "win1251">("utf8");
+  const [loading, setLoading] = useState(false);
+
+  async function handleExport() {
+    setLoading(true);
+    try {
+      const params = new URLSearchParams({ encoding });
+      if (courseId) params.set("courseId", courseId);
+
+      const res = await fetch(`/api/admin/export-users?${params}`);
+      if (!res.ok) throw new Error("Ошибка сервера");
+
+      const blob = await res.blob();
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      const cd = res.headers.get("content-disposition") ?? "";
+      const match = cd.match(/filename="([^"]+)"/);
+      a.download = match?.[1] ?? "students.csv";
+      a.click();
+      URL.revokeObjectURL(url);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <div className="space-y-5 max-w-md">
+      <div className="space-y-1.5">
+        <label className="text-xs font-bold uppercase tracking-widest" style={{ color: "var(--muted-foreground)" }}>
+          Фильтр по курсу
+        </label>
+        <select value={courseId} onChange={(e) => setCourseId(e.target.value)} style={{ ...inputStyle, appearance: "none" }} {...focusHandlers}>
+          <option value="">Все ученики</option>
+          {courses.map((c) => <option key={c.id} value={c.id}>{c.title}</option>)}
+        </select>
+      </div>
+
+      <div className="space-y-1.5">
+        <label className="text-xs font-bold uppercase tracking-widest" style={{ color: "var(--muted-foreground)" }}>
+          Кодировка файла
+        </label>
+        <select value={encoding} onChange={(e) => setEncoding(e.target.value as "utf8" | "win1251")} style={{ ...inputStyle, appearance: "none" }} {...focusHandlers}>
+          <option value="utf8">UTF-8 (универсальная)</option>
+          <option value="win1251">Windows-1251 (для Excel на Windows)</option>
+        </select>
+      </div>
+
+      <div className="p-4 space-y-1" style={{ border: "2px solid var(--border)" }}>
+        <p className="text-xs font-bold uppercase tracking-widest" style={{ color: "var(--muted-foreground)" }}>Поля в файле</p>
+        <p className="text-sm">Email · Имя · Телефон · Дата регистрации · Курсы · Прогресс (уроков)</p>
+      </div>
+
+      <button
+        type="button"
+        onClick={handleExport}
+        disabled={loading}
+        className="btn-aubade btn-aubade-accent flex items-center gap-2 px-5 py-2 text-sm"
+        style={{ opacity: loading ? 0.6 : 1 }}
+      >
+        <Download size={14} />
+        {loading ? "Формирую файл..." : "Скачать CSV"}
+      </button>
+    </div>
+  );
+}

src/components/admin/csv-importer.tsx

@@ -0,0 +1,384 @@
+"use client";
+
+import { useState, useTransition, useRef } from "react";
+import { Upload, FileText, CheckCircle, AlertCircle, Loader } from "lucide-react";
+import {
+  parseCSV,
+  applyImport,
+  type PreviewResult,
+  type ImportOptions,
+  type ApplyResult,
+} from "@/app/admin/import-export/import-actions";
+
+type Course = { id: string; title: string };
+
+const inputStyle: React.CSSProperties = {
+  border: "2px solid var(--border)",
+  background: "var(--background)",
+  outline: "none",
+  width: "100%",
+  padding: "0.5rem 0.75rem",
+  fontSize: "0.875rem",
+  fontFamily: "inherit",
+};
+const focusHandlers = {
+  onFocus: (e: React.FocusEvent<HTMLInputElement | HTMLSelectElement>) =>
+    (e.currentTarget.style.borderColor = "var(--foreground)"),
+  onBlur: (e: React.FocusEvent<HTMLInputElement | HTMLSelectElement>) =>
+    (e.currentTarget.style.borderColor = "var(--border)"),
+};
+
+function Toggle({ label, hint, checked, onChange }: { label: string; hint?: string; checked: boolean; onChange: (v: boolean) => void }) {
+  return (
+    <div className="flex items-start gap-3">
+      <button type="button" onClick={() => onChange(!checked)} className="mt-0.5 shrink-0">
+        <span className="relative inline-block w-10 h-6" style={{ background: checked ? "var(--accent)" : "var(--border)", border: "2px solid var(--foreground)" }}>
+          <span className="absolute top-0.5 w-4 h-4 transition-transform" style={{ background: "var(--foreground)", left: "2px", transform: checked ? "translateX(16px)" : "translateX(0)" }} />
+        </span>
+      </button>
+      <div>
+        <p className="text-sm font-medium">{label}</p>
+        {hint && <p className="text-xs mt-0.5" style={{ color: "var(--muted-foreground)" }}>{hint}</p>}
+      </div>
+    </div>
+  );
+}
+
+function StepIndicator({ step }: { step: number }) {
+  const steps = ["Загрузка", "Предпросмотр", "Опции", "Готово"];
+  return (
+    <div className="flex items-center gap-0 mb-6">
+      {steps.map((label, i) => {
+        const num = i + 1;
+        const active = num === step;
+        const done = num < step;
+        return (
+          <div key={num} className="flex items-center">
+            <div className="flex flex-col items-center gap-1">
+              <div
+                className="w-7 h-7 flex items-center justify-center text-xs font-bold"
+                style={{
+                  border: "2px solid var(--foreground)",
+                  background: done || active ? "var(--foreground)" : "transparent",
+                  color: done || active ? "var(--background)" : "var(--foreground)",
+                }}
+              >
+                {done ? "✓" : num}
+              </div>
+              <span className="text-xs" style={{ color: active ? "var(--foreground)" : "var(--muted-foreground)", fontWeight: active ? 700 : 400 }}>
+                {label}
+              </span>
+            </div>
+            {i < steps.length - 1 && (
+              <div className="w-12 h-0.5 mx-1 mb-5" style={{ background: done ? "var(--foreground)" : "var(--border)" }} />
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+// ── Main component ────────────────────────────────────────────────────────────
+
+export function CsvImporter({ courses }: { courses: Course[] }) {
+  const [step, setStep] = useState(1);
+  const [pending, startTransition] = useTransition();
+  const [error, setError] = useState<string | null>(null);
+  const fileRef = useRef<HTMLInputElement>(null);
+
+  // Step 1 state
+  const [encoding, setEncoding] = useState<"utf8" | "win1251">("utf8");
+  const [updateExisting, setUpdateExisting] = useState(false);
+  const [fileBase64, setFileBase64] = useState<string | null>(null);
+  const [fileName, setFileName] = useState<string | null>(null);
+
+  // Step 2 state
+  const [preview, setPreview] = useState<PreviewResult | null>(null);
+
+  // Step 3 state
+  const [autoVerifyEmail, setAutoVerifyEmail] = useState(true);
+  const [courseId, setCourseId] = useState("");
+  const [accessDays, setAccessDays] = useState("0");
+  const [sendWelcome, setSendWelcome] = useState(false);
+
+  // Step 4 state
+  const [result, setResult] = useState<ApplyResult | null>(null);
+
+  function handleFileChange(e: React.ChangeEvent<HTMLInputElement>) {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    setFileName(file.name);
+    const reader = new FileReader();
+    reader.onload = () => {
+      const ab = reader.result as ArrayBuffer;
+      const bytes = new Uint8Array(ab);
+      let binary = "";
+      bytes.forEach((b) => (binary += String.fromCharCode(b)));
+      setFileBase64(btoa(binary));
+    };
+    reader.readAsArrayBuffer(file);
+  }
+
+  function handleParse() {
+    if (!fileBase64) return;
+    setError(null);
+    startTransition(async () => {
+      try {
+        const result = await parseCSV(fileBase64, encoding, updateExisting);
+        setPreview(result);
+        setStep(2);
+      } catch (e) {
+        setError(e instanceof Error ? e.message : "Ошибка разбора файла");
+      }
+    });
+  }
+
+  function handleApply() {
+    if (!preview) return;
+    setError(null);
+    const options: ImportOptions = {
+      updateExisting,
+      autoVerifyEmail,
+      courseId: courseId || undefined,
+      accessDays: parseInt(accessDays) || 0,
+      sendWelcome,
+      encoding,
+    };
+    startTransition(async () => {
+      try {
+        const r = await applyImport(preview.rows, options);
+        setResult(r);
+        setStep(4);
+      } catch (e) {
+        setError(e instanceof Error ? e.message : "Ошибка импорта");
+      }
+    });
+  }
+
+  function handleReset() {
+    setStep(1);
+    setFileBase64(null);
+    setFileName(null);
+    setPreview(null);
+    setResult(null);
+    setError(null);
+    if (fileRef.current) fileRef.current.value = "";
+  }
+
+  return (
+    <div>
+      <StepIndicator step={step} />
+
+      {/* ── Step 1: Upload ── */}
+      {step === 1 && (
+        <div className="space-y-5">
+          {/* File picker */}
+          <div
+            className="flex flex-col items-center justify-center gap-3 p-8 cursor-pointer"
+            style={{ border: "2px dashed var(--border)" }}
+            onClick={() => fileRef.current?.click()}
+          >
+            <Upload size={28} style={{ color: "var(--muted-foreground)" }} />
+            {fileName ? (
+              <div className="text-center">
+                <p className="font-medium flex items-center gap-1.5">
+                  <FileText size={15} /> {fileName}
+                </p>
+                <p className="text-xs mt-0.5" style={{ color: "var(--muted-foreground)" }}>Нажмите чтобы выбрать другой файл</p>
+              </div>
+            ) : (
+              <div className="text-center">
+                <p className="font-medium">Выберите CSV-файл</p>
+                <p className="text-xs mt-0.5" style={{ color: "var(--muted-foreground)" }}>Поддерживаются файлы из emdesell, Excel и любого табличного редактора</p>
+              </div>
+            )}
+            <input ref={fileRef} type="file" accept=".csv,text/csv" className="hidden" onChange={handleFileChange} />
+          </div>
+
+          {/* Options */}
+          <div className="grid grid-cols-2 gap-4">
+            <div className="space-y-1.5">
+              <label className="text-xs font-bold uppercase tracking-widest" style={{ color: "var(--muted-foreground)" }}>Кодировка</label>
+              <select value={encoding} onChange={(e) => setEncoding(e.target.value as "utf8" | "win1251")} style={{ ...inputStyle, appearance: "none" }} {...focusHandlers}>
+                <option value="utf8">UTF-8 (стандарт)</option>
+                <option value="win1251">Windows-1251 (Excel)</option>
+              </select>
+            </div>
+            <div className="flex items-end pb-0.5">
+              <Toggle
+                label="Обновлять существующих"
+                hint="Если пользователь уже есть — обновить данные"
+                checked={updateExisting}
+                onChange={setUpdateExisting}
+              />
+            </div>
+          </div>
+
+          {/* Template download hint */}
+          <p className="text-xs" style={{ color: "var(--muted-foreground)" }}>
+            Ожидаемые колонки: <span className="font-mono">Email</span>, <span className="font-mono">Имя</span>, <span className="font-mono">Фамилия</span>, <span className="font-mono">Телефон</span> (порядок не важен, первая строка — заголовки).
+          </p>
+
+          {error && <p className="text-sm p-3" style={{ border: "2px solid oklch(0.577 0.245 27.325)", color: "oklch(0.577 0.245 27.325)" }}>{error}</p>}
+
+          <button
+            type="button"
+            disabled={!fileBase64 || pending}
+            onClick={handleParse}
+            className="btn-aubade btn-aubade-accent px-5 py-2 text-sm flex items-center gap-2"
+            style={{ opacity: !fileBase64 || pending ? 0.5 : 1 }}
+          >
+            {pending ? <><Loader size={14} className="animate-spin" /> Разбираю...</> : "Далее →"}
+          </button>
+        </div>
+      )}
+
+      {/* ── Step 2: Preview ── */}
+      {step === 2 && preview && (
+        <div className="space-y-4">
+          {/* Stats */}
+          <div className="grid grid-cols-3 gap-3">
+            {[
+              { label: "Будет создано", count: preview.countNew, color: "#3A6A3A" },
+              { label: "Будет обновлено", count: preview.countUpdate, color: "var(--foreground)" },
+              { label: "Ошибок", count: preview.countError, color: "oklch(0.577 0.245 27.325)" },
+            ].map(({ label, count, color }) => (
+              <div key={label} className="card-aubade p-4 text-center">
+                <p className="text-2xl font-bold" style={{ color }}>{count}</p>
+                <p className="text-xs mt-0.5" style={{ color: "var(--muted-foreground)" }}>{label}</p>
+              </div>
+            ))}
+          </div>
+
+          {/* Table */}
+          <div className="overflow-auto max-h-72" style={{ border: "2px solid var(--border)" }}>
+            <table className="w-full text-sm">
+              <thead>
+                <tr style={{ borderBottom: "2px solid var(--border)", background: "var(--background)" }}>
+                  {["#", "Email", "Имя", "Телефон", "Статус"].map((h) => (
+                    <th key={h} className="text-left px-3 py-2 text-xs font-bold uppercase tracking-widest" style={{ color: "var(--muted-foreground)" }}>{h}</th>
+                  ))}
+                </tr>
+              </thead>
+              <tbody>
+                {preview.rows.map((row) => (
+                  <tr key={row.index} style={{ borderBottom: "1px solid var(--border)" }}>
+                    <td className="px-3 py-1.5 text-xs" style={{ color: "var(--muted-foreground)" }}>{row.index}</td>
+                    <td className="px-3 py-1.5 font-mono text-xs">{row.email}</td>
+                    <td className="px-3 py-1.5 text-xs">{row.name}</td>
+                    <td className="px-3 py-1.5 text-xs">{row.phone || "—"}</td>
+                    <td className="px-3 py-1.5">
+                      {row.status === "new" && <span className="text-xs font-bold" style={{ color: "#3A6A3A" }}>✦ Новый</span>}
+                      {row.status === "update" && <span className="text-xs font-bold">↻ Обновить</span>}
+                      {row.status === "error" && (
+                        <span className="text-xs font-bold flex items-center gap-1" style={{ color: "oklch(0.577 0.245 27.325)" }}>
+                          <AlertCircle size={12} /> {row.errorMsg}
+                        </span>
+                      )}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+
+          <div className="flex gap-3">
+            <button type="button" onClick={() => setStep(3)} disabled={preview.countNew + preview.countUpdate === 0}
+              className="btn-aubade btn-aubade-accent px-5 py-2 text-sm"
+              style={{ opacity: preview.countNew + preview.countUpdate === 0 ? 0.4 : 1 }}>
+              Далее →
+            </button>
+            <button type="button" onClick={handleReset} className="btn-aubade px-4 py-2 text-sm">← Назад</button>
+          </div>
+        </div>
+      )}
+
+      {/* ── Step 3: Options ── */}
+      {step === 3 && (
+        <div className="space-y-5 max-w-md">
+          <Toggle
+            label="Подтвердить email автоматически"
+            hint="Пользователи смогут войти сразу, без подтверждения почты."
+            checked={autoVerifyEmail}
+            onChange={setAutoVerifyEmail}
+          />
+
+          <div className="space-y-1.5">
+            <label className="text-xs font-bold uppercase tracking-widest" style={{ color: "var(--muted-foreground)" }}>Курс для доступа</label>
+            <select value={courseId} onChange={(e) => setCourseId(e.target.value)} style={{ ...inputStyle, appearance: "none" }} {...focusHandlers}>
+              <option value="">— Не присваивать —</option>
+              {courses.map((c) => <option key={c.id} value={c.id}>{c.title}</option>)}
+            </select>
+          </div>
+
+          {courseId && (
+            <div className="space-y-1.5">
+              <label className="text-xs font-bold uppercase tracking-widest" style={{ color: "var(--muted-foreground)" }}>Срок доступа (дней)</label>
+              <input
+                type="number"
+                min="0"
+                value={accessDays}
+                onChange={(e) => setAccessDays(e.target.value)}
+                placeholder="0 — бессрочно"
+                style={inputStyle}
+                {...focusHandlers}
+              />
+              <p className="text-xs" style={{ color: "var(--muted-foreground)" }}>0 = бессрочный доступ</p>
+            </div>
+          )}
+
+          <Toggle
+            label="Отправить приветственное письмо"
+            hint="Письмо будет отправлено каждому новому пользователю."
+            checked={sendWelcome}
+            onChange={setSendWelcome}
+          />
+
+          {error && <p className="text-sm p-3" style={{ border: "2px solid oklch(0.577 0.245 27.325)", color: "oklch(0.577 0.245 27.325)" }}>{error}</p>}
+
+          <div className="flex gap-3 pt-2">
+            <button type="button" onClick={handleApply} disabled={pending}
+              className="btn-aubade btn-aubade-accent px-5 py-2 text-sm flex items-center gap-2"
+              style={{ opacity: pending ? 0.5 : 1 }}>
+              {pending ? <><Loader size={14} className="animate-spin" /> Импортирую...</> : "Применить импорт"}
+            </button>
+            <button type="button" onClick={() => setStep(2)} className="btn-aubade px-4 py-2 text-sm">← Назад</button>
+          </div>
+        </div>
+      )}
+
+      {/* ── Step 4: Result ── */}
+      {step === 4 && result && (
+        <div className="space-y-5">
+          <div className="flex items-center gap-3 p-5" style={{ border: "2px solid #3A6A3A" }}>
+            <CheckCircle size={24} style={{ color: "#3A6A3A", flexShrink: 0 }} />
+            <div>
+              <p className="font-bold">Импорт завершён</p>
+              <p className="text-sm mt-0.5" style={{ color: "var(--muted-foreground)" }}>
+                Создано: <strong>{result.created}</strong> · Обновлено: <strong>{result.updated}</strong>
+              </p>
+            </div>
+          </div>
+
+          {result.errors.length > 0 && (
+            <div className="space-y-1">
+              <p className="text-xs font-bold uppercase tracking-widest" style={{ color: "oklch(0.577 0.245 27.325)" }}>
+                Ошибки ({result.errors.length})
+              </p>
+              <div className="max-h-40 overflow-y-auto space-y-1">
+                {result.errors.map((e, i) => (
+                  <p key={i} className="text-xs font-mono p-2" style={{ border: "1px solid oklch(0.577 0.245 27.325)", color: "oklch(0.577 0.245 27.325)" }}>{e}</p>
+                ))}
+              </div>
+            </div>
+          )}
+
+          <button type="button" onClick={handleReset} className="btn-aubade px-4 py-2 text-sm">
+            Импортировать ещё
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}