import { scaleLinear, svgText, CHART_COLORS, escapeXml } from './chart-utils.js';
const PADDING = { top: 40, right: 20, bottom: 50, left: 50 };
/**
 * Build a responsive SVG line chart for one or two series.
 * When a second series is passed via options it is drawn with a dashed line.
 * Returns empty string when points array is empty.
 */
export function buildSvgLineChart(points, options) {
    if (points.length === 0) {
        return '';
    }
    const vbW = options?.width ?? 500;
    const vbH = options?.height ?? 300;
    const title = options?.title ?? '';
    const showDots = options?.showDots ?? true;
    const innerW = vbW - PADDING.left - PADDING.right;
    const innerH = vbH - PADDING.top - PADDING.bottom;
    const xs = points.map((p) => p.x);
    const ys = points.map((p) => p.y);
    const minX = Math.min(...xs);
    const maxX = Math.max(...xs, minX + 1);
    const maxY = Math.max(...ys, 1);
    const xScale = scaleLinear([minX, maxX], [0, innerW]);
    const yScale = scaleLinear([0, maxY], [innerH, 0]);
    const color0 = CHART_COLORS[0] ?? '#e94560';
    const pathD = points
        .map((p, i) => {
        const px = (PADDING.left + xScale(p.x)).toFixed(1);
        const py = (PADDING.top + yScale(p.y)).toFixed(1);
        return `${i === 0 ? 'M' : 'L'} ${px} ${py}`;
    })
        .join(' ');
    const dotsHtml = showDots
        ? points
            .map((p) => {
            const cx = (PADDING.left + xScale(p.x)).toFixed(1);
            const cy = (PADDING.top + yScale(p.y)).toFixed(1);
            const dotLabel = p.label
                ? svgText(Number(cx), Number(cy) - 8, p.label, {
                    fontSize: 9,
                    anchor: 'middle',
                    fill: '#6b7280',
                })
                : '';
            return `<circle cx="${cx}" cy="${cy}" r="4" fill="${escapeXml(color0)}"/>${dotLabel}`;
        })
            .join('\n  ')
        : '';
    const yTicks = buildYTicks(maxY, innerW, PADDING, innerH, yScale);
    const xTicks = buildXTicks(points, xScale, PADDING, vbH);
    const titleEl = title
        ? svgText(vbW / 2, 20, title, { fontSize: 13, anchor: 'middle', fill: '#1a1a2e' })
        : '';
    return `<svg viewBox="0 0 ${vbW} ${vbH}" xmlns="http://www.w3.org/2000/svg" style="width:100%;max-width:${vbW}px">
  ${titleEl}
  ${yTicks}
  ${xTicks}
  <path d="${pathD}" fill="none" stroke="${escapeXml(color0)}" stroke-width="2.5" stroke-linejoin="round"/>
  ${dotsHtml}
  <line x1="${PADDING.left}" y1="${PADDING.top}" x2="${PADDING.left}" y2="${PADDING.top + innerH}" stroke="#e9ecef" stroke-width="1"/>
  <line x1="${PADDING.left}" y1="${PADDING.top + innerH}" x2="${PADDING.left + innerW}" y2="${PADDING.top + innerH}" stroke="#e9ecef" stroke-width="1"/>
</svg>`;
}
/**
 * Build a dual-series SVG line chart (real vs ideal).
 * Returns empty string when either series is empty.
 */
export function buildSvgDualLineChart(series1, series2, options) {
    if (series1.length === 0 && series2.length === 0) {
        return '';
    }
    const vbW = options?.width ?? 500;
    const vbH = options?.height ?? 300;
    const title = options?.title ?? '';
    const showDots = options?.showDots ?? true;
    const innerW = vbW - PADDING.left - PADDING.right;
    const innerH = vbH - PADDING.top - PADDING.bottom;
    const allPoints = [...series1, ...series2];
    const xs = allPoints.map((p) => p.x);
    const ys = allPoints.map((p) => p.y);
    const minX = Math.min(...xs, 0);
    const maxX = Math.max(...xs, minX + 1);
    const maxY = Math.max(...ys, 1);
    const xScale = scaleLinear([minX, maxX], [0, innerW]);
    const yScale = scaleLinear([0, maxY], [innerH, 0]);
    const color0 = CHART_COLORS[0] ?? '#e94560';
    const color1 = CHART_COLORS[1] ?? '#0891b2';
    const makePath = (pts, color, dashed) => {
        if (pts.length === 0) {
            return '';
        }
        const d = pts
            .map((p, i) => {
            const px = (PADDING.left + xScale(p.x)).toFixed(1);
            const py = (PADDING.top + yScale(p.y)).toFixed(1);
            return `${i === 0 ? 'M' : 'L'} ${px} ${py}`;
        })
            .join(' ');
        const dash = dashed ? ' stroke-dasharray="6 3"' : '';
        return `<path d="${d}" fill="none" stroke="${escapeXml(color)}" stroke-width="2.5" stroke-linejoin="round"${dash}/>`;
    };
    const makeDots = (pts, color) => {
        if (!showDots) {
            return '';
        }
        return pts
            .map((p) => {
            const cx = (PADDING.left + xScale(p.x)).toFixed(1);
            const cy = (PADDING.top + yScale(p.y)).toFixed(1);
            return `<circle cx="${cx}" cy="${cy}" r="3" fill="${escapeXml(color)}"/>`;
        })
            .join('\n  ');
    };
    const label1 = options?.label1 ?? 'Real';
    const label2 = options?.label2 ?? 'Ideal';
    const legendY = vbH - 8;
    const legend = `${svgText(PADDING.left, legendY, label1, { fontSize: 10, anchor: 'start', fill: color0 })}
  ${svgText(PADDING.left + 80, legendY, label2, { fontSize: 10, anchor: 'start', fill: color1 })}`;
    const yTicks = buildYTicks(maxY, innerW, PADDING, innerH, yScale);
    const titleEl = title
        ? svgText(vbW / 2, 20, title, { fontSize: 13, anchor: 'middle', fill: '#1a1a2e' })
        : '';
    return `<svg viewBox="0 0 ${vbW} ${vbH}" xmlns="http://www.w3.org/2000/svg" style="width:100%;max-width:${vbW}px">
  ${titleEl}
  ${yTicks}
  ${makePath(series1, color0, false)}
  ${makePath(series2, color1, true)}
  ${makeDots(series1, color0)}
  ${makeDots(series2, color1)}
  ${legend}
  <line x1="${PADDING.left}" y1="${PADDING.top}" x2="${PADDING.left}" y2="${PADDING.top + innerH}" stroke="#e9ecef" stroke-width="1"/>
  <line x1="${PADDING.left}" y1="${PADDING.top + innerH}" x2="${PADDING.left + innerW}" y2="${PADDING.top + innerH}" stroke="#e9ecef" stroke-width="1"/>
</svg>`;
}
function buildYTicks(maxVal, innerW, padding, _innerH, yScale) {
    const tickCount = 4;
    return Array.from({ length: tickCount + 1 }, (_, i) => {
        const val = (maxVal / tickCount) * i;
        const y = padding.top + yScale(val);
        const label = Number.isInteger(val) ? String(val) : val.toFixed(1);
        return `<line x1="${padding.left}" y1="${y.toFixed(1)}" x2="${(padding.left + innerW).toFixed(1)}" y2="${y.toFixed(1)}" stroke="#f3f4f6" stroke-width="1"/>
${svgText(padding.left - 6, y + 4, label, { fontSize: 9, anchor: 'end', fill: '#9ca3af' })}`;
    }).join('\n  ');
}
function buildXTicks(points, xScale, padding, vbH) {
    const maxTicks = 6;
    const step = Math.max(1, Math.ceil(points.length / maxTicks));
    return points
        .filter((_, i) => i % step === 0)
        .map((p) => {
        const x = padding.left + xScale(p.x);
        const y = vbH - padding.bottom + 14;
        const lbl = p.label ?? String(p.x);
        const short = lbl.length > 8 ? lbl.slice(0, 7) + '…' : lbl;
        return svgText(x, y, short, { fontSize: 9, anchor: 'middle', fill: '#9ca3af' });
    })
        .join('\n  ');
}
//# sourceMappingURL=line-chart.js.map