visualization.js

/**
 * Visualization Module for Civil Litigation Dynamics Simulator
 *
 * Handles all canvas-based visualizations:
 * - Case value distributions
 * - Settlement bargaining zone
 * - Timeline and cost accumulation
 * - Decision cascade flow diagram
 */

class LitigationVisualizer {
    constructor() {
        this.canvases = {};
        this.contexts = {};
        this.colors = {
            plaintiff: {
                primary: '#58a6ff',
                secondary: '#1f6feb',
                bg: 'rgba(88, 166, 255, 0.2)',
                light: 'rgba(88, 166, 255, 0.1)'
            },
            defendant: {
                primary: '#f78166',
                secondary: '#da3633',
                bg: 'rgba(247, 129, 102, 0.2)',
                light: 'rgba(247, 129, 102, 0.1)'
            },
            zopa: {
                fill: 'rgba(63, 185, 80, 0.3)',
                stroke: '#3fb950'
            },
            settlement: '#a371f7',
            warning: '#d29922',
            danger: '#f85149',
            text: '#e6edf3',
            textSecondary: '#8b949e',
            textMuted: '#6e7681',
            bg: '#0d1117',
            bgSecondary: '#161b22',
            border: '#30363d'
        };

        this.historyData = {
            plaintiffEV: [],
            defendantEV: [],
            plaintiffReservation: [],
            defendantMaximum: [],
            plaintiffCosts: [],
            defendantCosts: [],
            days: []
        };
    }

    /**
     * Initialize all canvases
     */
    initialize() {
        // Distribution canvas
        this.canvases.distributions = document.getElementById('canvas-distributions');
        if (this.canvases.distributions) {
            this.contexts.distributions = this.canvases.distributions.getContext('2d');
            this._setupCanvas(this.canvases.distributions);
        }

        // Bargaining canvas
        this.canvases.bargaining = document.getElementById('canvas-bargaining');
        if (this.canvases.bargaining) {
            this.contexts.bargaining = this.canvases.bargaining.getContext('2d');
            this._setupCanvas(this.canvases.bargaining);
        }

        // Timeline canvas
        this.canvases.timeline = document.getElementById('canvas-timeline');
        if (this.canvases.timeline) {
            this.contexts.timeline = this.canvases.timeline.getContext('2d');
            this._setupCanvas(this.canvases.timeline);
        }

        // Cascade canvas
        this.canvases.cascade = document.getElementById('canvas-cascade');
        if (this.canvases.cascade) {
            this.contexts.cascade = this.canvases.cascade.getContext('2d');
            this._setupCanvas(this.canvases.cascade);
        }

        // Handle resize
        window.addEventListener('resize', () => this._handleResize());
    }

    /**
     * Setup canvas for high DPI displays
     */
    _setupCanvas(canvas) {
        const rect = canvas.getBoundingClientRect();
        const dpr = window.devicePixelRatio || 1;

        canvas.width = rect.width * dpr;
        canvas.height = rect.height * dpr;

        const ctx = canvas.getContext('2d');
        ctx.scale(dpr, dpr);

        canvas.style.width = rect.width + 'px';
        canvas.style.height = rect.height + 'px';
    }

    /**
     * Handle window resize
     */
    _handleResize() {
        Object.values(this.canvases).forEach(canvas => {
            if (canvas) this._setupCanvas(canvas);
        });
    }

    /**
     * Clear history data
     */
    resetHistory() {
        this.historyData = {
            plaintiffEV: [],
            defendantEV: [],
            plaintiffReservation: [],
            defendantMaximum: [],
            plaintiffCosts: [],
            defendantCosts: [],
            days: []
        };
    }

    /**
     * Record current state for history tracking
     */
    recordState(summary) {
        this.historyData.days.push(summary.day);
        this.historyData.plaintiffEV.push(summary.plaintiff.expectedValue);
        this.historyData.defendantEV.push(summary.defendant.expectedValue);
        this.historyData.plaintiffReservation.push(summary.bargaining.plaintiffReservation);
        this.historyData.defendantMaximum.push(summary.bargaining.defendantMaximum);
        this.historyData.plaintiffCosts.push(summary.plaintiff.spentToDate);
        this.historyData.defendantCosts.push(summary.defendant.spentToDate);

        // Keep history manageable
        const maxHistory = 500;
        if (this.historyData.days.length > maxHistory) {
            Object.keys(this.historyData).forEach(key => {
                this.historyData[key] = this.historyData[key].slice(-maxHistory);
            });
        }
    }

    /**
     * Update all visualizations
     */
    update(summary) {
        this.recordState(summary);
        this.drawDistributions(summary);
        this.drawBargaining(summary);
        this.drawTimeline(summary);
        this.drawCascade(summary);
    }

    // ========================================================================
    // DISTRIBUTION VISUALIZATION
    // ========================================================================

    /**
     * Draw case value distributions
     */
    drawDistributions(summary) {
        const canvas = this.canvases.distributions;
        const ctx = this.contexts.distributions;
        if (!canvas || !ctx) return;

        const rect = canvas.getBoundingClientRect();
        const width = rect.width;
        const height = rect.height;

        // Clear
        ctx.clearRect(0, 0, width, height);

        // Padding
        const padding = { left: 60, right: 20, top: 20, bottom: 30 };
        const chartWidth = width - padding.left - padding.right;
        const chartHeight = height - padding.top - padding.bottom;

        // Determine value range
        const pCI = this._getConfidenceInterval(
            summary.plaintiff.expectedValue,
            summary.plaintiff.damagesBelief * (1 - summary.plaintiff.confidence)
        );
        const dCI = this._getConfidenceInterval(
            summary.defendant.expectedValue,
            summary.defendant.damagesBelief * (1 - summary.defendant.confidence)
        );

        const minVal = Math.max(0, Math.min(pCI.low, dCI.low) * 0.8);
        const maxVal = Math.max(pCI.high, dCI.high) * 1.2;

        // Draw grid and axes
        this._drawAxes(ctx, padding, chartWidth, chartHeight, minVal, maxVal, 'Value ($)');

        // Draw plaintiff distribution
        this._drawDistributionCurve(
            ctx, padding, chartWidth, chartHeight,
            summary.plaintiff.expectedValue,
            Math.sqrt(summary.plaintiff.damagesBelief * (1 - summary.plaintiff.confidence) * 0.3),
            minVal, maxVal,
            this.colors.plaintiff.primary,
            this.colors.plaintiff.bg
        );

        // Draw defendant distribution
        this._drawDistributionCurve(
            ctx, padding, chartWidth, chartHeight,
            summary.defendant.expectedValue,
            Math.sqrt(summary.defendant.damagesBelief * (1 - summary.defendant.confidence) * 0.3),
            minVal, maxVal,
            this.colors.defendant.primary,
            this.colors.defendant.bg
        );

        // Draw expected value markers
        const pX = padding.left + ((summary.plaintiff.expectedValue - minVal) / (maxVal - minVal)) * chartWidth;
        const dX = padding.left + ((summary.defendant.expectedValue - minVal) / (maxVal - minVal)) * chartWidth;

        // Plaintiff EV line
        ctx.beginPath();
        ctx.strokeStyle = this.colors.plaintiff.primary;
        ctx.lineWidth = 2;
        ctx.setLineDash([5, 5]);
        ctx.moveTo(pX, padding.top);
        ctx.lineTo(pX, height - padding.bottom);
        ctx.stroke();
        ctx.setLineDash([]);

        // Defendant EV line
        ctx.beginPath();
        ctx.strokeStyle = this.colors.defendant.primary;
        ctx.moveTo(dX, padding.top);
        ctx.lineTo(dX, height - padding.bottom);
        ctx.stroke();

        // Labels
        ctx.font = '11px -apple-system, sans-serif';
        ctx.fillStyle = this.colors.plaintiff.primary;
        ctx.textAlign = 'center';
        ctx.fillText('P: ' + formatCurrency(summary.plaintiff.expectedValue), pX, padding.top - 5);

        ctx.fillStyle = this.colors.defendant.primary;
        ctx.fillText('D: ' + formatCurrency(summary.defendant.expectedValue), dX, padding.top - 5);
    }

    /**
     * Draw a probability distribution curve
     */
    _drawDistributionCurve(ctx, padding, chartWidth, chartHeight, mean, stdDev, minVal, maxVal, strokeColor, fillColor) {
        const numPoints = 100;
        const points = [];

        for (let i = 0; i <= numPoints; i++) {
            const x = minVal + (i / numPoints) * (maxVal - minVal);
            const z = (x - mean) / (stdDev || 1);
            const y = Math.exp(-0.5 * z * z) / (stdDev * Math.sqrt(2 * Math.PI));
            points.push({ x, y });
        }

        // Normalize y values
        const maxY = Math.max(...points.map(p => p.y));

        // Draw filled area
        ctx.beginPath();
        ctx.moveTo(padding.left, padding.top + chartHeight);

        points.forEach((p, i) => {
            const px = padding.left + ((p.x - minVal) / (maxVal - minVal)) * chartWidth;
            const py = padding.top + chartHeight - (p.y / maxY) * chartHeight * 0.9;
            if (i === 0) {
                ctx.lineTo(px, py);
            } else {
                ctx.lineTo(px, py);
            }
        });

        ctx.lineTo(padding.left + chartWidth, padding.top + chartHeight);
        ctx.closePath();
        ctx.fillStyle = fillColor;
        ctx.fill();

        // Draw line
        ctx.beginPath();
        points.forEach((p, i) => {
            const px = padding.left + ((p.x - minVal) / (maxVal - minVal)) * chartWidth;
            const py = padding.top + chartHeight - (p.y / maxY) * chartHeight * 0.9;
            if (i === 0) {
                ctx.moveTo(px, py);
            } else {
                ctx.lineTo(px, py);
            }
        });
        ctx.strokeStyle = strokeColor;
        ctx.lineWidth = 2;
        ctx.stroke();
    }

    /**
     * Get 90% confidence interval
     */
    _getConfidenceInterval(mean, variance) {
        const stdDev = Math.sqrt(variance || mean * 0.3);
        return {
            low: Math.max(0, mean - 1.645 * stdDev),
            high: mean + 1.645 * stdDev
        };
    }

    // ========================================================================
    // BARGAINING ZONE VISUALIZATION
    // ========================================================================

    /**
     * Draw the settlement bargaining zone
     */
    drawBargaining(summary) {
        const canvas = this.canvases.bargaining;
        const ctx = this.contexts.bargaining;
        if (!canvas || !ctx) return;

        const rect = canvas.getBoundingClientRect();
        const width = rect.width;
        const height = rect.height;

        ctx.clearRect(0, 0, width, height);

        const padding = { left: 60, right: 60, top: 20, bottom: 25 };
        const chartWidth = width - padding.left - padding.right;
        const chartHeight = height - padding.top - padding.bottom;

        // Determine range
        const values = [
            summary.bargaining.plaintiffReservation,
            summary.bargaining.defendantMaximum,
            summary.plaintiff.expectedValue,
            summary.defendant.expectedValue
        ].filter(v => v > 0);

        const minVal = Math.max(0, Math.min(...values) * 0.7);
        const maxVal = Math.max(...values) * 1.3;

        // Draw axis
        this._drawHorizontalAxis(ctx, padding, chartWidth, height, minVal, maxVal);

        // Bar positions
        const barY = padding.top + chartHeight * 0.3;
        const barHeight = chartHeight * 0.4;

        // Draw full range bar (background)
        ctx.fillStyle = this.colors.bgSecondary;
        ctx.fillRect(padding.left, barY, chartWidth, barHeight);

        // Calculate positions
        const pReserveX = padding.left + ((summary.bargaining.plaintiffReservation - minVal) / (maxVal - minVal)) * chartWidth;
        const dMaxX = padding.left + ((summary.bargaining.defendantMaximum - minVal) / (maxVal - minVal)) * chartWidth;

        // Draw ZOPA if it exists
        if (summary.bargaining.zopaExists) {
            ctx.fillStyle = this.colors.zopa.fill;
            ctx.fillRect(pReserveX, barY, dMaxX - pReserveX, barHeight);

            // ZOPA border
            ctx.strokeStyle = this.colors.zopa.stroke;
            ctx.lineWidth = 2;
            ctx.strokeRect(pReserveX, barY, dMaxX - pReserveX, barHeight);
        } else {
            // No ZOPA - show gap
            ctx.fillStyle = 'rgba(248, 81, 73, 0.2)';
            ctx.fillRect(dMaxX, barY, pReserveX - dMaxX, barHeight);
            ctx.strokeStyle = this.colors.danger;
            ctx.lineWidth = 2;
            ctx.setLineDash([5, 5]);
            ctx.strokeRect(Math.min(pReserveX, dMaxX), barY, Math.abs(pReserveX - dMaxX), barHeight);
            ctx.setLineDash([]);
        }

        // Plaintiff reservation marker
        ctx.beginPath();
        ctx.moveTo(pReserveX, barY - 5);
        ctx.lineTo(pReserveX, barY + barHeight + 5);
        ctx.strokeStyle = this.colors.plaintiff.primary;
        ctx.lineWidth = 3;
        ctx.stroke();

        // Defendant maximum marker
        ctx.beginPath();
        ctx.moveTo(dMaxX, barY - 5);
        ctx.lineTo(dMaxX, barY + barHeight + 5);
        ctx.strokeStyle = this.colors.defendant.primary;
        ctx.lineWidth = 3;
        ctx.stroke();

        // Draw expected values as triangles
        const pEVX = padding.left + ((summary.plaintiff.expectedValue - minVal) / (maxVal - minVal)) * chartWidth;
        const dEVX = padding.left + ((summary.defendant.expectedValue - minVal) / (maxVal - minVal)) * chartWidth;

        // Plaintiff EV triangle (pointing down)
        ctx.beginPath();
        ctx.moveTo(pEVX, barY - 8);
        ctx.lineTo(pEVX - 6, barY - 16);
        ctx.lineTo(pEVX + 6, barY - 16);
        ctx.closePath();
        ctx.fillStyle = this.colors.plaintiff.primary;
        ctx.fill();

        // Defendant EV triangle (pointing up)
        ctx.beginPath();
        ctx.moveTo(dEVX, barY + barHeight + 8);
        ctx.lineTo(dEVX - 6, barY + barHeight + 16);
        ctx.lineTo(dEVX + 6, barY + barHeight + 16);
        ctx.closePath();
        ctx.fillStyle = this.colors.defendant.primary;
        ctx.fill();

        // Draw history trail for settlement positions
        if (this.historyData.days.length > 1) {
            const trailLength = Math.min(50, this.historyData.days.length);
            const startIdx = this.historyData.days.length - trailLength;

            // Plaintiff trail
            ctx.beginPath();
            ctx.strokeStyle = this.colors.plaintiff.bg;
            ctx.lineWidth = 1;
            for (let i = startIdx; i < this.historyData.days.length; i++) {
                const x = padding.left + ((this.historyData.plaintiffReservation[i] - minVal) / (maxVal - minVal)) * chartWidth;
                const y = barY + barHeight + 20 + (i - startIdx) * 0.5;
                if (i === startIdx) ctx.moveTo(x, y);
                else ctx.lineTo(x, y);
            }
            ctx.stroke();

            // Defendant trail
            ctx.beginPath();
            ctx.strokeStyle = this.colors.defendant.bg;
            for (let i = startIdx; i < this.historyData.days.length; i++) {
                const x = padding.left + ((this.historyData.defendantMaximum[i] - minVal) / (maxVal - minVal)) * chartWidth;
                const y = barY - 15 - (i - startIdx) * 0.5;
                if (i === startIdx) ctx.moveTo(x, y);
                else ctx.lineTo(x, y);
            }
            ctx.stroke();
        }
    }

    /**
     * Draw horizontal axis with currency labels
     */
    _drawHorizontalAxis(ctx, padding, chartWidth, height, minVal, maxVal) {
        const numTicks = 5;

        ctx.strokeStyle = this.colors.border;
        ctx.lineWidth = 1;
        ctx.beginPath();
        ctx.moveTo(padding.left, height - padding.bottom);
        ctx.lineTo(padding.left + chartWidth, height - padding.bottom);
        ctx.stroke();

        ctx.font = '10px -apple-system, sans-serif';
        ctx.fillStyle = this.colors.textMuted;
        ctx.textAlign = 'center';

        for (let i = 0; i <= numTicks; i++) {
            const val = minVal + (i / numTicks) * (maxVal - minVal);
            const x = padding.left + (i / numTicks) * chartWidth;

            ctx.beginPath();
            ctx.moveTo(x, height - padding.bottom);
            ctx.lineTo(x, height - padding.bottom + 5);
            ctx.stroke();

            ctx.fillText(formatCurrency(val), x, height - padding.bottom + 16);
        }
    }

    // ========================================================================
    // TIMELINE VISUALIZATION
    // ========================================================================

    /**
     * Draw the timeline with cost accumulation
     */
    drawTimeline(summary) {
        const canvas = this.canvases.timeline;
        const ctx = this.contexts.timeline;
        if (!canvas || !ctx) return;

        const rect = canvas.getBoundingClientRect();
        const width = rect.width;
        const height = rect.height;

        ctx.clearRect(0, 0, width, height);

        const padding = { left: 60, right: 20, top: 15, bottom: 30 };
        const chartWidth = width - padding.left - padding.right;
        const chartHeight = height - padding.top - padding.bottom;

        if (this.historyData.days.length < 2) {
            // Draw placeholder
            ctx.fillStyle = this.colors.textMuted;
            ctx.font = '12px -apple-system, sans-serif';
            ctx.textAlign = 'center';
            ctx.fillText('File complaint to begin timeline', width / 2, height / 2);
            return;
        }

        // Determine ranges
        const maxDay = Math.max(...this.historyData.days, 100);
        const maxCost = Math.max(
            ...this.historyData.plaintiffCosts,
            ...this.historyData.defendantCosts,
            summary.plaintiff.spentToDate + 10000,
            summary.defendant.spentToDate + 10000
        );

        // Draw axes
        this._drawAxes(ctx, padding, chartWidth, chartHeight, 0, maxCost, 'Costs ($)', true);

        // Draw day axis
        ctx.strokeStyle = this.colors.border;
        ctx.beginPath();
        ctx.moveTo(padding.left, height - padding.bottom);
        ctx.lineTo(padding.left + chartWidth, height - padding.bottom);
        ctx.stroke();

        // Day labels
        ctx.font = '10px -apple-system, sans-serif';
        ctx.fillStyle = this.colors.textMuted;
        ctx.textAlign = 'center';

        const dayTicks = 5;
        for (let i = 0; i <= dayTicks; i++) {
            const day = Math.round((i / dayTicks) * maxDay);
            const x = padding.left + (i / dayTicks) * chartWidth;
            ctx.fillText(`Day ${day}`, x, height - padding.bottom + 15);
        }

        // Draw cost lines
        this._drawLine(
            ctx, padding, chartWidth, chartHeight,
            this.historyData.days, this.historyData.plaintiffCosts,
            0, maxDay, 0, maxCost,
            this.colors.plaintiff.primary, this.colors.plaintiff.bg
        );

        this._drawLine(
            ctx, padding, chartWidth, chartHeight,
            this.historyData.days, this.historyData.defendantCosts,
            0, maxDay, 0, maxCost,
            this.colors.defendant.primary, this.colors.defendant.bg
        );

        // Draw budget lines
        const pBudgetY = padding.top + chartHeight - (summary.plaintiff.spentToDate + summary.plaintiff.remainingBudget) / maxCost * chartHeight;
        const dBudgetY = padding.top + chartHeight - (summary.defendant.spentToDate + summary.defendant.remainingBudget) / maxCost * chartHeight;

        ctx.setLineDash([3, 3]);
        ctx.strokeStyle = this.colors.plaintiff.secondary;
        ctx.beginPath();
        ctx.moveTo(padding.left, pBudgetY);
        ctx.lineTo(width - padding.right, pBudgetY);
        ctx.stroke();

        ctx.strokeStyle = this.colors.defendant.secondary;
        ctx.beginPath();
        ctx.moveTo(padding.left, dBudgetY);
        ctx.lineTo(width - padding.right, dBudgetY);
        ctx.stroke();
        ctx.setLineDash([]);

        // Current day marker
        const currentDayX = padding.left + (summary.day / maxDay) * chartWidth;
        ctx.strokeStyle = this.colors.settlement;
        ctx.lineWidth = 2;
        ctx.beginPath();
        ctx.moveTo(currentDayX, padding.top);
        ctx.lineTo(currentDayX, height - padding.bottom);
        ctx.stroke();

        // Phase markers would go here
        // (simplified for now)
    }

    /**
     * Draw a line chart
     */
    _drawLine(ctx, padding, chartWidth, chartHeight, xData, yData, minX, maxX, minY, maxY, strokeColor, fillColor) {
        if (xData.length < 2) return;

        // Draw filled area
        ctx.beginPath();
        ctx.moveTo(padding.left, padding.top + chartHeight);

        for (let i = 0; i < xData.length; i++) {
            const x = padding.left + ((xData[i] - minX) / (maxX - minX)) * chartWidth;
            const y = padding.top + chartHeight - ((yData[i] - minY) / (maxY - minY)) * chartHeight;
            ctx.lineTo(x, y);
        }

        ctx.lineTo(padding.left + ((xData[xData.length - 1] - minX) / (maxX - minX)) * chartWidth, padding.top + chartHeight);
        ctx.closePath();
        ctx.fillStyle = fillColor;
        ctx.fill();

        // Draw line
        ctx.beginPath();
        for (let i = 0; i < xData.length; i++) {
            const x = padding.left + ((xData[i] - minX) / (maxX - minX)) * chartWidth;
            const y = padding.top + chartHeight - ((yData[i] - minY) / (maxY - minY)) * chartHeight;
            if (i === 0) ctx.moveTo(x, y);
            else ctx.lineTo(x, y);
        }
        ctx.strokeStyle = strokeColor;
        ctx.lineWidth = 2;
        ctx.stroke();
    }

    /**
     * Draw axes with labels
     */
    _drawAxes(ctx, padding, chartWidth, chartHeight, minVal, maxVal, label, skipXAxis = false) {
        // Y-axis
        ctx.strokeStyle = this.colors.border;
        ctx.lineWidth = 1;
        ctx.beginPath();
        ctx.moveTo(padding.left, padding.top);
        ctx.lineTo(padding.left, padding.top + chartHeight);
        ctx.stroke();

        // Y-axis labels
        ctx.font = '10px -apple-system, sans-serif';
        ctx.fillStyle = this.colors.textMuted;
        ctx.textAlign = 'right';

        const numTicks = 5;
        for (let i = 0; i <= numTicks; i++) {
            const val = minVal + (i / numTicks) * (maxVal - minVal);
            const y = padding.top + chartHeight - (i / numTicks) * chartHeight;

            ctx.beginPath();
            ctx.moveTo(padding.left - 5, y);
            ctx.lineTo(padding.left, y);
            ctx.stroke();

            ctx.fillText(formatCurrency(val), padding.left - 8, y + 3);
        }

        // Y-axis label
        ctx.save();
        ctx.translate(15, padding.top + chartHeight / 2);
        ctx.rotate(-Math.PI / 2);
        ctx.textAlign = 'center';
        ctx.fillStyle = this.colors.textSecondary;
        ctx.fillText(label, 0, 0);
        ctx.restore();
    }

    // ========================================================================
    // CASCADE FLOW DIAGRAM
    // ========================================================================

    /**
     * Draw the decision cascade visualization
     */
    drawCascade(summary) {
        const canvas = this.canvases.cascade;
        const ctx = this.contexts.cascade;
        if (!canvas || !ctx) return;

        const rect = canvas.getBoundingClientRect();
        const width = rect.width;
        const height = rect.height;

        ctx.clearRect(0, 0, width, height);

        const padding = { left: 20, right: 20, top: 15, bottom: 15 };

        // Draw the strategic flow diagram
        this._drawStrategicFlow(ctx, padding, width, height, summary);
    }

    /**
     * Draw the strategic flow showing how factors cascade
     */
    _drawStrategicFlow(ctx, padding, width, height, summary) {
        const nodeWidth = 120;
        const nodeHeight = 50;
        const hGap = 30;
        const vGap = 20;

        // Calculate positions for 5 columns
        const cols = 5;
        const startX = padding.left + 60;
        const colWidth = (width - padding.left - padding.right - 120) / (cols - 1);

        // Row positions
        const row1Y = padding.top + 10;
        const row2Y = row1Y + nodeHeight + vGap;

        // Define nodes
        const nodes = [
            // Column 1: Inputs
            {
                id: 'info',
                label: 'Information',
                value: `${Math.round(summary.information.plaintiff * 100)}% / ${Math.round(summary.information.defendant * 100)}%`,
                x: startX,
                y: row1Y,
                color: this.colors.settlement
            },
            {
                id: 'costs',
                label: 'Costs',
                value: `${formatCurrency(summary.plaintiff.spentToDate)} / ${formatCurrency(summary.defendant.spentToDate)}`,
                x: startX,
                y: row2Y,
                color: this.colors.warning
            },

            // Column 2: Beliefs
            {
                id: 'p-belief',
                label: 'P Liability Belief',
                value: `${Math.round(summary.plaintiff.liabilityBelief * 100)}%`,
                x: startX + colWidth,
                y: row1Y,
                color: this.colors.plaintiff.primary
            },
            {
                id: 'd-belief',
                label: 'D Liability Belief',
                value: `${Math.round(summary.defendant.liabilityBelief * 100)}%`,
                x: startX + colWidth,
                y: row2Y,
                color: this.colors.defendant.primary
            },

            // Column 3: Expected Values
            {
                id: 'p-ev',
                label: 'P Expected Value',
                value: formatCurrency(summary.plaintiff.expectedValue),
                x: startX + colWidth * 2,
                y: row1Y,
                color: this.colors.plaintiff.primary
            },
            {
                id: 'd-ev',
                label: 'D Expected Value',
                value: formatCurrency(summary.defendant.expectedValue),
                x: startX + colWidth * 2,
                y: row2Y,
                color: this.colors.defendant.primary
            },

            // Column 4: Reservation Prices
            {
                id: 'p-reserve',
                label: 'P Reservation',
                value: formatCurrency(summary.bargaining.plaintiffReservation),
                x: startX + colWidth * 3,
                y: row1Y,
                color: this.colors.plaintiff.primary
            },
            {
                id: 'd-max',
                label: 'D Maximum',
                value: formatCurrency(summary.bargaining.defendantMaximum),
                x: startX + colWidth * 3,
                y: row2Y,
                color: this.colors.defendant.primary
            },

            // Column 5: Outcome
            {
                id: 'zopa',
                label: summary.bargaining.zopaExists ? 'ZOPA Exists' : 'No ZOPA',
                value: summary.bargaining.zopaExists ?
                    formatCurrency(summary.bargaining.zopaWidth) :
                    'Gap: ' + formatCurrency(Math.abs(summary.bargaining.plaintiffReservation - summary.bargaining.defendantMaximum)),
                x: startX + colWidth * 4,
                y: row1Y + nodeHeight / 2 + vGap / 2,
                color: summary.bargaining.zopaExists ? this.colors.zopa.stroke : this.colors.danger,
                highlight: true
            }
        ];

        // Define connections
        const connections = [
            { from: 'info', to: 'p-belief' },
            { from: 'info', to: 'd-belief' },
            { from: 'costs', to: 'p-reserve' },
            { from: 'costs', to: 'd-max' },
            { from: 'p-belief', to: 'p-ev' },
            { from: 'd-belief', to: 'd-ev' },
            { from: 'p-ev', to: 'p-reserve' },
            { from: 'd-ev', to: 'd-max' },
            { from: 'p-reserve', to: 'zopa' },
            { from: 'd-max', to: 'zopa' }
        ];

        // Draw connections first
        connections.forEach(conn => {
            const fromNode = nodes.find(n => n.id === conn.from);
            const toNode = nodes.find(n => n.id === conn.to);
            if (fromNode && toNode) {
                this._drawConnection(ctx, fromNode, toNode, nodeWidth, nodeHeight);
            }
        });

        // Draw nodes
        nodes.forEach(node => {
            this._drawNode(ctx, node, nodeWidth, nodeHeight);
        });

        // Draw legend/explanation at bottom
        ctx.font = '11px -apple-system, sans-serif';
        ctx.fillStyle = this.colors.textMuted;
        ctx.textAlign = 'left';
        ctx.fillText(
            `Settlement Probability: ${Math.round(summary.bargaining.settlementProbability * 100)}%`,
            padding.left,
            height - 5
        );

        ctx.textAlign = 'right';
        ctx.fillText(
            `Day ${summary.day} | Phase: ${summary.phase}`,
            width - padding.right,
            height - 5
        );
    }

    /**
     * Draw a node box
     */
    _drawNode(ctx, node, width, height) {
        const x = node.x;
        const y = node.y;

        // Background
        ctx.fillStyle = node.highlight ? node.color + '30' : this.colors.bgSecondary;
        ctx.strokeStyle = node.color;
        ctx.lineWidth = node.highlight ? 2 : 1;

        // Rounded rectangle
        const radius = 6;
        ctx.beginPath();
        ctx.moveTo(x + radius, y);
        ctx.lineTo(x + width - radius, y);
        ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
        ctx.lineTo(x + width, y + height - radius);
        ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
        ctx.lineTo(x + radius, y + height);
        ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
        ctx.lineTo(x, y + radius);
        ctx.quadraticCurveTo(x, y, x + radius, y);
        ctx.closePath();
        ctx.fill();
        ctx.stroke();

        // Label
        ctx.font = '10px -apple-system, sans-serif';
        ctx.fillStyle = this.colors.textSecondary;
        ctx.textAlign = 'center';
        ctx.fillText(node.label, x + width / 2, y + 16);

        // Value
        ctx.font = 'bold 12px -apple-system, sans-serif';
        ctx.fillStyle = node.color;
        ctx.fillText(node.value, x + width / 2, y + 35);
    }

    /**
     * Draw a connection line between nodes
     */
    _drawConnection(ctx, fromNode, toNode, nodeWidth, nodeHeight) {
        const startX = fromNode.x + nodeWidth;
        const startY = fromNode.y + nodeHeight / 2;
        const endX = toNode.x;
        const endY = toNode.y + nodeHeight / 2;

        // Bezier curve
        const controlX1 = startX + (endX - startX) * 0.5;
        const controlY1 = startY;
        const controlX2 = startX + (endX - startX) * 0.5;
        const controlY2 = endY;

        ctx.beginPath();
        ctx.moveTo(startX, startY);
        ctx.bezierCurveTo(controlX1, controlY1, controlX2, controlY2, endX, endY);
        ctx.strokeStyle = this.colors.border;
        ctx.lineWidth = 1;
        ctx.stroke();

        // Arrow head
        const angle = Math.atan2(endY - controlY2, endX - controlX2);
        const arrowSize = 6;

        ctx.beginPath();
        ctx.moveTo(endX, endY);
        ctx.lineTo(
            endX - arrowSize * Math.cos(angle - Math.PI / 6),
            endY - arrowSize * Math.sin(angle - Math.PI / 6)
        );
        ctx.lineTo(
            endX - arrowSize * Math.cos(angle + Math.PI / 6),
            endY - arrowSize * Math.sin(angle + Math.PI / 6)
        );
        ctx.closePath();
        ctx.fillStyle = this.colors.border;
        ctx.fill();
    }
}

// Export
window.LitigationVisualizer = LitigationVisualizer;