import QRCode from "qrcode";
import { useEffect, useRef, useState } from "react";
import s from "./QrCanvas.module.css";

export interface QrCanvasProps
{
    /** 编码进二维码的完整 URL（qrPayload）。 */
    value: string;
    /** 绘制边长（CSS px）；实际位图按 devicePixelRatio 放大以求锐利。默认 220。 */
    size?: number;
}

// QrCanvas：显码页的签名元素——把 qrPayload 渲染成一枚平静、可信的二维码。
//
// 取色不写死黑白，而是读当前主题的语义令牌（--surface-raised 作 light module、
// --text 作 dark module），让二维码在浅 / 深主题里都贴合卡面、不像一块外来贴纸；
// 又保留足够明暗对比满足扫码识别（--text 对 --surface-raised 始终 >7:1）。
// 四角的定位记号（registration marks）由 CSS 叠加，呼应「对准、扫描」这一动作本身。
export function QrCanvas(props: QrCanvasProps)
{
    const { value, size = 220 } = props;
    const canvasRef = useRef<HTMLCanvasElement | null>(null);
    const [ error, setError ] = useState(false);

    useEffect(() =>
    {
        const canvas = canvasRef.current;
        if (!canvas || !value) { return; }

        let cancelled = false;
        setError(false);

        // 从计算样式读语义令牌；module 用最深的前景、底用抬升表面，保证对比与贴合。
        const styles = getComputedStyle(canvas);
        const dark = styles.getPropertyValue("--qr-dark").trim() || "#1F1F1F";
        const light = styles.getPropertyValue("--qr-light").trim() || "#FFFFFF";

        QRCode.toCanvas(canvas, value, {
            errorCorrectionLevel: "M",
            margin: 0,                       // 留白由外层 CSS 容器负责，位图本身贴满
            width: size,
            color: { dark, light },
        }).then(
            () => { /* 成功：canvas 已就绪 */ },
            () => { if (!cancelled) { setError(true); } },
        );

        return () => { cancelled = true; };
    }, [ value, size ]);

    return (
        <div className={s.frame} style={{ width: size, height: size }}>
            <span className={`${s.tick} ${s.tl}`} aria-hidden="true" />
            <span className={`${s.tick} ${s.tr}`} aria-hidden="true" />
            <span className={`${s.tick} ${s.bl}`} aria-hidden="true" />
            <span className={`${s.tick} ${s.br}`} aria-hidden="true" />
            {/* role=img + aria-label：屏幕阅读器把整块当作一个二维码图像，不读出
                URL（无意义且冗长）；视障用户改走批准页的语义流程。 */}
            <canvas
                ref={canvasRef}
                className={s.canvas}
                role="img"
                aria-label="QR"
                style={{ width: size, height: size, opacity: error ? 0 : 1 }}
            />
        </div>
    );
}
