Action row

import {
	ActionList,
	ActionListItem,
	ImpactValue,
} from "@moodinary/ui/components/action-list";
import { Button } from "@moodinary/ui/components/button";
import { ConfirmDialog } from "@moodinary/ui/components/confirm-dialog";
import {
	DropdownMenu,
	DropdownMenuContent,
	DropdownMenuItem,
	DropdownMenuTrigger,
} from "@moodinary/ui/components/dropdown-menu";
import { MoreHorizontalIcon } from "@moodinary/ui/components/icons";
import { useState } from "react";

/*
 * Igual que ActionRow en apps/pulses/.../action-plan-widget.tsx: "Vence"/"Cerrada", detalle con
 * descripción o antes → después, menú Finalizar y medir / Cancelar solo en activas. Sin red.
 */
function actionDetail(
	status: "active" | "done" | "cancelled",
	done: boolean
): string | null {
	if (status === "cancelled") {
		return "Cancelada · no se mide su impacto";
	}
	return done ? null : "Ronda corta en tutoría para hablar de cómo llegan.";
}

export default function ActionRowList() {
	const [status, setStatus] = useState<"active" | "done" | "cancelled">(
		"active"
	);
	const [confirm, setConfirm] = useState<"done" | "cancel" | null>(null);
	const done = status !== "active";
	const title = "Charla con 5.º B sobre la semana de pruebas";
	return (
		<>
			<ActionList className="w-full">
				<ActionListItem
					actions={
						done ? null : (
							<DropdownMenu>
								<DropdownMenuTrigger
									render={
										<Button
											aria-label={`Opciones de ${title}`}
											size="icon-sm"
											variant="ghost"
										/>
									}
								>
									<MoreHorizontalIcon />
								</DropdownMenuTrigger>
								<DropdownMenuContent align="end">
									<DropdownMenuItem onClick={() => setConfirm("done")}>
										Finalizar y medir
									</DropdownMenuItem>
									<DropdownMenuItem onClick={() => setConfirm("cancel")}>
										Cancelar
									</DropdownMenuItem>
								</DropdownMenuContent>
							</DropdownMenu>
						)
					}
					checkLabel={`Marcar como finalizada: ${title}`}
					date={done ? "Cerrada mar 6 oct" : "Vence jue 8 oct"}
					detail={actionDetail(status, done)}
					done={done}
					impact={
						done ? null : <ImpactValue className="max-sm:hidden" value={null} />
					}
					note={
						status === "done"
							? "Todavía no hay datos suficientes para medir: 4 pulsos antes y 3 después (hacen falta 10 en cada período)."
							: null
					}
					onCheck={done ? undefined : () => setConfirm("done")}
					team="5.º B"
					title={title}
				/>
				<ActionListItem
					checkLabel="Marcar como finalizada: Recreo extendido los viernes"
					date="Cerrada vie 11 sep"
					detail="3,0 → 3,6 en 2 semanas"
					done
					impact={<ImpactValue value={0.6} />}
					team="4.º A"
					title="Recreo extendido los viernes"
				/>
				<ActionListItem
					checkLabel="Marcar como finalizada: Reordenar turnos de guardia"
					date="Cerrada sáb 5 sep"
					detail="Cancelada · no se mide su impacto"
					done
					team="Operaciones"
					title="Reordenar turnos de guardia"
				/>
			</ActionList>
			<ConfirmDialog
				confirmLabel={confirm === "done" ? "Finalizar" : "Cancelar acción"}
				confirmVariant={confirm === "done" ? "primary" : "danger"}
				description={
					confirm === "done"
						? `«${title}». Vamos a marcarla como terminada y a medir su impacto comparando el clima de antes y después.`
						: `«${title}». Va a quedar registrada como cancelada y no se va a medir su impacto.`
				}
				onConfirm={() => {
					setStatus(confirm === "done" ? "done" : "cancelled");
					setConfirm(null);
				}}
				onOpenChange={(open) => {
					if (!open) {
						setConfirm(null);
					}
				}}
				open={confirm !== null}
				pendingLabel="Guardando…"
				title={
					confirm === "done"
						? "¿Finalizar esta acción?"
						: "¿Cancelar esta acción?"
				}
			/>
		</>
	);
}

import { RailCard } from "@moodinary/ui/components/rail-card";
import { ActionRow } from "@moodinary/ui/components/rail-row";

/* Igual que OpenActions en apps/pulses/.../inicio-rail.tsx: hasta 3 acciones abiertas, meta = fecha de cierre. */
const fmt = (d: string) =>
	new Date(`${d}T12:00:00`).toLocaleDateString("es-AR", {
		day: "numeric",
		month: "short",
		weekday: "short",
	});

export default function ActionRowCompact() {
	return (
		<RailCard
			action={<a href="#acciones">Ver todas →</a>}
			className="w-[340px] max-w-full"
			title="Acciones abiertas"
		>
			<ul className="m-0 grid list-none gap-2.5 p-0 text-sm">
				<ActionRow
					meta={fmt("2026-10-08")}
					title="Charla con 5.º B sobre la semana de pruebas"
				/>
				<ActionRow
					meta={fmt("2026-10-15")}
					title="Revisar la carga de Atención al cliente"
				/>
				<ActionRow title="Reunión con familias de 2.º B" />
			</ul>
		</RailCard>
	);
}