import { useMemo, useEffect } from "react";
import AppLayout from "@/Layouts/AppLayout";
import { Head, Link, useForm, router, usePage } from "@inertiajs/react";
import { toast } from "sonner";
import {
Users,
Trash2,
Save,
User,
Key,
Check,
X,
} from "lucide-react";
import { cn } from "@/lib/utils";
import PageHeader from "@/Components/PageHeader";
import { Button } from "@/Components/ui/button";
import { Input } from "@/Components/ui/input";
import { Label } from "@/Components/ui/label";
import { MultiSelect } from "@/Components/ui/multi-select";
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/Components/ui/card";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/Components/ui/select";
import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
AlertDialogTrigger,
} from "@/Components/ui/alert-dialog";
export default function Form({ user, projects = [], groups = [] }) {
const { flash } = usePage().props;
const isEditing = !!user;
useEffect(() => {
if (flash?.success) toast.success(flash.success);
if (flash?.error) toast.error(flash.error);
}, [flash?.success, flash?.error]);
const { data, setData, post, put, processing, errors } = useForm({
name: user?.name ?? "",
email: user?.email ?? "",
password: "",
password_confirmation: "",
status: user?.status ?? "active",
group_ids: user?.group_ids ?? [],
project_ids: user?.project_ids ?? [],
});
const passwordChecks = useMemo(
() => checkPasswordRules(data.password),
[data.password]
);
const passwordValid = Object.values(passwordChecks).every(Boolean);
const passwordsMatch =
data.password.length === 0 ||
data.password === data.password_confirmation;
const passwordOk =
data.password.length === 0 || (passwordValid && passwordsMatch);
// Cobertura dinâmica pelos grupos selecionados
const coveredByGroups = new Set(
data.group_ids.flatMap(
(gid) => groups.find((g) => g.id === gid)?.project_ids ?? []
)
);
const groupOptions = groups.map((g) => ({
value: g.id,
label: g.name,
hint: `${g.project_ids?.length ?? 0} projeto(s)`,
}));
const projectOptions = projects.map((p) => {
const covered = coveredByGroups.has(p.id);
return {
value: p.id,
label: p.name,
disabled: covered,
hint: covered ? "via grupo" : undefined,
};
});
const projectSelectValue = [
...coveredByGroups,
...data.project_ids.filter((p) => !coveredByGroups.has(p)),
];
function onProjectsChange(next) {
setData(
"project_ids",
next.filter((p) => !coveredByGroups.has(p))
);
}
function handleSubmit(e) {
e?.preventDefault();
if (!passwordOk) return;
if (isEditing) {
put(route("usuarios.update", user.id));
} else {
post(route("usuarios.store"));
}
}
function destroyUser() {
router.delete(route("usuarios.destroy", user.id));
}
const totalProjects =
coveredByGroups.size + data.project_ids.length;
// Faixa de identidade (logo abaixo do PageHeader, antes dos cards)
const identityName =
data.name.trim() || (isEditing ? user.name : "Sem nome definido");
const identitySubline = isEditing
? `${data.email || user.email} · acesso a ${totalProjects} projeto${totalProjects === 1 ? "" : "s"}`
: data.email.trim()
? data.email
: "Preencha os dados abaixo para criar o usuário";
const submitDisabled = processing || !passwordOk;
return (
{/* Faixa de identidade */}
);
}
// ── Sub-componentes ─────────────────────────────────────────────────────────
function SectionCard({ title, subtitle, action, children }) {
return (
{title}
{subtitle && {subtitle}}
{action}
{children}
);
}
function Field({ label, hint, error, htmlFor, children }) {
return (
{children}
{error ? (
{error}
) : hint ? (
{hint}
) : null}
);
}
function PasswordInput({ id, value, onChange, placeholder }) {
return (
);
}
function UserAvatar({ name }) {
const initials = computeInitials(name);
const showInitials = initials.length > 0;
return (
{showInitials ? (
{initials}
) : (
)}
);
}
function StatusPill({ status, className }) {
const label =
status === "active"
? "Ativo"
: status === "blocked"
? "Bloqueado"
: "Inativo";
const isActive = status === "active";
const isBlocked = status === "blocked";
return (
{label}
);
}
function GoogleIndicator({ connected }) {
return (
{connected ? "Conectado" : "Não conectado"}
);
}
function GoogleIcon({ className }) {
return (
);
}
function computeInitials(name) {
if (!name) return "";
const parts = name.trim().split(/\s+/).filter(Boolean);
if (parts.length === 0) return "";
if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();
return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
}
function checkPasswordRules(password) {
return {
length: password.length >= 8,
lower: /[a-z]/.test(password),
upper: /[A-Z]/.test(password),
number: /[0-9]/.test(password),
symbol: /[^A-Za-z0-9]/.test(password),
};
}
const RULE_LABELS = {
length: "8+ caracteres",
lower: "letra minúscula",
upper: "letra maiúscula",
number: "número",
symbol: "símbolo",
};
function PasswordStrength({ checks }) {
const passed = Object.values(checks).filter(Boolean).length;
const total = Object.keys(checks).length;
const pct = (passed / total) * 100;
const color =
passed <= 2
? "bg-destructive"
: passed <= 4
? "bg-amber-500"
: "bg-emerald-500";
return (
{Object.entries(checks).map(([key, ok]) => (
-
{ok ? : }
{RULE_LABELS[key]}
))}
);
}