import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { AlertTriangle, ChevronDown, Plus, Settings2, X } from "lucide-react";
import { Button } from "../../components/ui/button";
import { Checkbox } from "../../components/ui/checkbox";
import { Input } from "../../components/ui/input";
import { Label } from "../../components/ui/label";
import { LanguageSelector } from "../../components/ui/LanguageSelector";
import { PreconfiguredReviewerSelector } from "./PreconfiguredReviewerSelector";
import { ItemCollectionEditor } from "../ui/ItemCollectionEditor";
export function CreateReviewDetailsStep({ items, setItems, showErrors, language, setLanguage, rootItemIds, selectedInTree, setSelectedInTree, selectedFromList, setSelectedFromList, addToList, removeFromList, handleAddItem, removeItem, toggleSubitems, reviewers, setReviewers, newReviewer, setNewReviewer, addReviewer, removeReviewer, isValidEmail, emailAlreadyExists, itemIds, languageMode, setLanguageMode, selectedLanguages, setSelectedLanguages, itemLanguages, advancedSettingsOpen, setAdvancedSettingsOpen, requiredApprovals, setRequiredApprovals, updateWorkflowOnCompletion, setUpdateWorkflowOnCompletion, shareCommentsAndSuggestions, setShareCommentsAndSuggestions, expirationDays, setExpirationDays, showSecretFields, setShowSecretFields, secret, setSecret, secretConfirm, setSecretConfirm, error, }) {
    return (_jsxs("div", { className: "flex flex-col gap-6 pt-6", children: [_jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("label", { className: "text-neutral-grey-100 text-sm font-medium", children: "Pages & Items" }), _jsxs("span", { className: "bg-primary/10 text-primary rounded-badge badge-pad text-2xs font-medium", children: [items.length, " selected"] })] }), _jsx("p", { className: "text-muted-foreground text-xs", children: "Select the content items to include in this review. Double-click to add items quickly." }), _jsx(ItemCollectionEditor, { items: items, selectedInTree: selectedInTree, onSelectedInTreeChange: setSelectedInTree, selectedFromList: selectedFromList, onSelectedFromListChange: setSelectedFromList, onAddToList: addToList, onRemoveFromList: removeFromList, onAddItem: handleAddItem, onRemoveItem: removeItem, onToggleSubitems: toggleSubitems, language: language, rootItemIds: rootItemIds, selectedItemsLabel: "Selected Items", emptyMessage: "No items selected", emptyHint: "Browse or search to add items", height: 340, localStorageKey: "create-review-dialog-splitter" }), showErrors && items.length === 0 && (_jsx("p", { className: "text-destructive text-xs font-medium", children: "Please select at least one page or item" }))] }), _jsx("div", { className: "border-border-default border-t" }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("label", { className: "text-neutral-grey-100 text-sm font-medium", children: "Reviewers" }), reviewers.length > 0 && (_jsxs("span", { className: "bg-primary/10 text-primary rounded-badge badge-pad text-2xs font-medium", children: [reviewers.length, " added"] }))] }), _jsx("p", { className: "text-muted-foreground text-xs", children: "Add people who will review and approve the content." }), reviewers.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-2.5", children: reviewers.map((reviewer, index) => (_jsxs("div", { className: "group hover:border-primary/30 border-border-default flex items-center gap-2.5 rounded-full border bg-white py-1.5 pr-2 pl-3.5 transition-all", children: [_jsx("div", { className: "bg-primary/10 text-primary ring-primary/5 flex h-6 w-6 items-center justify-center rounded-full text-[10px] font-bold ring-2", children: reviewer.name.charAt(0).toUpperCase() }), _jsxs("div", { className: "flex flex-col", children: [_jsx("span", { className: "text-neutral-grey-100 text-xs leading-none font-medium", children: reviewer.name }), _jsx("span", { className: "text-muted-foreground mt-1 text-[10px] leading-none", children: reviewer.email })] }), _jsx(Button, { variant: "ghost", size: "sm", className: "text-muted-foreground hover:bg-destructive/10 hover:text-destructive h-6 w-6 rounded-full p-0 opacity-50 transition-all hover:opacity-100", onClick: () => removeReviewer(index), children: _jsx(X, { className: "h-3.5 w-3.5" }) })] }, index))) })), _jsxs("div", { className: "border-border-default bg-neutral-grey-5/50 flex flex-col gap-4 rounded-xl border p-5", children: [items.length > 0 && (_jsx(PreconfiguredReviewerSelector, { itemIds: itemIds, language: language, onReviewerSelected: (reviewer) => {
                                    const exists = reviewers.some((r) => r.email.toLowerCase() === reviewer.email.toLowerCase());
                                    if (!exists) {
                                        setReviewers([...reviewers, reviewer]);
                                    }
                                }, existingReviewers: reviewers })), _jsxs("div", { className: "flex flex-col gap-2.5", children: [_jsx("label", { className: "text-neutral-grey-50 text-[11px] font-bold tracking-wider", children: "Add new reviewer" }), _jsxs("div", { className: "flex items-start gap-3", children: [_jsxs("div", { className: "flex flex-1 flex-col gap-1", children: [_jsx(Input, { "data-testid": "reviewer-email-input", placeholder: "Email address", value: newReviewer.email, onChange: (e) => setNewReviewer({
                                                            ...newReviewer,
                                                            email: e.target.value,
                                                        }), onKeyDown: (e) => {
                                                            if (e.key === "Enter") {
                                                                e.preventDefault();
                                                                addReviewer();
                                                            }
                                                        }, className: `bg-white ${newReviewer.email && !isValidEmail(newReviewer.email)
                                                            ? "border-destructive/30 focus:border-destructive"
                                                            : ""}` }), newReviewer.email && !isValidEmail(newReviewer.email) && (_jsx("span", { className: "text-destructive text-[10px] font-medium", children: "Invalid email address" })), newReviewer.email && emailAlreadyExists(newReviewer.email) && (_jsx("span", { className: "text-destructive text-[10px] font-medium", children: "Reviewer already added" }))] }), _jsx("div", { className: "flex flex-1 flex-col gap-1", children: _jsx(Input, { "data-testid": "reviewer-name-input", placeholder: "Full Name", value: newReviewer.name, onChange: (e) => setNewReviewer({
                                                        ...newReviewer,
                                                        name: e.target.value,
                                                    }), onKeyDown: (e) => {
                                                        if (e.key === "Enter") {
                                                            e.preventDefault();
                                                            addReviewer();
                                                        }
                                                    }, className: "bg-white" }) }), _jsxs(Button, { onClick: addReviewer, size: "sm", "aria-label": "Add Reviewer", "data-testid": "add-reviewer-button", className: "mt-0.5 h-6 shrink-0 px-3", children: [_jsx(Plus, { className: "mr-1.5 h-3.5 w-3.5" }), "Add"] })] })] })] }), showErrors && reviewers.length === 0 && (_jsx("p", { className: "text-destructive text-xs font-medium", children: "Please add at least one reviewer to create this review" }))] }), _jsx("div", { className: "border-border-default border-t" }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("label", { className: "text-neutral-grey-100 text-sm font-medium", children: "Language" }), _jsx("p", { className: "text-muted-foreground text-xs", children: "Choose which language versions to include in the review." }), _jsxs("div", { className: "flex flex-col gap-4", children: [_jsxs("div", { className: "flex flex-wrap gap-6", children: [_jsxs("label", { className: "flex cursor-pointer items-center gap-2", children: [_jsx("input", { type: "radio", name: "languageMode", "data-testid": "language-mode-single", checked: languageMode === "single", onChange: () => {
                                                    setLanguageMode("single");
                                                    setLanguage(selectedLanguages[0] || language);
                                                }, className: "accent-primary h-4 w-4 cursor-pointer" }), _jsx("span", { className: "text-neutral-grey-100 text-xs", children: "Single Language" })] }), _jsxs("label", { className: "flex cursor-pointer items-center gap-2", children: [_jsx("input", { type: "radio", name: "languageMode", "data-testid": "language-mode-multiple", checked: languageMode === "multiple", onChange: () => setLanguageMode("multiple"), className: "accent-primary h-4 w-4 cursor-pointer" }), _jsx("span", { className: "text-neutral-grey-100 text-xs", children: "Multiple Languages" })] }), _jsxs("label", { className: "flex cursor-pointer items-center gap-2", children: [_jsx("input", { type: "radio", name: "languageMode", "data-testid": "language-mode-all", checked: languageMode === "all", onChange: () => setLanguageMode("all"), className: "accent-primary h-4 w-4 cursor-pointer" }), _jsx("span", { className: "text-neutral-grey-100 text-xs", children: "All Languages" })] })] }), languageMode === "single" && (_jsx("div", { className: "max-w-xs", children: _jsx(LanguageSelector, { selectedLanguage: language, onLanguageSelected: (lang) => {
                                        setLanguage(lang.languageCode);
                                        setSelectedLanguages([lang.languageCode]);
                                    }, showAllLanguages: true }) })), languageMode === "multiple" && (_jsxs("div", { className: "border-border-default flex max-h-56 flex-col gap-3 overflow-hidden rounded-xl border bg-white p-4", children: [_jsxs("div", { className: "border-border-default flex items-center justify-between border-b pb-3", children: [_jsx("span", { className: "text-neutral-grey-50 text-[11px] font-bold tracking-wider", children: "Select Languages" }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => setSelectedLanguages(itemLanguages.map((l) => l.languageCode)), className: "text-primary hover:bg-primary/5 h-7 px-2 text-xs", children: "Select All" }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => setSelectedLanguages([]), className: "text-neutral-grey-50 hover:bg-neutral-grey-5 h-7 px-2 text-xs", children: "Clear" })] })] }), _jsx("div", { className: "grid grid-cols-2 gap-2 overflow-y-auto pr-2", children: itemLanguages.map((lang) => (_jsxs("label", { className: "hover:bg-neutral-grey-5 flex cursor-pointer items-center gap-3 rounded-md p-2 transition-all", children: [_jsx(Checkbox, { checked: selectedLanguages.includes(lang.languageCode), onCheckedChange: (checked) => {
                                                        if (checked) {
                                                            setSelectedLanguages([
                                                                ...selectedLanguages,
                                                                lang.languageCode,
                                                            ]);
                                                        }
                                                        else {
                                                            setSelectedLanguages(selectedLanguages.filter((l) => l !== lang.languageCode));
                                                        }
                                                    } }), _jsx("img", { src: lang.icon, className: "h-4 w-4 rounded-sm", alt: lang.name }), _jsx("span", { className: "text-neutral-grey-100 text-xs font-medium", children: lang.name })] }, lang.languageCode))) }), showErrors && selectedLanguages.length === 0 && (_jsx("p", { className: "text-destructive mt-1 text-center text-xs font-medium", children: "Please select at least one language" }))] })), languageMode === "all" && (_jsx("div", { className: "border-feedback-blue bg-feedback-blue-light text-feedback-blue rounded-lg border p-4 text-sm leading-relaxed font-medium", children: "All available languages will be included in this review. Reviewers will see versions for every language the item exists in." }))] })] }), _jsx("div", { className: "border-border-default border-t" }), _jsxs("div", { className: "mb-4 flex flex-col", children: [_jsxs("button", { type: "button", "data-testid": "advanced-settings-button", onClick: () => setAdvancedSettingsOpen(!advancedSettingsOpen), className: "border-border-default bg-neutral-grey-5/50 hover:bg-neutral-grey-5/80 flex w-full items-center justify-between rounded-xl border px-5 py-4 text-left transition-all", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "border-border-default rounded-lg border bg-white p-2", children: _jsx(Settings2, { className: "text-primary h-4 w-4" }) }), _jsxs("div", { className: "flex flex-col", children: [_jsx("span", { className: "text-neutral-grey-100 text-sm leading-tight font-medium", children: "Advanced Settings" }), _jsx("span", { className: "text-muted-foreground mt-0.5 text-[11px]", children: "Expiration, approvals, security" })] })] }), _jsx(ChevronDown, { className: `text-neutral-grey-50 h-5 w-5 transition-transform duration-300 ${advancedSettingsOpen ? "rotate-180" : ""}` })] }), advancedSettingsOpen && (_jsxs("div", { className: "border-border-default mt-4 flex flex-col gap-6 rounded-xl border bg-white p-6", children: [_jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("label", { htmlFor: "requiredApprovals", className: "text-neutral-grey-100 text-sm font-medium", children: "Required Approvals" }), _jsx("p", { className: "text-muted-foreground text-xs", children: "Number of reviewers that must approve each page or item before it's considered complete." }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Input, { id: "requiredApprovals", "data-testid": "required-approvals-input", type: "number", min: "1", value: requiredApprovals, onChange: (e) => setRequiredApprovals(e.target.value), placeholder: "1", className: "bg-neutral-grey-5/50 w-24" }), _jsx("span", { className: "text-neutral-grey-50 text-xs font-medium", children: "approvals needed" })] }), showErrors &&
                                                reviewers.length > 0 &&
                                                requiredApprovals &&
                                                (() => {
                                                    const num = parseInt(requiredApprovals, 10);
                                                    if (isNaN(num) || num < 1) {
                                                        return (_jsx("p", { className: "text-destructive text-xs font-medium", children: "Must be at least 1" }));
                                                    }
                                                    if (num > reviewers.length) {
                                                        return (_jsxs("p", { className: "text-destructive text-xs font-medium", children: ["Cannot exceed number of reviewers (", reviewers.length, ")"] }));
                                                    }
                                                    return null;
                                                })()] })] }), _jsx("div", { className: "border-border-default border-t" }), _jsxs("div", { className: "flex items-start gap-4", children: [_jsx(Checkbox, { id: "updateWorkflowOnCompletion", "data-testid": "update-workflow-checkbox", checked: updateWorkflowOnCompletion, onCheckedChange: (checked) => setUpdateWorkflowOnCompletion(!!checked), className: "mt-1" }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx(Label, { htmlFor: "updateWorkflowOnCompletion", className: "text-neutral-grey-100 cursor-pointer text-sm leading-tight font-medium", children: "Update workflow state on completion" }), _jsx("span", { className: "text-muted-foreground text-xs leading-relaxed", children: "When the review is approved by all required reviewers, automatically execute the \"Approve\" workflow action." })] })] }), _jsx("div", { className: "border-border-default border-t" }), _jsxs("div", { className: "flex items-start gap-4", children: [_jsx(Checkbox, { id: "hasExpiration", "data-testid": "set-expiration-checkbox", checked: expirationDays !== "", onCheckedChange: (checked) => {
                                            if (!checked) {
                                                setExpirationDays("");
                                            }
                                            else {
                                                setExpirationDays("30");
                                            }
                                        }, className: "mt-1" }), _jsxs("div", { className: "flex flex-1 flex-col gap-3", children: [_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx(Label, { htmlFor: "hasExpiration", className: "text-neutral-grey-100 cursor-pointer text-sm leading-tight font-medium", children: "Set expiration" }), _jsx("span", { className: "text-muted-foreground text-xs leading-relaxed", children: "Automatically close the review after a specified number of days if not completed." })] }), expirationDays !== "" && (_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Input, { type: "number", "data-testid": "expiration-days-input", min: "1", value: expirationDays, onChange: (e) => setExpirationDays(e.target.value), placeholder: "30", className: "bg-neutral-grey-5/50 w-24" }), _jsx("span", { className: "text-neutral-grey-50 text-xs font-medium", children: "days remaining" })] }))] })] }), _jsx("div", { className: "border-border-default border-t" }), _jsxs("div", { className: "flex items-start gap-4", children: [_jsx(Checkbox, { id: "hasSecret", "data-testid": "require-secret-checkbox", checked: showSecretFields, onCheckedChange: (checked) => {
                                            setShowSecretFields(!!checked);
                                            if (!checked) {
                                                setSecret("");
                                                setSecretConfirm("");
                                            }
                                        }, className: "mt-1" }), _jsxs("div", { className: "flex flex-1 flex-col gap-3", children: [_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx(Label, { htmlFor: "hasSecret", className: "text-neutral-grey-100 cursor-pointer text-sm leading-tight font-medium", children: "Require secret to unlock" }), _jsx("span", { className: "text-muted-foreground text-xs leading-relaxed", children: "Reviewers must enter a shared secret phrase before they can access and review the content." })] }), showSecretFields && (_jsxs("div", { className: "grid max-w-md grid-cols-2 gap-3", children: [_jsx(Input, { "data-testid": "secret-input", type: "password", placeholder: "Create secret phrase", value: secret, onChange: (e) => setSecret(e.target.value), autoComplete: "off", className: "bg-neutral-grey-5/50" }), _jsx(Input, { "data-testid": "secret-confirm-input", type: "password", placeholder: "Confirm secret phrase", value: secretConfirm, onChange: (e) => setSecretConfirm(e.target.value), autoComplete: "off", className: "bg-neutral-grey-5/50" }), showErrors && secret && secret !== secretConfirm && (_jsx("p", { className: "text-destructive col-span-2 text-xs font-medium", children: "Secret phrases do not match" }))] }))] })] }), _jsx("div", { className: "border-border-default border-t" }), _jsxs("div", { className: "flex items-start gap-4", children: [_jsx(Checkbox, { id: "shareCommentsAndSuggestions", "data-testid": "share-comments-checkbox", checked: shareCommentsAndSuggestions, onCheckedChange: (checked) => setShareCommentsAndSuggestions(!!checked), className: "mt-1" }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx(Label, { htmlFor: "shareCommentsAndSuggestions", className: "text-neutral-grey-100 cursor-pointer text-sm leading-tight font-medium", children: "Share comments and suggestions with all reviewers" }), _jsx("span", { className: "text-muted-foreground text-xs leading-relaxed", children: "When enabled, all reviewers in this review will be able to see comments and suggestions made by other reviewers or sitecore users. This will also affect already existing comments." })] })] })] }))] }), error && (_jsx("div", { className: "border-destructive/20 bg-destructive/10 text-destructive rounded-xl border p-4 text-sm font-medium", children: _jsxs("div", { className: "flex gap-3", children: [_jsx(AlertTriangle, { className: "h-5 w-5 shrink-0" }), _jsx("p", { children: error })] }) }))] }));
}
//# sourceMappingURL=CreateReviewDetailsStep.js.map