import { useRef, useEffect, memo } from 'react';
import type { OilDetectionResult } from '../utils/oilDetection';
import { OIL_CLASSES, OIL_CLASS_NAMES } from '../utils/oilDetection';

export interface OilDetectionOverlayProps {
  result: OilDetectionResult | null;
  isAnalyzing?: boolean;
  error?: string | null;
}

/** 클래스 ID → RGBA 색상 (오버레이용) */
const CLASS_COLORS: Record<number, [number, number, number, number]> = {
  1: [0, 0, 204, 90], // black oil → 파란색
  2: [180, 180, 180, 90], // brown oil → 회색
  3: [255, 255, 0, 90], // rainbow oil → 노란색
  4: [178, 102, 255, 90], // silver oil → 보라색
};

const OilDetectionOverlay = memo(
  ({ result, isAnalyzing = false, error = null }: OilDetectionOverlayProps) => {
    const canvasRef = useRef<HTMLCanvasElement>(null);

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

      const ctx = canvas.getContext('2d');
      if (!ctx) return;

      const dpr = window.devicePixelRatio || 1;
      const displayW = canvas.clientWidth;
      const displayH = canvas.clientHeight;

      canvas.width = displayW * dpr;
      canvas.height = displayH * dpr;
      ctx.scale(dpr, dpr);

      ctx.clearRect(0, 0, displayW, displayH);

      if (!result || result.regions.length === 0) return;

      const { mask, maskWidth, maskHeight } = result;

      // 클래스별 색상으로 마스크 렌더링
      const offscreen = new OffscreenCanvas(maskWidth, maskHeight);
      const offCtx = offscreen.getContext('2d');
      if (offCtx) {
        const imageData = new ImageData(maskWidth, maskHeight);
        for (let i = 0; i < mask.length; i++) {
          const classId = mask[i];
          if (classId === 0) continue; // background skip

          const color = CLASS_COLORS[classId];
          if (!color) continue;

          const pixelIdx = i * 4;
          imageData.data[pixelIdx] = color[0];
          imageData.data[pixelIdx + 1] = color[1];
          imageData.data[pixelIdx + 2] = color[2];
          imageData.data[pixelIdx + 3] = color[3];
        }
        offCtx.putImageData(imageData, 0, 0);
        ctx.drawImage(offscreen, 0, 0, displayW, displayH);
      }
    }, [result]);

    const formatArea = (m2: number): string => {
      if (m2 >= 1000) {
        return `${(m2 / 1_000_000).toFixed(1)} km²`;
      }
      return `~${Math.round(m2)} m²`;
    };

    const hasRegions = result !== null && result.regions.length > 0;

    return (
      <>
        <canvas
          ref={canvasRef}
          className="absolute inset-0 w-full h-full pointer-events-none z-[15]"
        />

        {/* OSD — bottom-8로 좌표 OSD(bottom-2)와 겹침 방지 */}
        <div className="absolute bottom-8 left-2 z-20 flex flex-col items-start gap-1">
          {/* 에러 표시 */}
          {error && (
            <div
              className="px-2 py-0.5 rounded text-caption font-semibold font-korean"
              style={{
                background: 'color-mix(in srgb, var(--color-danger) 20%, transparent)',
                border: '1px solid color-mix(in srgb, var(--color-danger) 50%, transparent)',
                color: 'var(--color-danger)',
              }}
            >
              추론 서버 연결 불가
            </div>
          )}

          {/* 클래스별 감지 결과 */}
          {hasRegions && result !== null && (
            <>
              {result.regions.map((region) => {
                const oilClass = OIL_CLASSES.find((c) => c.classId === region.classId);
                const color = oilClass ? `rgb(${oilClass.color.join(',')})` : 'var(--color-danger)';
                const label = OIL_CLASS_NAMES[region.classId] || region.className;

                return (
                  <div
                    key={region.classId}
                    className="px-2 py-0.5 rounded text-caption font-semibold font-korean"
                    style={{
                      background: `${color}33`,
                      border: `1px solid ${color}80`,
                      color,
                    }}
                  >
                    {label}: {formatArea(region.areaM2)} ({region.percentage.toFixed(1)}%)
                  </div>
                );
              })}
              {/* 합계 */}
              <div
                className="px-2 py-0.5 rounded text-caption font-semibold font-korean"
                style={{
                  background: 'color-mix(in srgb, var(--color-danger) 20%, transparent)',
                  border: '1px solid color-mix(in srgb, var(--color-danger) 50%, transparent)',
                  color: 'var(--color-danger)',
                }}
              >
                합계: {formatArea(result.totalAreaM2)} ({result.totalPercentage.toFixed(1)}%)
              </div>
            </>
          )}

          {/* 감지 없음 */}
          {!hasRegions && !isAnalyzing && !error && (
            <div
              className="px-2 py-0.5 rounded text-caption font-semibold font-korean"
              style={{
                background: 'color-mix(in srgb, var(--color-success) 15%, transparent)',
                border: '1px solid color-mix(in srgb, var(--color-success) 35%, transparent)',
                color: 'var(--color-success)',
              }}
            >
              감지 없음
            </div>
          )}

          {/* 분석 중 */}
          {isAnalyzing && (
            <span className="text-caption font-korean text-fg-disabled animate-pulse px-1">
              분석중...
            </span>
          )}
        </div>
      </>
    );
  },
);

OilDetectionOverlay.displayName = 'OilDetectionOverlay';

export default OilDetectionOverlay;
