interface SimulationLoadingOverlayProps {
  status: 'PENDING' | 'RUNNING';
  progress?: number;
}

const SimulationLoadingOverlay = ({ status, progress }: SimulationLoadingOverlayProps) => {
  const displayProgress = progress ?? 0;
  const statusText = status === 'PENDING' ? '모델 초기화 중...' : '입자 추적 계산 중...';

  return (
    <div
      style={{
        position: 'absolute',
        inset: 0,
        zIndex: 50,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        background: 'rgba(10, 14, 26, 0.75)',
        backdropFilter: 'blur(4px)',
      }}
    >
      <div
        style={{
          width: 320,
          background: 'var(--bg1)',
          border: '1px solid var(--bd)',
          borderRadius: 'var(--rM)',
          padding: '28px 24px',
          display: 'flex',
          flexDirection: 'column',
          gap: 16,
        }}
      >
        {/* 아이콘 + 제목 */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <div
            style={{
              width: 36,
              height: 36,
              borderRadius: '50%',
              background: 'rgba(6, 182, 212, 0.12)',
              border: '1px solid rgba(6, 182, 212, 0.3)',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              flexShrink: 0,
            }}
          >
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
              <path
                d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 14l-4-4 1.41-1.41L11 13.17l6.59-6.59L19 8l-8 8z"
                fill="var(--cyan)"
                opacity="0.8"
              />
            </svg>
          </div>
          <div>
            <div style={{ color: 'var(--t1)', fontSize: 14, fontWeight: 600 }}>
              확산 예측 분석 중
            </div>
            <div style={{ color: 'var(--t3)', fontSize: 12, marginTop: 2 }}>
              {statusText}
            </div>
          </div>
        </div>

        {/* 진행률 바 */}
        <div>
          <div
            style={{
              height: 6,
              background: 'rgba(255, 255, 255, 0.06)',
              borderRadius: 999,
              overflow: 'hidden',
            }}
          >
            <div
              style={{
                height: '100%',
                width: `${displayProgress}%`,
                background: 'linear-gradient(90deg, var(--cyan), var(--blue))',
                borderRadius: 999,
                transition: 'width 0.6s ease',
              }}
            />
          </div>
          <div
            style={{
              display: 'flex',
              justifyContent: 'space-between',
              marginTop: 8,
            }}
          >
            <span style={{ color: 'var(--t3)', fontSize: 11 }}>
              {status === 'PENDING' ? '대기 중' : '분석 진행 중'}
            </span>
            <span style={{ color: 'var(--cyan)', fontSize: 12, fontWeight: 600 }}>
              {status === 'PENDING' ? '—' : `${displayProgress}%`}
            </span>
          </div>
        </div>

        {/* 안내 문구 */}
        <div
          style={{
            color: 'var(--t3)',
            fontSize: 11,
            lineHeight: 1.6,
            borderTop: '1px solid var(--bdL)',
            paddingTop: 12,
          }}
        >
          OpenDrift 모델로 유류 확산을 시뮬레이션하고 있습니다.
          <br />
          완료되면 자동으로 결과가 표시됩니다.
        </div>
      </div>
    </div>
  );
};

export default SimulationLoadingOverlay;