import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Loader2 } from "lucide-react";
import { Input } from "../../components/ui/input";
import { CountBadge } from "../../components/ui/badge";
export function CreateReviewConfirmStep({ title, setTitle, isGeneratingTitle, languageSummary, reviewers, items, requiredApprovals, updateWorkflowOnCompletion, expirationDays, showSecretFields, }) {
    const reviewTitle = title || "Untitled Review";
    const reviewerName = reviewers[0]?.name || reviewers[0]?.email || "Reviewer";
    const itemNamesPreview = items
        .slice(0, 3)
        .map((item) => item.descriptor.displayName ||
        item.descriptor.name ||
        item.descriptor.path ||
        item.descriptor.id)
        .join(", ");
    const additionalItemsCount = Math.max(items.length - 3, 0);
    const itemSummary = items.length === 0
        ? "No items selected."
        : additionalItemsCount > 0
            ? `${itemNamesPreview}, and ${additionalItemsCount} more.`
            : itemNamesPreview;
    const emailSubject = `Review Invitation: ${reviewTitle}`;
    const emailBody = `Hi ${reviewerName},

You have been invited to review: ${reviewTitle}

Languages: ${languageSummary}
Items: ${itemSummary}

Please open your invitation link to start reviewing:
[Invitation Link]

Thank you.`;
    return (_jsxs("div", { className: "grid gap-6 p-4 md:grid-cols-2 md:gap-x-10 md:p-6", children: [_jsxs("div", { className: "flex flex-col gap-4", children: [_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsxs("p", { className: "text-neutral-grey-50 text-xs font-medium tracking-wider", children: ["Review Name", _jsx("span", { className: "text-muted-foreground ml-1 text-[11px] font-normal normal-case", children: "(optional)" })] }), _jsx(Input, { id: "title", "data-testid": "review-title-input", value: title, onChange: (e) => setTitle(e.target.value), placeholder: "e.g., Homepage Q4 Review", className: "bg-white" }), isGeneratingTitle && (_jsxs("div", { className: "text-muted-foreground flex items-center gap-2 text-xs", children: [_jsx(Loader2, { strokeWidth: 1, className: "h-3 w-3 animate-spin" }), "Generating suggested name..."] }))] }), _jsx("div", { className: "border-border-default border-t" }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx("p", { className: "text-neutral-grey-50 text-xs font-medium tracking-wider", children: "Languages" }), _jsx("p", { className: "text-neutral-grey-100 text-sm font-medium", children: languageSummary })] }), _jsx("div", { className: "border-border-default border-t" }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("p", { className: "text-neutral-grey-50 text-xs font-medium tracking-wider", children: "Reviewers" }), _jsx(CountBadge, { children: reviewers.length })] }), _jsx("div", { className: "flex flex-wrap gap-1.5", children: reviewers.map((reviewer) => (_jsxs("span", { className: "border-border-default bg-neutral-grey-5 text-neutral-grey-100 rounded-full border px-2.5 py-0.5 text-xs", children: [reviewer.name || reviewer.email, " (", reviewer.email, ")"] }, reviewer.email))) })] }), _jsx("div", { className: "border-border-default border-t" }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx("p", { className: "text-neutral-grey-50 text-xs font-medium tracking-wider", children: "Settings" }), _jsxs("div", { className: "text-neutral-grey-100 grid gap-x-4 gap-y-1 text-xs sm:grid-cols-2", children: [_jsxs("p", { children: ["Required approvals:", " ", _jsx("span", { className: "text-neutral-grey-100 font-medium", children: requiredApprovals || "1" })] }), _jsxs("p", { children: ["Update workflow:", " ", _jsx("span", { className: "text-neutral-grey-100 font-medium", children: updateWorkflowOnCompletion ? "Yes" : "No" })] }), _jsxs("p", { children: ["Expiration:", " ", _jsx("span", { className: "text-neutral-grey-100 font-medium", children: expirationDays ? `${expirationDays} day(s)` : "None" })] }), _jsxs("p", { children: ["Secret required:", " ", _jsx("span", { className: "text-neutral-grey-100 font-medium", children: showSecretFields ? "Yes" : "No" })] })] })] }), _jsx("div", { className: "border-border-default border-t" }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("p", { className: "text-neutral-grey-50 text-xs font-medium tracking-wider", children: "Pages & Items" }), _jsx(CountBadge, { children: items.length })] }), _jsx("div", { className: "divide-border-default max-h-40 divide-y overflow-y-auto", children: items.map((item, index) => (_jsxs("div", { className: "flex items-baseline gap-2 py-1.5 text-xs first:pt-0 last:pb-0", children: [_jsx("p", { className: "text-neutral-grey-100 shrink-0 font-medium", children: item.descriptor.displayName ||
                                                item.descriptor.name ||
                                                item.descriptor.path ||
                                                item.descriptor.id }), item.includeSubitems && (_jsx("span", { className: "text-primary shrink-0 font-medium", children: "Includes subitems" })), item.descriptor.path && (_jsx("p", { className: "text-muted-foreground min-w-0 truncate", children: item.descriptor.path }))] }, `${item.descriptor.id}-${index}`))) })] })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx("p", { className: "text-neutral-grey-50 text-xs font-medium tracking-wider", children: "Email Preview" }), _jsxs("div", { className: "border-border-default flex flex-col gap-1.5 border-l-2 pl-3", children: [_jsxs("p", { className: "text-neutral-grey-100 text-xs", children: [_jsx("span", { className: "font-medium", children: "Subject:" }), " ", emailSubject] }), _jsx("pre", { className: "text-neutral-grey-100 font-sans text-xs leading-snug whitespace-pre-wrap", children: emailBody }), _jsx("p", { className: "text-muted-foreground text-[11px]", children: "Each reviewer receives a personalized invitation link." })] })] })] }));
}
//# sourceMappingURL=CreateReviewConfirmStep.js.map