"use client";

import { FormEvent, useState } from "react";
import { useRouter } from "next/navigation";

export function UserImportForm() {
  const router = useRouter();
  const [message, setMessage] = useState("");
  const [preview, setPreview] = useState<{ rows: ReturnType<typeof parseRows>; errors: string[] }>({ rows: [], errors: [] });

  function parseRows(value: string) {
    const lines = value.split("\n").map((line) => line.trim()).filter(Boolean);
    const header = lines[0]?.toLowerCase().startsWith("name,email") ? lines.shift() : "";
    const headers = (header || "name,email,team,roles,projects,status").split(",").map((item) => item.trim().toLowerCase());
    return lines.map((line, index) => {
      const values = line.split(",").map((item) => item.trim());
      const record = Object.fromEntries(headers.map((key, valueIndex) => [key, values[valueIndex] ?? ""]));
      const splitNames = (item: string) => item.split(";").map((part) => part.trim()).filter(Boolean);
      return {
        sourceRow: index + 1,
        name: record.name,
        email: record.email,
        teamName: record.team || record.teamname || null,
        roleNames: splitNames(record.roles || record.rolenames || ""),
        projectNames: splitNames(record.projects || record.projectnames || ""),
        status: record.status === "active" ? "active" : "inactive",
        roleIds: [],
        projectIds: []
      };
    });
  }

  function updatePreview(value: string) {
    const rows = parseRows(value);
    const errors = rows.flatMap((row) => {
      const rowErrors = [];
      if (!row.name) rowErrors.push(`Row ${row.sourceRow}: missing name`);
      if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(row.email)) rowErrors.push(`Row ${row.sourceRow}: invalid email`);
      return rowErrors;
    });
    setPreview({ rows, errors });
  }

  async function submit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    const form = new FormData(event.currentTarget);
    const rows = parseRows(String(form.get("users") ?? "")).filter((row) => row.name && row.email);
    const response = await fetch("/api/users/import", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ rows })
    });
    const payload = await response.json().catch(() => ({}));
    setMessage(response.ok
      ? `Imported ${payload.created ?? 0} user${payload.created === 1 ? "" : "s"}. ${payload.skipped ?? 0} skipped.`
      : payload.rowErrors?.length
        ? payload.rowErrors.map((item: { row: number; error: string }) => `Row ${item.row}: ${item.error}`).join(" ")
        : payload.error ?? "Import failed.");
    if (response.ok) {
      event.currentTarget.reset();
      router.refresh();
    }
  }

  return (
    <form className="grid gap-3 rounded-lg border border-brand-secondary/20 bg-white p-5 shadow-sm" onSubmit={submit}>
      <div className="flex items-center justify-between gap-3">
        <h2 className="text-lg font-semibold">Bulk import</h2>
        <a className="text-xs font-semibold text-brand-secondary" href="/api/users/import/template">Download template</a>
      </div>
      <textarea className="min-h-36 rounded-lg border border-slate-300 px-3 py-2 text-sm" name="users" onChange={(event) => updatePreview(event.target.value)} placeholder="name,email,team,roles,projects,status&#10;Priya Shah,priya@example.com,Design,Manager;Employee,Default Project,active" />
      <p className="text-xs text-slate-500">Use semicolons for multiple roles or projects. Imported users without an active status stay inactive until password setup.</p>
      {preview.rows.length ? (
        <div className="rounded-lg bg-slate-50 p-3 text-xs text-slate-600">
          <p className="font-semibold">{preview.rows.length} row{preview.rows.length === 1 ? "" : "s"} ready for import</p>
          {preview.errors.length ? <p className="mt-2 text-red-600">{preview.errors.join(" ")}</p> : null}
        </div>
      ) : null}
      <button className="brand-button-secondary" type="submit">Import users</button>
      {message ? <p className="text-sm text-brand-secondary">{message}</p> : null}
    </form>
  );
}