'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from 'react';
import Markdown from 'react-markdown';
import { ChevronRight, GitCompareArrows, Layers } from 'lucide-react';
import { Badge } from '../../ui/badge.js';
import { DrawerActionBar } from '../../common/drawer-action-bar/index.js';
import { useSoundAction } from '../../../hooks/use-sound-action.js';
const markdownComponents = {
    p: ({ children }) => (_jsx("p", { className: "text-muted-foreground mb-2 text-xs leading-relaxed last:mb-0", children: children })),
    strong: ({ children }) => _jsx("strong", { className: "text-foreground font-semibold", children: children }),
    em: ({ children }) => _jsx("em", { className: "italic", children: children }),
    code: ({ children, className }) => className ? (_jsx("code", { className: `${className} text-[11px]`, children: children })) : (_jsx("code", { className: "bg-muted text-foreground rounded-md px-1.5 py-0.5 font-mono text-[11px]", children: children })),
    pre: ({ children }) => (_jsx("pre", { className: "bg-muted my-2 overflow-x-auto rounded-lg border p-3", children: children })),
    ul: ({ children }) => (_jsx("ul", { className: "text-muted-foreground mb-2 list-disc space-y-1 ps-4 text-xs", children: children })),
    ol: ({ children }) => (_jsx("ol", { className: "text-muted-foreground mb-2 list-decimal space-y-1 ps-4 text-xs", children: children })),
    li: ({ children }) => _jsx("li", { className: "leading-relaxed", children: children }),
    a: ({ children, href }) => (_jsx("a", { href: href, className: "text-primary underline underline-offset-2", target: "_blank", rel: "noopener noreferrer", children: children })),
};
function DecisionCard({ decision, index }) {
    const [alternativesOpen, setAlternativesOpen] = useState(false);
    const expandSound = useSoundAction('expand');
    const collapseSound = useSoundAction('collapse');
    const handleToggleAlternatives = () => {
        // Play sound based on current state (before toggle)
        if (alternativesOpen) {
            collapseSound.play();
        }
        else {
            expandSound.play();
        }
        setAlternativesOpen((prev) => !prev);
    };
    return (_jsxs("div", { className: "border-border rounded-lg border", children: [_jsxs("div", { className: "space-y-3 px-4 py-3", children: [_jsxs("div", { className: "flex items-start justify-between gap-3", children: [_jsxs("div", { className: "flex items-start gap-2.5", children: [_jsx("span", { className: "bg-primary text-primary-foreground flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-xs font-bold", children: index + 1 }), _jsxs("div", { className: "min-w-0", children: [_jsx("h3", { className: "text-foreground text-sm leading-tight font-semibold", children: decision.title }), _jsx("p", { className: "text-muted-foreground mt-0.5 text-xs", children: decision.chosen })] })] }), 'decisionName' in decision &&
                                decision.decisionName ? (_jsx(Badge, { variant: "secondary", className: "bg-primary/10 text-primary shrink-0", children: decision.decisionName })) : null] }), decision.rationale ? (_jsx(Markdown, { components: markdownComponents, children: decision.rationale })) : null] }), decision.rejected.length > 0 ? (_jsxs("div", { className: "border-border border-t", children: [_jsxs("button", { type: "button", onClick: handleToggleAlternatives, className: "text-muted-foreground hover:bg-muted/50 flex w-full items-center gap-1.5 px-4 py-3 text-xs font-medium transition-colors", children: [_jsx(ChevronRight, { className: `h-3.5 w-3.5 transition-transform ${alternativesOpen ? 'rotate-90' : ''}` }), _jsx(Layers, { className: "h-3.5 w-3.5" }), "Other Options Considered (", decision.rejected.length, ")"] }), alternativesOpen ? (_jsx("div", { className: "space-y-1.5 px-4 pb-3", children: decision.rejected.map((alt) => (_jsx("div", { className: "bg-primary/5 rounded-md px-3 py-2", children: _jsx("span", { className: "text-foreground text-xs", children: alt }) }, alt))) })) : null] })) : null] }));
}
/**
 * Renders the tech decisions content (header + decision cards) without the action bar.
 * Used by TechReviewTabs to compose with a shared DrawerActionBar.
 */
export function TechDecisionsContent({ data }) {
    const { summary, decisions } = data;
    if (decisions.length === 0)
        return null;
    return (_jsxs("div", { className: "space-y-4 p-4", children: [_jsxs("div", { className: "flex items-start gap-3", children: [_jsx("div", { className: "mt-1.5 h-2.5 w-2.5 shrink-0 rounded-full bg-blue-500" }), _jsxs("div", { className: "flex-1", children: [_jsx("h2", { className: "text-foreground text-sm font-bold", children: "Technical Implementation Plan Review" }), summary ? (_jsx("p", { className: "text-muted-foreground mt-1 text-xs leading-relaxed", children: summary })) : null] })] }), _jsxs("div", { className: "flex items-center gap-2 pt-1", children: [_jsx(GitCompareArrows, { className: "text-primary h-4 w-4" }), _jsx("h3", { className: "text-foreground text-sm font-bold", children: "Technical Decisions" })] }), decisions.map((decision, i) => (_jsx(DecisionCard, { decision: decision, index: i }, decision.title)))] }));
}
export function TechDecisionsReview({ data, onApprove, onReject, isProcessing = false, isRejecting = false, }) {
    if (data.decisions.length === 0)
        return null;
    return (_jsxs("div", { className: "flex min-h-0 flex-1 flex-col", children: [_jsx("div", { className: "flex-1 overflow-y-auto", children: _jsx(TechDecisionsContent, { data: data }) }), _jsx(DrawerActionBar, { onReject: onReject, onApprove: onApprove, approveLabel: "Approve Plan", revisionPlaceholder: "Ask AI to revise the plan...", isProcessing: isProcessing, isRejecting: isRejecting })] }));
}
