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>

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>
+  );
+}