'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, useTransition, useRef, useEffect } from 'react';
import { Bell, Check } from 'lucide-react';
import { toast } from 'sonner';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../../ui/card.js';
import { Label } from '../../ui/label.js';
import { Switch } from '../../ui/switch.js';
import { Separator } from '../../ui/separator.js';
import { updateSettingsAction } from '../../../app/actions/update-settings.js';
const AGENT_EVENT_TOGGLES = [
    { key: 'agentStarted', label: 'Agent Started' },
    { key: 'phaseCompleted', label: 'Phase Completed' },
    { key: 'waitingApproval', label: 'Waiting Approval' },
    { key: 'agentCompleted', label: 'Agent Completed' },
    { key: 'agentFailed', label: 'Agent Failed' },
];
const PR_EVENT_TOGGLES = [
    { key: 'mergeReviewReady', label: 'Merge Review Ready' },
    { key: 'prMerged', label: 'PR Merged' },
    { key: 'prClosed', label: 'PR Closed' },
    { key: 'prChecksPassed', label: 'PR Checks Passed' },
    { key: 'prChecksFailed', label: 'PR Checks Failed' },
    { key: 'prBlocked', label: 'PR Blocked' },
];
export function NotificationSettingsSection({ notifications }) {
    const [inApp, setInApp] = useState(notifications.inApp.enabled);
    const [events, setEvents] = useState({ ...notifications.events });
    const [isPending, startTransition] = useTransition();
    const [showSaved, setShowSaved] = useState(false);
    const prevPendingRef = useRef(false);
    useEffect(() => {
        if (prevPendingRef.current && !isPending) {
            setShowSaved(true);
            const timer = setTimeout(() => setShowSaved(false), 2000);
            return () => clearTimeout(timer);
        }
        prevPendingRef.current = isPending;
    }, [isPending]);
    function save(payload) {
        startTransition(async () => {
            const result = await updateSettingsAction(payload);
            if (!result.success) {
                toast.error(result.error ?? 'Failed to save notification settings');
            }
        });
    }
    function buildFullPayload(overrides = {}) {
        return {
            notifications: {
                inApp: { enabled: overrides.inApp ?? inApp },
                events: overrides.events ?? events,
            },
        };
    }
    function handleInAppChange(value) {
        setInApp(value);
        save(buildFullPayload({ inApp: value }));
    }
    function handleEventChange(key, value) {
        const newEvents = { ...events, [key]: value };
        setEvents(newEvents);
        save(buildFullPayload({ events: newEvents }));
    }
    return (_jsxs(Card, { id: "notifications", className: "scroll-mt-6", "data-testid": "notification-settings-section", children: [_jsxs(CardHeader, { children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Bell, { className: "text-muted-foreground h-4 w-4" }), _jsx(CardTitle, { children: "Notifications" })] }), isPending ? _jsx("span", { className: "text-muted-foreground text-xs", children: "Saving..." }) : null, showSaved && !isPending ? (_jsxs("span", { className: "flex items-center gap-1 text-xs text-green-600", children: [_jsx(Check, { className: "h-3 w-3" }), "Saved"] })) : null] }), _jsx(CardDescription, { children: "Configure notification channels and event preferences" })] }), _jsxs(CardContent, { className: "space-y-4", children: [_jsxs("div", { className: "space-y-3", children: [_jsx("h3", { className: "text-sm font-semibold", children: "Channels" }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx(Label, { htmlFor: "notif-in-app", children: "In-App" }), _jsx(Switch, { id: "notif-in-app", "data-testid": "switch-in-app", checked: inApp, onCheckedChange: handleInAppChange })] })] }), _jsx(Separator, {}), _jsxs("div", { className: "space-y-3", children: [_jsx("h3", { className: "text-sm font-semibold", children: "Agent Events" }), AGENT_EVENT_TOGGLES.map(({ key, label }) => (_jsxs("div", { className: "flex items-center justify-between", children: [_jsx(Label, { htmlFor: `notif-event-${key}`, children: label }), _jsx(Switch, { id: `notif-event-${key}`, "data-testid": `switch-event-${key}`, checked: events[key], onCheckedChange: (v) => handleEventChange(key, v) })] }, key)))] }), _jsx(Separator, {}), _jsxs("div", { className: "space-y-3", children: [_jsx("h3", { className: "text-sm font-semibold", children: "PR Events" }), PR_EVENT_TOGGLES.map(({ key, label }) => (_jsxs("div", { className: "flex items-center justify-between", children: [_jsx(Label, { htmlFor: `notif-event-${key}`, children: label }), _jsx(Switch, { id: `notif-event-${key}`, "data-testid": `switch-event-${key}`, checked: events[key], onCheckedChange: (v) => handleEventChange(key, v) })] }, key)))] })] })] }));
}
