'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { ChevronLeft, ChevronRight } from 'lucide-react';
import { useCallback, useMemo, useState } from 'react';
import { cn } from '../../../lib/utils.js';
import { Button } from '../../ui/button.js';
import { Badge } from '../../ui/badge.js';
import { DrawerActionBar } from '../../common/drawer-action-bar/index.js';
import { useSoundAction } from '../../../hooks/use-sound-action.js';
export function PrdQuestionnaire({ data, selections, onSelect, onApprove, onReject, isProcessing = false, isRejecting = false, showHeader = false, chatInput, onChatInputChange, }) {
    const { question, context, questions, finalAction } = data;
    const [currentStep, setCurrentStep] = useState(0);
    const selectSound = useSoundAction('select');
    const navigateSound = useSoundAction('navigate');
    const total = questions.length;
    const isFirstStep = currentStep === 0;
    const isLastStep = currentStep === total - 1;
    const currentQuestion = questions[currentStep];
    const answeredCount = useMemo(() => Object.keys(selections).length, [selections]);
    const handleSelect = useCallback((questionId, optionId) => {
        selectSound.play();
        onSelect(questionId, optionId);
        // Auto-advance to the next step after selection (unless last step)
        if (!isLastStep) {
            setTimeout(() => setCurrentStep((s) => s + 1), 250);
        }
    }, [onSelect, isLastStep, selectSound]);
    if (total === 0)
        return null;
    return (_jsxs("div", { className: "flex min-h-0 flex-1 flex-col", children: [_jsxs("div", { className: "flex-1 space-y-4 overflow-y-auto p-4", children: [showHeader ? (_jsxs("div", { className: "border-border flex items-start gap-3 border-b pb-3", children: [_jsx("div", { className: "mt-1.5 h-2 w-2 shrink-0 rounded-full bg-amber-500" }), _jsxs("div", { className: "flex-1", children: [_jsx("h3", { className: "text-foreground mb-1.5 text-sm font-bold", children: question }), _jsx("p", { className: "text-muted-foreground text-xs leading-relaxed", children: context })] })] })) : null, _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-start gap-3", children: [_jsxs("label", { className: "text-foreground min-w-0 flex-1 text-sm font-semibold", children: [currentStep + 1, ". ", currentQuestion.question] }), _jsx("div", { className: "mt-1.5 flex shrink-0 gap-1", children: questions.map((q, idx) => (_jsx("button", { type: "button", "aria-label": `Go to question ${idx + 1}`, className: cn('h-1.5 rounded-full transition-all duration-200', idx === currentStep ? 'bg-primary w-4' : 'w-1.5', idx !== currentStep && selections[q.id] ? 'bg-primary/50' : '', idx !== currentStep && !selections[q.id] ? 'bg-muted-foreground/25' : ''), onClick: () => {
                                                navigateSound.play();
                                                setCurrentStep(idx);
                                            } }, q.id))) })] }), _jsx("div", { className: "space-y-2", children: currentQuestion.options.map((opt, optIdx) => {
                                    const selected = selections[currentQuestion.id] === opt.id;
                                    const letter = String.fromCharCode(65 + optIdx);
                                    return (_jsx("button", { type: "button", className: cn('border-border w-full overflow-hidden rounded-md border px-3 py-3 text-start text-xs transition-all', 'hover:border-primary/70 hover:bg-primary/5 group', selected && 'border-primary bg-primary/5', opt.isNew && 'animate-option-highlight'), disabled: isProcessing, onClick: () => handleSelect(currentQuestion.id, opt.id), children: _jsxs("div", { className: "flex items-start gap-2", children: [_jsxs("span", { className: "text-muted-foreground mt-0.5 font-mono text-xs", children: [letter, "."] }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "text-foreground mb-0.5 text-xs font-semibold wrap-break-word", children: opt.label }), _jsx("div", { className: "text-muted-foreground text-xs leading-snug", children: opt.rationale })] }), opt.recommended || opt.isNew ? (_jsx("div", { className: "shrink-0 pt-0.5", children: opt.recommended ? (_jsx(Badge, { className: "px-1.5 py-0 text-[10px] whitespace-nowrap", children: "AI Recommended" })) : (_jsx(Badge, { className: "border-transparent bg-emerald-600 px-1.5 py-0 text-[10px] whitespace-nowrap text-white hover:bg-emerald-600/80", children: "New" })) })) : null] }) }, opt.id));
                                }) })] }), _jsxs("div", { className: "flex items-center justify-between pt-2", children: [_jsxs(Button, { type: "button", variant: "ghost", size: "sm", disabled: isFirstStep || isProcessing, onClick: () => {
                                    navigateSound.play();
                                    setCurrentStep((s) => s - 1);
                                }, children: [_jsx(ChevronLeft, { className: "me-1 h-4 w-4" }), "Previous"] }), !isLastStep ? (_jsxs(Button, { type: "button", variant: "ghost", size: "sm", disabled: isProcessing, onClick: () => {
                                    navigateSound.play();
                                    setCurrentStep((s) => s + 1);
                                }, children: [selections[currentQuestion.id] ? 'Next' : 'Skip', _jsx(ChevronRight, { className: "ms-1 h-4 w-4" })] })) : null] })] }), _jsx(DrawerActionBar, { onReject: onReject, onApprove: () => onApprove(finalAction.id), approveLabel: finalAction.label, revisionPlaceholder: "Ask AI to refine requirements...", isProcessing: isProcessing, isRejecting: isRejecting, chatInput: chatInput, onChatInputChange: onChatInputChange, children: _jsx("div", { className: cn('bg-muted h-1.5 overflow-hidden', (answeredCount > 0 && answeredCount < total) || isProcessing
                        ? 'opacity-100'
                        : 'opacity-0', 'transition-opacity duration-200'), "data-testid": "progress-bar-container", children: isProcessing ? (_jsx("div", { className: "bg-primary animate-indeterminate-progress h-full w-1/3" })) : (_jsx("div", { className: "bg-primary h-full transition-all duration-300", style: { width: `${total > 0 ? (answeredCount / total) * 100 : 0}%` }, "data-testid": "progress-bar" })) }) })] }));
}
