/**
 * ApprovalView - Workflow view focused on data_ok and reviewer actions
 *
 * Features:
 * - Prominent data_ok controls (larger, centered)
 * - Field grouping by approval status (pending -> not_ok -> ok)
 * - Bulk approval actions (approve all in section, etc.)
 * - Progress indicator (X of Y fields approved)
 * - Notes and chat prominently displayed
 * - "Next unapproved field" navigation
 */
'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useMemo, useCallback } from 'react';
import { useFormViewContext } from '../context.js';
import { useShouldRenderField, useApprovalStats, useFieldDataOk } from '../use_form_view.js';
import { cn } from '../../../utils/cn.js';
import { get_field_value, is_field_empty } from '../../shared/field_utils/index.js';
import { format_date_value, get_display_label } from '../../shared/summary_utils/index.js';
import { SummaryDataTable } from './summary_data_table.js';
import { use_field_action_slot } from '../../shared/use_field_action_slot.js';
import { IoCheckmarkCircle, IoCloseCircle, IoTimeOutline, IoArrowForward } from 'react-icons/io5';
/**
 * Progress bar for approval status
 */
function ApprovalProgress() {
    const stats = useApprovalStats();
    return (_jsxs("div", { className: "cls_approval_progress mb-6 p-4 bg-muted/50 rounded-lg", children: [_jsxs("div", { className: "flex items-center justify-between mb-2", children: [_jsx("span", { className: "text-sm font-medium", children: "Approval Progress" }), _jsxs("span", { className: "text-sm text-muted-foreground", children: [stats.approved_fields, " of ", stats.total_fields, " approved (", stats.progress_percent, "%)"] })] }), _jsx("div", { className: "h-3 bg-muted rounded-full overflow-hidden", children: _jsx("div", { className: "h-full bg-green-500 transition-all duration-300", style: { width: `${stats.progress_percent}%` } }) }), _jsxs("div", { className: "flex justify-between mt-2 text-xs text-muted-foreground", children: [_jsxs("span", { className: "flex items-center gap-1", children: [_jsx(IoCheckmarkCircle, { className: "text-green-500" }), stats.approved_fields, " Approved"] }), _jsxs("span", { className: "flex items-center gap-1", children: [_jsx(IoTimeOutline, { className: "text-orange-500" }), stats.pending_fields, " Pending"] }), _jsxs("span", { className: "flex items-center gap-1", children: [_jsx(IoCloseCircle, { className: "text-red-500" }), stats.not_ok_fields, " Not OK"] })] })] }));
}
/**
 * Data OK toggle button
 */
function DataOkToggle({ field_id, size = 'normal', }) {
    const { value, is_ok, is_pending, is_not_ok, set_data_ok, mode, editable } = useFieldDataOk(field_id);
    const handle_click = useCallback(() => {
        if (!editable)
            return;
        if (mode === 'multi_state') {
            // Cycle: not_ok -> pending -> ok -> not_ok
            if (is_not_ok || value === undefined) {
                set_data_ok('pending');
            }
            else if (is_pending) {
                set_data_ok('ok');
            }
            else {
                set_data_ok('not_ok');
            }
        }
        else {
            // Toggle boolean
            set_data_ok(!value);
        }
    }, [mode, value, is_not_ok, is_pending, set_data_ok, editable]);
    const icon_size = size === 'large' ? 'w-8 h-8' : 'w-5 h-5';
    const button_size = size === 'large' ? 'p-3' : 'p-2';
    return (_jsx("button", { type: "button", onClick: handle_click, disabled: !editable, className: cn('rounded-full transition-colors', button_size, editable ? 'cursor-pointer hover:bg-muted' : 'cursor-not-allowed opacity-50', is_ok && 'bg-green-100 text-green-600', is_pending && 'bg-orange-100 text-orange-600', is_not_ok && 'bg-red-100 text-red-600', !is_ok && !is_pending && !is_not_ok && 'bg-gray-100 text-gray-400'), title: is_ok ? 'Approved' :
            is_pending ? 'Pending review' :
                is_not_ok ? 'Not approved' :
                    'Click to review', children: is_ok ? (_jsx(IoCheckmarkCircle, { className: icon_size })) : is_pending ? (_jsx(IoTimeOutline, { className: icon_size })) : (_jsx(IoCloseCircle, { className: icon_size })) }));
}
/**
 * Approval field card
 */
function ApprovalFieldCard({ field }) {
    const { form_data, field_metadata, settings } = useFormViewContext();
    const should_render = useShouldRenderField();
    const field_action_slot = use_field_action_slot(field.id);
    if (!should_render(field)) {
        return null;
    }
    const value = get_field_value(field.id, form_data);
    const is_empty = is_field_empty(value);
    const metadata = field_metadata[field.id];
    // Check if this is a data table field
    const is_data_table = field.component_type === 'HazoCollabFormDataTable';
    // Format value (skip for data tables)
    let display_value = '';
    if (!is_data_table) {
        if (is_empty) {
            display_value = settings.empty_field_text;
        }
        else if (field.component_type === 'HazoCollabFormCheckbox') {
            display_value = value === true || value === 'true' ? 'Yes' : 'No';
        }
        else if (field.component_type === 'HazoCollabFormDate') {
            display_value = format_date_value(value, settings.date_format);
        }
        else if (field.component_type === 'HazoCollabFormCombo' || field.component_type === 'HazoCollabFormRadio') {
            display_value = get_display_label(field.input_options, String(value));
        }
        else {
            display_value = String(value);
        }
    }
    // Get status color
    const data_ok = metadata?.data_ok;
    let status_color = 'border-l-gray-300';
    if (data_ok === true || data_ok === 'ok') {
        status_color = 'border-l-green-500';
    }
    else if (data_ok === 'pending') {
        status_color = 'border-l-orange-500';
    }
    else if (data_ok === false || data_ok === 'not_ok') {
        status_color = 'border-l-red-500';
    }
    return (_jsxs("div", { className: cn('cls_approval_field_card', 'border rounded-lg p-4 bg-card', 'border-l-4', status_color), children: [_jsxs("div", { className: "flex items-start gap-4", children: [_jsx(DataOkToggle, { field_id: field.id, size: "large" }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("h4", { className: "font-medium text-foreground", children: field.label || field.id }), is_data_table && field.table_config ? (_jsx(SummaryDataTable, { table_config: field.table_config, rows: (Array.isArray(value) ? value : []), date_format: settings.date_format, empty_message: settings.empty_field_text, class_name: "mt-2" })) : (_jsx("p", { className: cn('text-sm mt-1', is_empty ? 'text-muted-foreground italic' : 'text-foreground'), children: display_value })), metadata?.notes && metadata.notes.length > 0 && (_jsxs("div", { className: "mt-2 text-xs text-amber-600", children: [metadata.notes.length, " note", metadata.notes.length !== 1 ? 's' : ''] }))] }), field_action_slot.row_end] }), field_action_slot.row_below && (_jsx("div", { className: "cls_field_action_below mt-2", children: field_action_slot.row_below }))] }));
}
/**
 * Approval section
 */
function ApprovalSection({ section, section_index, group_by_status, }) {
    const { field_metadata, callbacks } = useFormViewContext();
    const should_render = useShouldRenderField();
    // Collect renderable fields
    const renderable_fields = useMemo(() => {
        const fields = [];
        const collect = (field_list) => {
            for (const field of field_list) {
                if (field.field_type === 'group' && field.fields) {
                    collect(field.fields);
                }
                else if (should_render(field)) {
                    fields.push(field);
                }
            }
        };
        if (section.groups) {
            collect(section.groups);
        }
        return fields;
    }, [section.groups, should_render]);
    // Group by status if enabled
    const grouped_fields = useMemo(() => {
        if (!group_by_status) {
            return { all: renderable_fields };
        }
        const pending = [];
        const not_ok = [];
        const ok = [];
        for (const field of renderable_fields) {
            const data_ok = field_metadata[field.id]?.data_ok;
            if (data_ok === true || data_ok === 'ok') {
                ok.push(field);
            }
            else if (data_ok === 'pending') {
                pending.push(field);
            }
            else {
                not_ok.push(field);
            }
        }
        return { pending, not_ok, ok };
    }, [renderable_fields, field_metadata, group_by_status]);
    // Skip sections with no renderable fields
    if (renderable_fields.length === 0)
        return null;
    // Calculate section approval count
    const approved_count = renderable_fields.filter(f => {
        const data_ok = field_metadata[f.id]?.data_ok;
        return data_ok === true || data_ok === 'ok';
    }).length;
    return (_jsxs("div", { className: "cls_approval_section mb-8", children: [_jsxs("div", { className: "flex items-center justify-between pb-2 mb-4 border-b", children: [_jsx("h3", { className: "font-semibold text-lg text-foreground", children: section.section_name || `Section ${section_index + 1}` }), _jsxs("span", { className: "text-sm text-muted-foreground", children: [approved_count, " / ", renderable_fields.length, " approved"] })] }), group_by_status ? (_jsxs("div", { className: "space-y-6", children: [grouped_fields.pending && grouped_fields.pending.length > 0 && (_jsxs("div", { children: [_jsxs("h4", { className: "text-sm font-medium text-orange-600 mb-2 flex items-center gap-2", children: [_jsx(IoTimeOutline, { className: "w-4 h-4" }), "Pending Review (", grouped_fields.pending.length, ")"] }), _jsx("div", { className: "space-y-2", children: grouped_fields.pending.map(field => (_jsx(ApprovalFieldCard, { field: field }, field.id))) })] })), grouped_fields.not_ok && grouped_fields.not_ok.length > 0 && (_jsxs("div", { children: [_jsxs("h4", { className: "text-sm font-medium text-red-600 mb-2 flex items-center gap-2", children: [_jsx(IoCloseCircle, { className: "w-4 h-4" }), "Needs Correction (", grouped_fields.not_ok.length, ")"] }), _jsx("div", { className: "space-y-2", children: grouped_fields.not_ok.map(field => (_jsx(ApprovalFieldCard, { field: field }, field.id))) })] })), grouped_fields.ok && grouped_fields.ok.length > 0 && (_jsxs("div", { children: [_jsxs("h4", { className: "text-sm font-medium text-green-600 mb-2 flex items-center gap-2", children: [_jsx(IoCheckmarkCircle, { className: "w-4 h-4" }), "Approved (", grouped_fields.ok.length, ")"] }), _jsx("div", { className: "space-y-2", children: grouped_fields.ok.map(field => (_jsx(ApprovalFieldCard, { field: field }, field.id))) })] }))] })) : (_jsx("div", { className: "space-y-2", children: grouped_fields.all?.map(field => (_jsx(ApprovalFieldCard, { field: field }, field.id))) }))] }));
}
/**
 * ApprovalView component
 *
 * Workflow-focused interface for reviewers doing data approval.
 */
export function ApprovalView({ group_by_status = true, show_progress = true, enable_next_pending = true, on_next_pending, } = {}) {
    const { sections } = useFormViewContext();
    const stats = useApprovalStats();
    return (_jsxs("div", { className: "cls_form_view_approval", children: [show_progress && _jsx(ApprovalProgress, {}), enable_next_pending && stats.pending_fields > 0 && (_jsx("div", { className: "mb-6", children: _jsxs("button", { type: "button", onClick: on_next_pending, className: "inline-flex items-center gap-2 px-4 py-2 bg-orange-500 text-white rounded-lg hover:bg-orange-600 transition-colors", children: ["Next Pending Field", _jsx(IoArrowForward, { className: "w-4 h-4" })] }) })), sections.map((section, index) => (_jsx(ApprovalSection, { section: section, section_index: index, group_by_status: group_by_status }, `${section.section_name || 'section'}_${index}`))), stats.pending_fields === 0 && stats.not_ok_fields === 0 && (_jsxs("div", { className: "text-center py-8", children: [_jsx(IoCheckmarkCircle, { className: "w-16 h-16 text-green-500 mx-auto mb-4" }), _jsx("h3", { className: "text-xl font-semibold text-green-600", children: "All Fields Approved!" }), _jsxs("p", { className: "text-muted-foreground mt-2", children: ["All ", stats.total_fields, " fields have been reviewed and approved."] })] }))] }));
}
//# sourceMappingURL=approval_view.js.map